前言

  最近在准备春招,刷到了JS中的主要运行机制--Event Loop,觉得它的实现思路有必要整理一下,以防忘记。关于它在浏览器上的实现,我结合了自己的理解以及示例代码,想用最通俗的语言表达出来。如果在文中出现书写错误的地方,欢迎大家留言一起探讨。

正文

  关于Event Loop,宏任务,微任务的概念不再此赘述了。

概念

  进入主题,我理解的浏览器的事件循环Event Loop,以及执行一个JavaScript代码的流程如下:

  1. 一开始整段脚本作为第一个宏任务执行;
  2. 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列;
  3. 当前宏任务执行完出队,检查微任务队列,如果有则依次执行,直到微任务队列为空;如果在执行微任务的过程中,又产生了微任务,那么会加入到队列的末尾,也会在这个周期被调用执行;
  4. 执行浏览器 UI 线程的渲染工作;
  5. 执行队首新的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空。

代码

     console.log('start');

     setTimeout(() => {
console.log('timeout');
Promise.resolve().then(() => {
console.log('p1')
});
}); Promise.resolve().then(() => {
console.log('p2');
}); console.log('end'); new Promise((resolve, reject) => {
console.log('end2')
resolve('p3')
}).then((data) => {
console.log(data);
})
//输出结果为:

    start 
    end
    end2
    p2
    p3
    timeout
    p1

解析:

Step 1:执行全局Script代码

console.log('start');
//打印结果:start

  栈:[ console ]

  宏任务队列:[ ]

  微任务队列:[ ]

setTimeout(() => {
console.log('timeout');//将这个回调函数叫做callback1,由于setTimeout属于宏任务,所以放到宏任务队列
   Promise.resolve().then(() => {
console.log('p1')
});
}); //打印结果:start

  栈:[ setTimeout ]

  宏任务队列:[ callback1 ]

  微任务队列:[ ]

Promise.resolve().then(() => {
console.log('p2');  //将这个回调函数叫做callback2,由于Promise属于微任务,所以放到微任务队列
}); //打印结果:start

  栈:[ Promise ]

  宏任务队列:[ callback1 ]

  微任务队列:[ callback2 ]

console.log('end');

/*
打印结果:start
        end
*/

  栈:[ console ]

  宏任务队列:[ callback1 ]

  微任务队列:[ callback2 ]

 new Promise((resolve, reject) => {
console.log('end2')  //注意,这里是同步执行的!!!
resolve('p3')  //将这个回调函数叫做callback3,由于Promise属于微任务,所以放到微任务队列
}).then((data) => {
console.log(data);
}) /*
打印结果: start
         end
         end2
*/

  栈:[ Promise ]

  宏任务队列:[ callback1 ]

  微任务队列:[ callback2 callback3 ]

Step 2:全局Script代码执行完成,进入微任务队列,取出任务并执行,直至微任务队列为空。

  微任务队列:[ callback2 callback3 ]

  1.首先执行callback2任务:

Promise.resolve().then(() => {
console.log('p2');  //将这个回调函数叫做callback2
}); //打印结果:start
      end
      end2
      p2

  栈:[ callback2 ]

  宏任务队列:[ callback1 ]

  微任务队列:[ callback3 ] 

  2.其次执行callback3任务:

 new Promise((resolve, reject) => {
console.log('end2')  //注意,这里是同步执行的
resolve('p3')  //将这个回调函数叫做callback3
}).then((data) => {
console.log(data);
}) /*
打印结果:start
       end
       end2
       p2
       p3
*/

  栈:[ callback3 ]

  宏任务队列:[ callback1 ]

  微任务队列:[ ] 

Step3:微任务队列全部执行完,再去宏任务队列中取第一个任务执行。

setTimeout(() => {
console.log('timeout');  //将这个回调函数叫做callback1
   Promise.resolve().then(() => {
console.log('p1')    //将这个回调函数叫做callback4
});
});
//打印结果:start
       end
       end2
       p2
       p3
       timeout

【注】:当执行callback1的时候又遇到了另一个promise,promise异步执行完后在微任务队列中又注册了一个callback4回调函数。

  栈:[ callback1 ]

  宏任务队列:[ ]

  微任务队列:[ callback4 ] 

Step4:当前宏任务执行完出队,检查微任务队列

setTimeout(() => {
console.log('timeout');  
   Promise.resolve().then(() => {
console.log('p1')    //将这个回调函数叫做callback4
});
}); /*
打印结果:start
       end
       end2
       p2
       p3
       timeout
p1
*/

  栈:[ callback4 ]

  宏任务队列:[ ]

  微任务队列:[ ]

至此,执行完毕。

尾声

以上就是我分析的浏览器篇Event Loop的一个例子,如有错误,还请指正,谢谢!希望本次分享对你有用呀 ^_^

