JavaScript 事件循环:从起源到浏览器再到 Node
- 浏览器渲染。
▐ 案例分析
根据上述的处理模型,我们可以来看以下例子:
console.log(‘script start’);
setTimeout(function() {
console.log(‘setTimeout’);
}, 0);
Promise.resolve().then(function() {
console.log(‘promise1’);
}).then(function() {
console.log(‘promise2’);
});
console.log(‘script end’);
输出结果:
script start
script end
promise1
promise2
setTimeout
对应的处理过程则是:
执行 console.log (输出 script start)
遇到 setTimeout 加入外部队列
遇到两个 Promise 的 then 加入内部队列
遇到 console.log 直接执行(输出 script end)
内部队列中的任务挨个执行完 (输出 promise1 和 promise2)
外部队列中的任务执行 (输出 setTimeout)
只要理解了外部队列与内部队列的概念,再看这类问题就会变得很简单,我们再简单扩展看看:
setTimeout(() => {
console.log(‘setTimeout1’)
})
Promise.resolve().then(() => {
console.log(‘promise1’)
})
setTimeout(() => {
console.log(‘setTimeout2’)
})
Promise.resolve().then(() => {
console.log(‘promise2’)
})
Promise.resolve().then(() => {
console.log(‘promise3’)
})
console.log(‘script end’);
结果输出:
script end
promise1
promise2
promise3
setTimeout1
setTimeout2
可以发现加入内部队列的顺序和时间虽然后差异,但是轮到内部队列执行的时候,一定会先全部执行完内部队列才会继续往下走去执行外部队列的任务。
最后我们再看一个引入了 HTML 渲染的例子:
通过这个例子,我们就可以发现,渲染过程很明显分成三个阶段:
JavaScript 执行完毕 innerText 首先加上 [end 10001]
内部队列:Promise 的 then 全部任务执行完毕,往 innerText 上追加了很长一段字符串
HTML 渲染:1 和 2 追加到 innerText 上的内容同时渲染
外部队列:挨个执行 setTimeout 中追加到 innerText 的内容
HTML 渲染:将 4 中的内容渲染。
回到第 4 步走外部队列的流程(内部队列已清空)
▐ script 事件是外部队列
有的同学看完上面的几个例子之后可能有个问题,为什么 JavaScript 代码执行到 script end 之后,是先执行内部队列然后再执行外部队列的任务?
这里不得不把上文总出现过的 HTML 事件循环标准 再拉出来一遍:
To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this p…
看到这里,大家可能就反应过来了,scripts 执行也是一个事件,我们只要归类一下就会发现 JavaScript 的执行也是一个浏览器发起的外部事件。所以本质的执行顺序还是:
一次外部事件
所有内部事件
HTML 渲染
回到到 1
浏览器与 Node.js 的事件循环差异
根据本文开头我们讨论的事件循环起源,很容易理解为什么浏览器与 Node.js 的事件循环会存在差异。如果说浏览端是将 JavaScript 集成到 HTML 的事件循环之中,那么 Node.js 则是将 JavaScript 集成到 libuv 的 I/O 循环之中。
简而言之,二者都是把 JavaScript 集成到他们各自的环境中,但是 HTML (浏览器端) 与 libuv (服务端) 面对的场景有很大的差异。首先能直观感受到的区别是:
事件循环的过程没有 HTML 渲染。只剩下了外部队列和内部队列这两个部分。
外部队列的事件源不同。Node.js 端没有了鼠标等外设但是新增了文件等 IO。
内部队列的事件仅剩下 Promise 的 then 和 catch。
至于内在的差异,有一个很重要的地方是 Node.js (libuv)在最初设计的时候是允许执行多次外部的事件再切换到内部队列的,而浏览器端一次事件循环只允许执行一次外部事件。这个经典的内在差异,可以通过以下例子来观察:
setTimeout(()=>{
console.log(‘timer1’);
Promise.resolve().then(function() {
console.log(‘promise1’);
});
});
setTimeout(()=>{
console.log(‘timer2’);
Promise.resolve().then(function() {
console.log(‘promise2’);
});
});
这个例子在浏览器端执行的结果是 timer1 -> promise1 -> timer2 -> promise2,而在 Node.js 早期版本(11 之前)执行的 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 结果却是 timer1 -> timer2 -> promise1 -> promise2。
究其原因,主要是因为浏览器端有外部队列一次事件循环只能执行一个的限制,而在 Node.js 中则放开了这个限制,允许外部队列中所有任务都执行完再切换到内部队列。所以他们的情况对应为:
▐ 浏览器端
外部队列:代码执行,两个 timeout 加入外部队列
内部队列:空
外部队列:第一个 timeout 执行,promise 加入内部队列
内部队列:执行第一个 promise
外部队列:第二个 timeout 执行,promise 加入内部队列
内部队列:执行第二个 promise
▐ Node.js 服务端
外部队列:代码执行,两个 timeout 加入外部队列
内部队列:空
外部队列:两个 timeout 都执行完
内部队列:两个 promise 都执行完
虽然 Node.js 的这个问题在 11 之后的版本里修复了,但是为了继续探究这个影响,我们引入一个新的外部事件 setImmediate。这个方法目前是 Node.js 独有的,浏览器端没有。
setImmediate 的引入是为了解决 setTimeout 的精度问题,由于 setTimeout 指定的延迟时间是毫秒(ms)但实际一次时间循环的时间可能是纳秒级的,所以在一次事件循环的多个外部队列中,找到某一个队列直接执行其中的 callback 可以得到比 setTimeout 更早执行的效果。我们继续以开始的场景构造一个例子,并在 Node.js 10.x 的版本上执行(存在一次事件循环执行多次外部事件):
setTimeout(()=>{
console.log(‘setTimeout1’);
Promise.resolve().then(() => console.log(‘promise1’));
});
setTimeout(()=>{
console.log(‘setTimeout2’);
Promise.resolve().then(() => console.log(‘promise2’));
});
setImmediate(() => {
console.log(‘setImmediate1’);
Promise.resolve().then(() => console.log(‘promise3’));
});
setImmediate(() => {
console.log(‘setImmediate2’);
Promise.resolve().then(() => console.log(‘promise4’));
});
输出结果:
setImmediate1setImmediate2promise3promise4setTimeout1setTimeout2promise1
promise2
根据这个执行结果 [3],我们可以推测出 Node.js 中的事件循环与浏览器类似,也是外部队列与内部队列的循环,而 setImmediate 在另外一个外部队列中。
接下来,我们再来看一下当 Node.js 在与浏览器端对齐了事件循环的事件之后,这个例子的执行结果为:
setImmediate1
promise3
setImmediate2
promise4
setTimeout1
promise1
setTimeout2
promise2
其中主要有两点需要关注,一是外部列队在每次事件循环只执行了一个,另一个是 Node.js 的固定了多个外部队列的优先级。setImmediate 的外部队列没有执行完的时候,是不会执行 timeout 的外部队列的。了解了这个点之后,Node.js 的事件循环就变得很简单了,我们可以看下 Node.js 官方文档中对于事件循环顺序的展示:
其中 check 阶段是用于执行 setImmediate 事件的。结合本文上面的推论我们可以知道,Node.js 官方这个所谓事件循环过程,其实只是完整的事件循环中 Node.js 的多个外部队列相互之间的优先级顺序。
我们可以在加入一个 poll 阶段的例子来看这个循环:
JavaScript 事件循环:从起源到浏览器再到 Node相关推荐
- onpaste事件不生效_从实际开发中来看JavaScript事件循环的使用场景
前言: 本文是介绍结合DOM事件流和JavaScript事件循环解决一个工作中的实际问题的过程,很多东西不只是面试的时候才会用得到 文中涉及到的代码demo地址:drag-and-eventloop ...
- 我理解的javascript事件循环(一)
javascript事件循环分为2种:一种是浏览器端事件循环,一种是node端事件循环. 此文只是捋一捋我对浏览器端事件循环的理解. 前言 我们都知道 JavaScript 是一门单线程语言,这意味着 ...
- JAVA script 循环 图片_深入分析JavaScript 事件循环(Event Loop)
事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个 ...
- [译] 深入理解 JavaScript 事件循环(二)— task and microtask
引言 microtask 这一名词是 JS 中比较新的概念,几乎所有人都是在学习 ES6 的 Promise 时才接触这一新概念,我也不例外.当我刚开始学习 Promise 的时候,对其中回调函数的执 ...
- dom更新到底在javascript事件循环的哪个阶段?「前端每日一题v22.11.17」
dom更新到底在javascript事件循环的哪个阶段?「前端每日一题v22.11.17」 昨天写了一篇文章,是javascript的事件循环机制,然后在某乎上也发了,在发的时候看到了一个问题,dom ...
- JavaScript事件循环机制
众所周知JS是一门单线程执行环境的语言,对于同步任务而言,同一时刻只能执行一个任务,后续的任务都要在当前执行的任务后面排队.这种模式在遇到一些执行时间较长的任务的时候就会出问题,会导致页面失去响应.所 ...
- 笔试题——JavaScript事件循环机制(event loop、macrotask、microtask)
今天做了一道笔试题觉得很有意义分享给大家,题目如下: setTimeout(()=>{console.log('A'); },0); var obj={func:function () {set ...
- JavaScript事件循环
大厂面试题分享 面试题库 后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 一.异步执行原理 1. 单线程的JavaScript 我们知道,JavaScript是一种单线程语言,它主要 ...
- JavaScript事件循环详解
做为一个前端开发,要想深入学习JavaScript进阶知识,就不得不了解JavaScript的事件循环.JavaScript的事件循环抽象,不易理解,谁都可以说出单线程,宏任务,微任务,但大部分人只是 ...
最新文章
- 蚂蚁金服安全应急响应中心上线 用户可提交漏洞
- Bootstrap的引用文件
- Linq之Lambda表达式初步认识
- Eclipse 全部快捷一览表(具TM全)
- android action bar 风格,自定义ActionBar风格和样式
- Laravel 5.1 源码阅读
- yum方式安装android_在CentOS 7和Ubuntu14.04上安装Android Studio
- 通过SecureCRT和PuTTY连接臻云CentOS版云主机
- android浏览器背景音乐,浏览器的背景音乐实现方式总结
- Y460安装桌面导航
- Adobe Photoshop CS5 12.0 Extend 绿色免安装版
- 时空大数据在电力能源系统中的应用
- 老罗直播带货首秀成了么?
- SQP21-19-10-1CC-18高压定量叶片泵
- STM32L4时钟系统(转载)
- 小澳的葫芦(最短路)
- 夹角余弦 python_python 根据余弦定理计算两边的夹角
- reverse函数 ——反转容器内容
- 一套完整的微信公众号代运营方案
- Linux中执行bash脚本报错/bin/bash^M: bad interpreter: No such file or directory
热门文章
- 联邦学习 深度学习对抗攻击
- 环信即时通讯SDK集成——实战:快速实现iOS应用中集成即时通讯IM和UI
- 软件测试自学毛笔字纹身,巫师后期摄影Photoshop教程全集
- C++寻找100以内可被17整除的最大自然数
- 认知升级篇:如何设定学习目标?
- 桌面上倒计时提醒的好用软件有哪些 热门好看桌面倒计时软件推荐
- 直接在 iPad 上开发 App,Swift Playgrounds 4.0 发布。
- 新的启程 | 我们的昨天、今天和明天
- poj2492 A Bug‘s Life
- windows系统下vc调用v8脚本引擎执行javascript初探