来自 技术 2019-03-07 的文章

vue---由nextTick原理引出的js执行机制 - 站住,别跑

最开始查看nextTick这个方法的时候,眼瞎看成了nextClick。。。我还在疑问难道是下一次click之后处理事件。。。

然后用这个方法的时候,就只知道是用在DOM更新之后调用回调方法。

这时就产生了一堆疑问:

1)DOM更新后?难道修改数据之后,DOM没有及时更新,还有延迟?但是页面上看到的就是实时更新呀,难道还有什么猫腻?

2)它是怎么监听到DOM被更新了

3)它和异步的setTimeout、setInterval有没有关系?

深入了解后才发现里面有大学问。。。

在理解nextTick之前,先来一段代码

setTimeout(function(){ console.log(11)},300)

这段代码很简单,一般人都会说,300ms之后控制台打印出11。

但是,一定是精确的300ms之后马上打印出11吗。答案是不一定。为什么?这就涉及到下面的知识点

1. js为什么是单线程

深究原因我不是很清楚,但是我是这样理解的:假如js是多线程,意思是如果我对同一个DOM进行操作,那么都会同时处理。那这时一个线程我对一个按钮修改颜色为red,同时另外一个线程对这个按钮修改颜色为blue。那浏览器到底是执行哪一个呢,这样就矛盾了。所以这就能很好理解为什么要设计成单线程了。

2. Event loop

既然是单线程,那么事件任务就一定会在主线程上排队执行。同一时间就只能按队列执行一个方法。要是某个方法要花费很长时间,那后面的方法就只能等待了,这是极其不能忍受的。所以js设计者把任务分成了同步任务和异步任务。同步任务即主线程(执行栈)上运行的任务,而异步任务则是挂载到一个任务队列里面。等待主线程的所有任务执行完成后(栈空),通知任务队列可以把可执行的任务放到主线程里面执行。异步任务放到主线程中执行完后,栈又空了,又通知任务队列把异步任务放到主线程中执行。这个过程一直持续,直到异步任务执行完成,这个持续重复的过程就叫Event loop。而一次循环就是一次tick。

注意:

1) 这里异步任务例如setTimeout这种,实际上是先由浏览器其它模块(应该是IO设备)处理之后,它的回调函数才再加入到任务队列里面。注意是回调函数。

2) onclick,onmouseover等都属于异步任务。回调都会挂载到任务队列。

3. microtast(微任务)和macrotask(宏任务)

任务队列里面异步任务也分macrotast(标准说法是task)和microtast(标准说法中它是不属于task的)。

典型的microtast包含:Promises(浏览器原生Promise)、MutationObserver、Object.observe(已废弃)、以及nodejs中的process.nextTick,UI rendering(UI渲染)

典型的macrotast包含:script整体代码(这个很重要)、setTimeout(最短4ms) 、 setInterval(最短10ms)、MessageChannel、以及只有 IE 支持的 setImmediate。

执行优先级上,先执行宏任务macrotask,再执行微任务mincrotask

process.nextTick > Promise.then>MutationObserver>setImmediate>setTimeout。

注意:

1) 对于microtast和macrotask,这两个在一次event loop中,microtask在这一次循环中是一直取一直取,直到清空microtask队列,而macrotask则是一次循环取一次。

2) 相当于事件循环的过程是:主线程(栈空)--->取一个macrotask执行---->查看有没有microtask,如果有就执行该任务直到清空microtask队列,然后执行下一个macrotask任务--->又取macrotask执行--->清空microtask里面的任务 。重复第二和第三的步骤直到macrotask任务队列也执行完毕

3) 如果执行事件循环的过程中又加入了异步任务,如果是macrotask,则放到macrotask末尾,等待下一轮循环再执行。如果是macrotask,则放到本次event loop中的microtask任务末尾继续执行。直到microtask队列清空。

4) 为什么宏任务先执行,反而处理时间还比微任务慢呢?因为script整体也是macrotask,就先把script里面的代码放到主线程执行,如果再遇到macrotask,就把它放到macrotask任务队列末尾,由于一次event loop只能取一个macrotask,所以遇到的宏任务就需要等待其它轮次的事件循环了;如果遇到microtask,则放到本次循环的microtask队列中去。这样就能明白为什么microtask会比macrotask先处理了。

到这里,上面那个300ms的定时器为什么不一定是精确的300ms之后打印就能理解了:

因为300ms的setTimeout并不是说300ms之后立马执行,而是300ms之后被放入任务列表里面。等待事件循环,等待它执行的时候才能执行代码。如果异步任务列表里面只有它这个macrotask任务,那么就是精确的300ms。但是如果 还有microtast等其它的任务,就不止300ms了。

所以,下面的代码也能很好理解了

for(var i = 0; i < 3; i++) { console.log("for:"+i); var time=setTimeout(function() { console.log("setTime:"+i); }, 300);  console.log(time)}

这个运行的结果是:

