• 售前

  • 售后

热门帖子
入门百科

Vue nextTick的原理解析

[复制链接]
123457625 显示全部楼层 发表于 2021-10-26 14:29:32 |阅读模式 打印 上一主题 下一主题
目录


  • Event Loop

    • miscroTask(微使命)
    • UI Render(重点)
    • 总结下一个循环

  • nextTick
  • 总结
利用过Vue的小同伴们都知道,Vue里的nextTick可以获取到更新后的DOM, 今天我就来讲解下nextTick里面毕竟做了什么?
开始讲解前,我们需要知道了解一个概念,那就是Event Loop

Event Loop


Event Loop翻译过来就是变乱循环, 一个Event Loop会包括一个或多个task队列,持续线程会从队列中取出最早进入队列的使命举行执行,被取出的使命就叫做macroTask(宏使命), 每个macroTask都有一个使命源, 每个macroTask处理完之后就从队列中取出下一个时间最早进入的macroTask再重执行
使命源:
  1. ```
  2.     1. script
  3.     2. 事件
  4.     3. Dom交互
  5.     4. I/O
  6.     5. UI Render
  7.     6. setTimeout
  8.     7. setInterval
  9.     8. requestAnimationFrame
  10.     .....
  11. ```
复制代码
也就是说碰到以上几种情况就会产生一个macroTask而且推入到队列中

miscroTask(微使命)

执行完每个macroTask之后,主线程会去查抄该macroTask下的microTask是否为空,如果不为空,则按照时间次序从早到晚取出,如果途中有碰到新的microTask, 那么会继承将该microTask推入到microTask队列里

UI Render(重点)

陪同着miscroTask队列的清空,主线程就会执行UI Render, 也就是渲染界面,但是浏览器它并不会每次在UI Render使命下肯定会渲染界面,视情况而言,如今主流浏览器一样平常都是按照60HZ 也就是16.7ms刷新频率举行渲染(不是准确估量),一个macroTask通常是小于16.7ms, 所以浏览器每次会根据情况举行渲染

总结下一个循环

1. 从macroTask队列里取出最早添加进去的
2. 开始执行task, 途中如果碰到新的macroTask,就会将其添加到macroTask队列的最背面
3. 执行完macroTask之后,event loop会去探求microTask队列
4. 同样的原理,如果途中碰到新的microTask,将其放入该macroTask下的microTask队列最背面
5. 执行完microTask,会执行UI Render macroTask
6. 浏览器会根据现有情况决定是否更新DOM,通常是按照60HZ的频率去更新
7. 至此,一个event loop结束了

nextTick


我们开始分析nextTick

根据上图
我们看到nextTick的几种写法:
  1.     1. this.$nextTick(cb)
  2.     2. this.$nextTick().then(cb)
复制代码
全部的cb都会被放入到callbacks数组里,等待一次性调用
上图中我们看到了重要是由timerFunc这个函数来举行调用回调, 那么我们下面来偏重先容这个函数,起首看下源码

我们可以看到timerFunc在差别情况下差别的赋值情况
起首会判断浏览器是否支持promise属性, 如果支持, timerFunc就会被赋值成Promise, 这里有个小小的问题,那就是在ios下,虽然是具备Pormise对象,而且会将它推入到microTask队列里,但是队列却不会更新,这个时候需要添加一个macroTask来逼迫刷新microTask队列
MutationObserver, 相信很多人并不清晰这个Api, 这是一个可以或许监听DOM变化的API,而且属于microTask, 优先级低于Promise 在创建一个新的文本节点后,手动更改其文本节点来触发microTask,
这里会有个小小的问题:
该文本节点渲染乐成后,肯定能代表其他的DOM渲染乐成了吗?
这是个备选方案, 重要还是由于它是一个微使命,所以才利用它,并不是由于它监听了DOM
微使命都失败后, 退而求其次,选择setImmediate, 这是一个只有高版本IE和Edge浏览器才可能拥有的API, 其重要是用于计算大量数据的时候利用
末了就是setTimeout
看到这里,你会不会有疑惑?
上面的代码并没有说明nextTick是在监听DOM更新后才执行的? What????其时脑壳就duang了一下
那么接下来说的就是重中之重
DOM Tree的更新是及时的,DOM Tree的更新是及时的,DOM Tree的更新是及时的, 重要的事说3遍, 这意味着你无需去监听DOM 更新, 你对DOM的操纵是可以或许及时得到反馈的,上一行代码操纵了DOM,下一行就能获取到
那么有人就会产生疑惑了, nextTick毕竟是干嘛的?
nextTick的作用是将网络Watcher从队列中一个个取出,而且更改数据,来一次性渲染DOM, 我们知道操纵DOM的代价是昂贵的, 浏览器打开一个网页后会开启一个历程,历程是由线程构成的,
1. GUI渲染线程
2. js引擎线程(主线程)
3. EventLoop轮训处理线程
4. 其他线程,例如网络
跨线程操纵代价是昂贵的,所以做到一次性渲染Dom,可以有效的优化性能!!

总结


nextTick并不是用来监听DOM变动,由于DOM变动是可以或许及时获取到的,它的作用是一次性更改数据,而且渲染DOM
以上就是Vue nextTick的原理分析的具体内容,更多关于Vue nextTick的原理的资料请关注草根技术分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作