vue---由nextTick原理引出的js执行机制

时间: 2019-03-06阅读: 77标签: 机制

最开始查看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 。暂时就先放到一边。反正作用是搞懂了,原理还差一点。


JS垃圾回收机制

找出不再继续使用的变量,然后释放掉其占用的内存。当变量进入环境(可以理解为一个函数开始执行了)时,就将这个变量标记为“进入环境”,从逻辑上讲,不能释放掉进入环境的变量,而当变量离开环境的的时候,则将其标记为离开环境。

JS 引擎 V8 新机制:JIT-less 模式

V8 v7.4 现在支持无需在 runtime 阶段分配可执行内存就能执行 JavaScript 代码。在其默认配置中,V8 很大程度上依赖于在 runtime 阶段分配和修改可执行内存的能力。例如,作为一个包含优化过程的编译器

浅出Vue 错误处理机制errorCaptured、errorHandler

JavaScript本身是一个弱类型语言,项目中容易发生错误,做好网页错误监控,能帮助开发者迅速定位问题,保证线上稳定。vue项目需接入公司内部监控平台,本人之前vue errorHooks不甚了解, 决定探一探

Javascript中的执行机制_Event Loop

众所周知,Javascript是单线程语言, 这就意味着,所有的任务都必须按照顺序执行,只有等前面的一个任务执行完毕了,下一个任务才能执行。如果前面一个任务耗时很长,后一个任务就得一直等着,因此,为了实现主线程的不阻塞,就有了Event Loop。

web认证机制

以前对认证这方面的认识一直不太深刻,不清楚为什么需要token这种认证,为什么不简单使用session存储用户登录信息等。最近读了几篇大牛的博客才对认证机制方面有了进一步了解。

浏览器JS事件触发机制

事件会从最外层开始发生,直到最具体的元素,也就是说假如父元素与子元素都绑定有点击事件,又互相重叠,那么先出发的会是父元素的事件,然后再传递到子元素。事件会从最内从的元素开始发生,再向外传播,正好与事件捕获相反。

js对代码解析机制

脚本执行js引擎都做了什么呢?1.语法分析 2.预编译 3.解释执行。在执行代码前,还有两个步骤;语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误 ,查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined

JavaScript预解释是一种毫无节操的机制

js代码执行之前,浏览器首先会默认的把所有带var和function的进行提前的声明或者定义:1.理解声明和定义、2.对于带var和function关键字的在预解释的时候操作不一样的、3.预解释只发生在当前的作用域下

web前端-JavaScript的运行机制

本文介绍JavaScript运行机制,JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。

基于JWT的Token认证机制实现及安全问题

JSON Web Token(JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。其JWT的组成:一个JWT实际上就是一个字符串,它由三部分组成,头部、载荷与签名。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全