1) 当执行for循环的时候,定义了3个定时器,由于setTimeout是异步任务,所以这三个定时器,每个都会在300ms之后加入任务队列。

2) 此时执行代码,输出for:xx,并打印对应定时器的标识。

3) 300ms之后,每个setTimeout的回调函数加入到任务队列,这时候for循环早就执行完毕了。

4) 执行完循环之后,此时相当于主线程栈空了,通知任务队列,把异步任务放到主线程执行,这时候就开始执行setTimeout的回调函数。由于这时setTimeout匿名回调函数保持对外部变量 i 的引用,而此时的 i 由于主线程执行完之后变成了3,所以最终再打印出3个setTime:3。

再来分析一下下面的代码:

console.log(1);setTimeout(function(){ console.log(2)},0);new Promise(function(resolve){ console.log(3) for( var i=100 ; i>0 ; i-- ){ i==1 && resolve() } console.log(4)}).then(function(){ console.log(5)}).then(function(){   console.log(6)});console.log(7);

1) 由于script也属于macrotask,所以整个script里面的内容都放到了主线程(任务栈)中,按顺序执行代码。然后遇到console.log(1),直接打印1。

2) 遇到setTimeout,表示在0秒后才加入任务队列,根据第3大点的 第3点注意事项,这个setTimeout会被放到下一个事件循环的macrotask里面,这次不会执行。

3) 执行遇到new Promise,new Promise在实例化的过程中所执行的代码都是同步进行的,只有回调.then()才是microtask。所以先直接打印3,执行完循环,然后再打印4。然后遇到第一个 .then(),属于microtask,加入到本次循环的microtask队列里面。接着向下执行又遇到一个 .then() ,又加入到本次循环的microtask队列里面。然后继续向下执行。

4) 遇到console.log(7),直接打印7。直到此时,一个事件循环的macrotask执行完成,然后去查看此次循环是否还有microtask,发现还有刚才的 .then() ,立即放到主线程执行,打印出5。然后发现还有第二个 .then(),立即放到主线程执行,打印出6 。此时microtask任务列表清空完了。到此第一次循环完成。

5) 第二次事件循环,从macrotask任务列表里面找到了第一次放进的setTimeout,放到主线程执行,打印出2。

6) 所以最终的结果就是 1 3 4 7 5 6 2


上面说了这么多,就是为了下面做铺垫

vue的nextTick使用方法:

接收两个参数:

第一个是回调函数,即DOM更新之后需要做的操作。

第二个是回调函数中,this指针的指向。

vue.nextTick(cb,obj)

vm.$nextTick(cb)。 注意实例中使用nextTick的时候,cb回调函数的this指向已经绑定为当前实例了。

这里附上vue 2.6 版本 nextTick源码的链接nextTick,2.5版本与2.6有些不一样。

export function nextTick (cb?: Function, ctx?: Object) { let _resolve callbacks.push(() => { //第一步 if (cb) { try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } } else if (_resolve) { _resolve(ctx) } }) if (!pending) { //第二步 pending = true timerFunc() } // $flow-disable-line if (!cb && typeof Promise !== 'undefined') { //第三步 return new Promise(resolve => { _resolve = resolve }) }}

每次调用 Vue.nextTick(cb) :

1)cb 函数经处理压入 callbacks 数组,并且指定了cb的this指向。

2)pending表示是否正在执行回调即是否已经有异步任务在主线程执行,由于pending这个标识最初为false,所以把它设置为true,然后调用 timerFunc()。这个是用来触发异步回调函数的。

3)如果没有传入回调函数,并且支持promise的时候,则返回一个promise的调用

4)timerFunc()最初就看Promise(延迟调用) 、MutationObserver(监听变化)、setImmediate、setTimeout这四个中谁的兼容当前浏览器,谁就优先用来做异步API来处理回调函数。

对于为什么是下一个tick,我有问题:

1)在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。这是官方对于nextTick的说法。

2)在设置了vm.xxx='xxx'的时候,如果立即去DOM的内容,获取到的并不是最新的值,说明DOM的更新一定是异步的,因为同步的话就能获取到修改后的内容了。但是nextTick的回调函数,在调用后要么属于microtask,要么就是macrotask,

3)如果是macrotask则好理解一点,因为执行代码遇到这个macrotask则会被添加到macrotask的末尾,等待event loop 取到它的时候才执行,而执行一次macrotask之后,如果microtask列表为空了,就会执行UI rendering,页面就渲染成最新的内容。这时候是能获取到更新后的内容的。

4)那如果是microtask,就是在当前event loop中需要执行完毕,是属于当前的tick,而这个时候是怎么获取到DOM更新的内容的???

对于上面的这个问题,好像要涉及到 watcher 中的 update 和 queueWatcher 。暂时就先放到一边。反正作用是搞懂了,原理还差一点。

如果有明白这个问题的,麻烦给我讲解一下。先谢谢了。

标签:   tables      wordpress视频网   
上一篇:Django的rest_framework的认证组件之全局设置的源码解
下一篇:没有了