JavaScript-事件循环

事件循环是什么呢?

事件循环是JS的执行机制(也叫Event Loop)

为什么要知道JS的事件循环?

Vue就是基于JS开发出来的,所以其实Vue底层的许多代码原理都是基于JS的原理来写的,了解了事件循环,可以帮助我们对Vue中各个事件的执行顺序更加清晰明了,比如本文就是解释nextTick和JS事件循环的关系的。

事件循环

首先说一下浏览器,浏览器这个进程里面,有许多线程,其中一个就是JS引擎线程,还有一个GUI渲染线程。这两个线程是互斥的,其中一个进程运行,另一个就挂起,这样想也是对的,浏览器就是要把JS代码解析完后才去渲染页面,否则如果在渲染页面同时去修改页面的DOM元素,那么可能就会导致页面出错。

那JS引擎线程里就是基于事件循环来执行的。

它的执行顺序是这样的:

1、所有同步代码都在主线程上执行,每执行一行同步任务,就把其推入执行栈中。

2、遇到异步任务时,JS就把异步任务交给浏览器的webAPI去处理(其实就是类似Ajax、setTimeout这些),处理完后把异步任务的运行结果推入一个“异步任务队列”。但是异步任务队列里有宏任务队列和微任务队列,下面会说一些代表性的宏任务和微任务。

3、当执行栈中所有同步任务执行完毕后,系统就开始去执行异步任务队列里的异步事件。记住,微任务优先级高于宏任务,所以先执行微任务,再执行宏任务。又要注意,在执行宏任务时,每执行完一个宏任务浏览器就又要去检查一遍微任务队列是否有新的微任务,有就执行,没有就继续执行宏任务。

4、主线程不断重复执行上面三步。

画一个简单的图大概就是这样:

那么宏任务和微任务有哪些呢?

宏任务:setTimeout、SetInterval、MessageChannel等;

微任务:Promise.then、async/await等。

nextTick

nextTick内部其实就是根据这种机制来运行的。我们都知道nextTick是让浏览器在页面渲染后在执行其中的回调。那这是为什么呢?

还记得我上一篇文章讲的Vue官网里说“Vue在更新Dom时是异步执行的”,说明vue去渲染页面也是通过一个异步任务,那么它也会被推入一个异步任务队列里面,而nextTick内部就是把自己写那个回调也做成一个异步任务(微任务或宏任务),然后把他放在vue更新dom这个异步任务后面,通常是放在一个事件循环的最后执行,所以nextTick就具有了在更新dom后操作页面的能力。

具体关于nextTick的文章,推荐大家去阅读这篇文章,里面还讲解了nextTick的源码:1000字带你掌握nextTick背后的原理 (baidu.com)

----------------------------------------------------------

以上就是这篇文章的内容,其实随着学习的过程中,我发现要根据学到的知识来形成自己的知识体系,这样才有效率,而且记得也更牢固,才能把各个知识联系起来,所以大家可以把JS底层一些原理好好学一下,vue的原理学起来也就很快了。

猜你喜欢

转载自blog.csdn.net/huiaixing/article/details/125017833