【基础篇】浏览器中的Event loop

在讲Event loop之前,我们先思考一个问题

js为什么是单线程?

原因可能是如果js是多线程,在多个线程中处理DOM就可能会发生问题(一个线程添加新节点,另一个线程中删除节点),当然可以引入读写锁解决这个问题

好了,接下来我们开始讲Event loop

简单的说,就是js在执行的过程中会产生执行环境,这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码,会被挂起并加入到Task(有多种Task)队列中。一旦执行栈为空,Event Loop就会从Task队列中拿出需要执行的代码并放入执行栈中执行,所以本质上来说,js中的异步行为还是同步的。

我们看下以下代码,以下代码输出’1′, ‘3’, ‘2’

console.log('1');
setTimeout(()=>{
  console.log('2');
}, 0);
console.log('3');
//'1'
//'3'
//'2'

之前对setTimeout理解有偏差,虽然设置了为0,其实还是异步,是因为html5标准规定这个函数的第二个参数不得小于4ms,不足会自动增加。

Task队列分为两种

  • 微任务microtask,es6中称为jobs。以下这些行为属于微任务

    • process.nextTick
    • promise
    • Object.observe
    • MutationObserver
  • 宏任务macrotask,es6中称为task。以下这些行为属于宏任务

    • script
    • setTimeout
    • setInterval
    • setImmediate
    • I/O
    • UI rendering

误区:很多人认为微任务快于宏任务,其实是错误的。因为宏任务汇中包括了script,浏览器会先执行一个宏任务,接下来有异步代码的话就先执行微任务。

正确的一次Event loop顺序应该是这样的:

  1. 执行同步代码(这属于宏任务)
  2. 执行栈为空,查询是否有微任务需要执行
  3. 执行所有微任务
  4. 必要的话渲染UI
  5. 开始下一轮Event loop,执行宏任务中的异步代码

通过上述的Event loop顺序可知,如果宏任务中的异步代码有大量的计算并且需要操作DOM的话,为了更快的界面响应,我们可以把操作DOM放入微任务中。

    原文作者:leeing
    原文地址: https://segmentfault.com/a/1190000015871872
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