详解JS浏览器事件循环机制


Posted in Javascript onMarch 27, 2019

先来明白些概念性内容。

进程、线程

进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的。

线程是进程的执行流,是CPU调度和分派的基本单位,同个进程之中的多个线程之间是共享该进程的资源的。

浏览器内核

浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种。

浏览器内核有多种线程在工作。

GUI 渲染线程:

  1. 负责渲染页面,解析 HTML,CSS 构成 DOM 树等,当页面重绘或者由于某种操作引起回流都会调起该线程。
  2. 和 JS 引擎线程是互斥的,当 JS 引擎线程在工作的时候,GUI 渲染线程会被挂起,GUI 更新被放入在 JS 任务队列中,等待 JS 引擎线程空闲的时候继续执行。

JS 引擎线程:

  1. 单线程工作,负责解析运行 JavaScript 脚本。
  2. 和 GUI 渲染线程互斥,JS 运行耗时过长就会导致页面阻塞。

事件触发线程:

当事件符合触发条件被触发时,该线程会把对应的事件回调函数添加到任务队列的队尾,等待 JS 引擎处理。

定时器触发线程:

  1. 浏览器定时计数器并不是由 JS 引擎计数的,阻塞会导致计时不准确。
  2. 开启定时器触发线程来计时并触发计时,计时完成后会被添加到任务队列中,等待 JS 引擎处理。

http 请求线程:

  1. http 请求的时候会开启一条请求线程。
  2. 请求完成有结果了之后,将请求的回调函数添加到任务队列中,等待 JS 引擎处理。

 详解JS浏览器事件循环机制

JavaScript 引擎是单线程

JavaScript 引擎是单线程,也就是说每次只能执行一项任务,其他任务都得按照顺序排队等待被执行,只有当前的任务执行完成之后才会往下执行下一个任务。

HTML5 中提出了 Web-Worker API,主要是为了解决页面阻塞问题,但是并没有改变 JavaScript 是单线程的本质。了解 Web-Worker。

JavaScript 事件循环机制

JavaScript 事件循环机制分为浏览器和 Node 事件循环机制,两者的实现技术不一样,浏览器 Event Loop 是 HTML 中定义的规范,Node Event Loop 是由 libuv 库实现。这里主要讲的是浏览器部分。

Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。

JS 调用栈

JS 调用栈是一种后进先出的数据结构。当函数被调用时,会被添加到栈中的顶部,执行完成之后就从栈顶部移出该函数,直到栈内被清空。

同步任务、异步任务

JavaScript 单线程中的任务分为同步任务和异步任务。同步任务会在调用栈中按照顺序排队等待主线程执行,异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候,也就是栈内被清空的时候,被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。

Event Loop

调用栈中的同步任务都执行完毕,栈内被清空了,就代表主线程空闲了,这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空,都会去读取任务队列有没有任务,有就读取执行,一直循环读取-执行的操作,就形成了事件循环。

详解JS浏览器事件循环机制

详解JS浏览器事件循环机制

定时器

定时器会开启一条定时器触发线程来触发计时,定时器会在等待了指定的时间后将事件放入到任务队列中等待读取到主线程执行。

定时器指定的延时毫秒数其实并不准确,因为定时器只是在到了指定的时间时将事件放入到任务队列中,必须要等到同步的任务和现有的任务队列中的事件全部执行完成之后,才会去读取定时器的事件到主线程执行,中间可能会存在耗时比较久的任务,那么就不可能保证在指定的时间执行。

宏任务(macro-task)、微任务(micro-task)

除了广义的同步任务和异步任务,JavaScript 单线程中的任务可以细分为宏任务和微任务。

macro-task包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task包括:process.nextTick, Promises, Object.observe, MutationObserver。

console.log(1);
setTimeout(function() {
  console.log(2);
})
var promise = new Promise(function(resolve, reject) {
  console.log(3);
  resolve();
})
promise.then(function() {
  console.log(4);
})
console.log(5);

示例中,setTimeout 和 Promise被称为任务源,来自不同的任务源注册的回调函数会被放入到不同的任务队列中。

有了宏任务和微任务的概念后,那 JS 的执行顺序是怎样的?是宏任务先还是微任务先?

第一次事件循环中,JavaScript 引擎会把整个 script 代码当成一个宏任务执行,执行完成之后,再检测本次循环中是否寻在微任务,存在的话就依次从微任务的任务队列中读取执行完所有的微任务,再读取宏任务的任务队列中的任务执行,再执行所有的微任务,如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。

  1. 上面的示例中,第一次事件循环,整段代码作为宏任务进入主线程执行。
  2. 遇到了 setTimeout ,就会等到过了指定的时间后将回调函数放入到宏任务的任务队列中。
  3. 遇到 Promise,将 then 函数放入到微任务的任务队列中。
  4. 整个事件循环完成之后,会去检测微任务的任务队列中是否存在任务,存在就执行。
  5. 第一次的循环结果打印为: 1,3,5,4。
  6. 接着再到宏任务的任务队列中按顺序取出一个宏任务到栈中让主线程执行,那么在这次循环中的宏任务就是 setTimeout 注册的回调函数,执行完这个回调函数,发现在这次循环中并不存在微任务,就准备进行下一次事件循环。
  7. 检测到宏任务队列中已经没有了要执行的任务,那么就结束事件循环。
  8. 最终的结果就是 1,3,5,4,2。

以上所述是小编给大家介绍的JS浏览器事件循环机制详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
jquery 笔记 事件
Nov 02 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
js实现简单数字变动效果
Nov 06 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
详解如何更好的使用module vuex
Mar 27 #Javascript
原生js实现获取form表单数据代码实例
Mar 27 #Javascript
JQueryDOM之样式操作
Mar 27 #jQuery
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 #Javascript
Node.js 多线程完全指南总结
Mar 27 #Javascript
浅谈JS和jQuery的区别
Mar 27 #jQuery
Nginx设置为Node.js的前端服务器方法总结
Mar 27 #Javascript
You might like
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
Prototype使用指南之base.js
2007/01/10 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python使用MD5加密字符串示例
2014/08/22 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Django中的forms组件实例详解
2018/11/08 Python
python线程join方法原理解析
2020/02/11 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
毕业生自我推荐
2013/11/04 职场文书
入党积极分子介绍信
2014/01/17 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
信用卡催款律师函
2015/05/27 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers
tree shaking对打包体积优化及作用
2022/07/07 Java/Android