如何理解EventLoop--浏览器篇的更多相关文章

  1. 我是这样理解EventLoop的

    我是这样理解EventLoop的 一.前言   众所周知,在使用javascript时,经常需要考虑程序中存在异步的情况,如果对异步考虑不周,很容易在开发中出现技术错误和业务错误.作为一名合格的jav ...

  2. [Web] 深入理解现代浏览器

    转载: https://blog.csdn.net/qihoo_tech/article/details/91921777 奇技指南 身为前端,你真正深入理解了浏览器吗? 本文来自公众号奇舞周刊,作者 ...

  3. C#串口通讯教程 简化一切 只保留核心功能 这可能是最易于理解的一篇教程

    C#串口通讯教程 简化一切 只保留核心功能 这可能是最易于理解的一篇教程   串口的定义,请自行了解. C#操作串口通讯在.Net强大类库的支持下,只需要三个步骤: 1 创建 2 打开 3 发送/接受 ...

  4. 前端面试总结——http、html和浏览器篇

    1.http和https https的SSL加密是在传输层实现的. (1)http和https的基本概念 http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和 ...

  5. iOS开发:深入理解GCD 第一篇

    最近把其他书籍都放下了,主要是在研究GCD.如果是为了工作,以我以前所学的GCD.NSOperation等知识已经足够用了,但学习并不仅仅知识满足于用它,要知其然.并且知其所以然,这样才可以不断的提高 ...

  6. 15分钟理解HTTPS——通俗篇

    | 导语 它很深奥吗?你肯定常常见过它,使用它,甚至离不开它... 它很浅显吗?你可能觉得看透它,理解它,甚至懂它... 让我们用15分钟,不那么学术地将它的深挖到底~ 什么?如何证明我是我?本文要上 ...

  7. 理解 EventLoop

    链接 链接 node 浏览器 执行顺序有差异 macrotask microtask 一个线程会有 堆 栈 消息队列;  栈函数执行是用的, 堆用了存放定义的对象, 消息队列来处理异步的操作 a() ...

  8. 理解http浏览器的协商缓存和强制缓存

    阅读目录 一:浏览器缓存的作用是什么? 二:理解协商缓存 1 Last-Modified/if-Modify-Since 2 ETag/if-None-Match 三:理解强制缓存 回到顶部 一:浏览 ...

  9. Range对象理解,浏览器兼容性,获取鼠标光标位置

    一.关于浏览器的兼容性 目前主要有3种关于range的类似的对象,分别是W3C range 对象,Mozzlia selection ,ie TextRange 关于这三种的区别,请查看文档 http ...

  10. iOS开发:深入理解GCD 第二篇(dispatch_group、dispatch_barrier、基于线程安全的多读单写)

    Dispatch Group在追加到Dispatch Queue中的多个任务处理完毕之后想执行结束处理,这种需求会经常出现.如果只是使用一个Serial Dispatch Queue(串行队列)时,只 ...

随机推荐

  1. cordova+vue打包ios调用相机闪退解决

    cordova+vue项目打包android,打开相机正常使用,但是打包ios后,需要多几个配置,才能打开,否则当调用的时候会闪退,上配置图 需要在选中的文件里面添加 <key>NSCam ...

  2. apache搭建Tomcat集群(Cluster)

    搭建集群: apache:特点处理静态资源(html  图片  js等) apache的请求操作,Cluster工具 tomcat:特点处理动态资源 apache+tomcat(apache是web服 ...

  3. iPhone UIButton图标与文字间距设置【转】

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 50, 150, 50)]; [button setTitle:@& ...

  4. 【剑指Offer】简单部分每日五题 - Day 1

    今天开始更新leetcode上<剑指Offer>的题解,先从简单难度开始.预计按下列顺序更新: 简单难度:每日5题 中等难度:每日3题 困难难度:每日1题 17 - 打印从1到最大的n位数 ...

  5. Go语言转义字符

    \a 匹配响铃符 (相当于 \x07) 注意:正则表达式中不能使用 \b 匹配退格符,因为 \b 被用来匹配单词边界, 可以使用 \x08 表示退格符. \f 匹配换页符 (相当于 \x0C) \t ...

  6. Python3对比合并Excel表格

    ##安装模块pip install pandas as pdpip install xlsxwriterpip install openpyxl ##带入模块import pandas as pdim ...

  7. 【Win10】我们无法更新系统保留的分区

      前言 笔者是一个萌新,这个方案也是慢慢摸索出来的,有更好的方案欢迎大家提出 前段时间用公司电脑发现win10新版本还行,回家升级自己的电脑却提示“我们无法更新系统保留的分区”.(O_o)?? 笔者 ...

  8. Java第一节课考试

    1 package kaoshi; import java.util.Scanner; public class ScoreInformation { Scanner input=new Scanne ...

  9. 使用C#+EmguCV处理图像入门(图像读取_显示_保存)二

    上个随笔已经介绍EmguCV的一些常用库和程序安装以及环境变量的配置,这次写的是如何使用这个类库对图像进行操作. EmguCV图像处理系统组成(个人见解): 图像的基本操作: 贴个代码: using ...

  10. kerberos系列之hdfs&yarn认证配置

    一.安装hadoop 1.解压安装包重命名安装目录 [root@cluster2_host1 data]# tar -zxvf hadoop-2.7.1.tar.gz -C /usr/local/ [ ...