浏览器中的事件循环

最新推荐文章于 2023-08-16 01:53:47 发布
最新推荐文章于 2023-08-16 01:53:47 发布
阅读量92 收藏
点赞数
文章标签： 数据库 ui
原文链接：https://juejin.im/post/5c6a25b151882562a12ada20
版权

浏览器中的事件循环

总所周知 JS 运行在浏览器中，以单线程方式运行，每个window一个JS线程。那么浏览器是如何处理js中的I/O读取、用户点击、setTimeout等异步事件，并使其他js代码不被阻塞的呢？

浏览器中的事件循环就是其解决方式。简单来说浏览器中的事件循环的机制是将产生的异步事件产生的回调暂时存储在事件队列中，等到合适的时机再去执行队列中的异步事件的回调。

运行时概念

要了解浏览器中的事件循环，需要先弄明白两个重要的运行时概念。

栈

执行栈，函数调用时形成一个调用帧，并压入栈中，当函数返回时，则帧弹栈。

队列

任务队列，每一个任务都包含一个处理该任务的函数，当任务产生时，任务及其处理函数会被作为一个整体推入任务队列中（例如：一个setTimeout，到达时间时，setTimeOut及其回调函数会作为一个任务被推入任务队列中）。任务队列按照先进先出的顺序执行。当任务队列里的任务需要被处理的时候（即调用任务的处理函数时），将会被移出队列，调用其处理函数，此时形成一个调用帧，并压入执行栈。

此时执行栈中的调用帧，直到执行栈为空，然后再去处理队列中的另一个任务。

浏览器任务

浏览器中的任务分为两种：task(macroTask 宏任务)和microtask（微任务）。不同的任务按照不同的规则执行。

task

一个事件循环里有多个task queue，其中的包含多个任务，每个任务严格的按照先进先出的顺序执行。在一个task执行结束后下一个task执行之前，浏览器可对页面进行重新渲染。 task queue中包含：

  • script整体代码
  • 浏览器事件（鼠标事件、键盘事件等）
  • 定时事件（setTimeout、setInterval、setImmediate）
  • I/O事件（资源读取等）
  • UI渲染
microTask

一个事件循环中包含一个microTask queue。 microTask queue包含：

  • Promise
  • Object.observe、MutationObserver

事件循环

执行至完成

一个任务完整的执行后，其他任务才会被执行。 即：执行栈中的调用帧，直到执行栈为空，然后再去处理队列中的另一个任务。

添加任务至队列

在浏览器中，当事件发生并且该事件绑定了事件监听时，该事件发生后的任务才会被添加至队列。

例如：为一个DOM元素button绑定onclick一个处理事件，只有当button元素上的click事件发生时，该事件发生后的任务会被添加至队列。

再例如： setTimeout 接受两个参数：待加入队列的任务和一个延迟。延迟代表了任务被添加至任务队列的时间，只有经过了延迟的时间，该任务才会被加入队列。添加至队列以后是否被处理，取决于队列里是否有其他任务。因此延迟的时间表示最少延迟时间，而非确切的等待时间。

事件循环进程模型

事件循环进程模型 步骤如下：

  1. 选择第一个进入到 task queue中的任务[task]，如果task queue中没有任务，则直接进入第6步；
  2. 将当前事件循环的任务设置为第一步选出的[task]；
  3. 执行任务[task]；
  4. 将当前事件循环任务设置为null；
  5. 在task queue中删除执行完毕的[task]任务；
  6. microtask阶段：进入microtask检查点；
  7. 按照浏览器界面更新策略渲染界面；
  8. 返回第1步；
其中第6步，microtask阶段步骤如下：
  1. 设置microtask检查点标记为true；
  2. 重复检查microtask queue是否为空，若为空直接进入第3步；若不为空：
  • 选择microtask queue中的第一个[microtask]；
  • 将当前事件循环的任务设置为第3步选出的[microtask]；
  • 执行任务[microtask]；
  • 将当前事件循环任务设置为null；
  • 在microtask queue中删除执行完毕的[microtask]任务；
  • 回到第2步
  1. 清理index database 事务；
  2. 设置microtask检查点的标记为false；
事件循环进程模型总结

在事件循环中，首先从task queue中选择最先进入的task执行，每执行完一个task都会检查microtask queue是否为空，若不为空则执行完microtsk queue中的所有任务。然后再选择task queue中最先进入的task执行，以此循环。

总结上述步骤为流程图：

用代码解释

代码栗子1：
console.log('这是开始');

setTimeout(function cb() {
	console.log('这是来自第一个回调的消息');
}, 100);

console.log('这是一条消息');

setTimeout(function cb1() {
	console.log('这是来自第二个回调的消息');
}, 0);

Promise.resolve().then(function() {
	console.log('promise1');
}).then(function() {
	console.log('promise2');
});

console.log('这是结束');
复制代码
输出结果为：
    这是开始
    这是一条消息
    这是结束
    promise1
    promise2
    这是来自第二个回调的消息
    这是来自第一个回调的消息
复制代码
步骤解析：
  1. 初始状态队列的信息为：
    • task queue：run script；
    • microtask queue：【空】；
  2. 从task queue中拿出run script执行；执行完成后从task queue中删除run script任务；
    • 当前事件循环执行栈：run script；
    • task queue：setTimeout2 callback；
    • microtask queue：promise1 then；
输出：
    这是开始
    这是一条消息
    这是结束
复制代码

  1. 进入microtask检查点；从microtask queue中拿出promise1 then执行；将promise2 then推入microtask queue；执行完成后从microtask queue中删除promise1 then任务；

    • 当前事件循环执行栈：promise1 then；
    • task queue：setTimeout2 callback；
    • microtask queue：promise2 then；
输出：
    这是开始
    这是一条消息
    这是结束
    promise1
复制代码

  1. 查看microtask queue中是否还有任务；有则从microtask queue中拿出promise2 then执行；执行完成后从microtask queue中删除promise2 then任务；

    • 当前事件循环执行栈：promise2 then；
    • task queue：setTimeout2 callback；
    • microtask queue：【空】；
输出：
    这是开始
    这是一条消息
    这是结束
    promise1
    promise2
复制代码
  1. 到达100ms后，将setTimeout1 callback推入task queue；次步骤和3、4步无明确的前后关系，依据所设定的时间长短而定；setTimeout1 callback被推入task queue中以后不一定会立刻执行，因为task queue中可能存在其他任务尚未执行；因此setTimeout1 callback实际执行时间点>=100ms；
    • task queue：setTimeout2 callback、setTimeout1 callback；
    • microtask queue：【空】；
  2. microtask queue为空，继续取出task queue中的任务setTimeout2 callback执行，执行完成后从task queue中删除setTimeout2 callback任务；
    • 当前事件循环执行栈：setTimeout2 callback；
    • task queue：setTimeout1 callback；
    • microtask queue：【空】；
输出：
    这是开始
    这是一条消息
    这是结束
    promise1
    promise2
    这是来自第二个回调的消息
复制代码

  1. 检查microtask检查点，microtask queue为空，继续取出task queue中的任务setTimeout1 callback执行，执行完成后从task queue中删除setTimeout1 callback任务；

    • 当前事件循环任务：setTimeout1 callback；
    • task queue：【空】；
    • microtask queue：【空】；
输出：
    这是开始
    这是一条消息
    这是结束
    promise1
    promise2
    这是来自第二个回调的消息
    这是来自第一个回调的消息
复制代码
复杂的代码栗子2：
console.log('script start')
async function async1() {
    await async2();
    console.log('async1 end');
    setTimeout(function() {
    	console.log('async1 setTimeout')
    }, 0);
}
async function async2() {
    console.log('async2 end');
    setTimeout(function() {
    	console.log('async2 setTimeout')
    }, 0);
}
async1();

setTimeout(function() {
    Promise.resolve().then(function() {
    	console.log('setTimeout promise');
    })
	console.log('setTimeout');
}, 0);

new Promise(resolve => {
    console.log('Promise')
    resolve()
})
.then(function() {
	console.log('promise1')
})
.then(function() {
	console.log('promise2')
})

console.log('script end')
复制代码
输出结果为：
    script start
	async2 end
	Promise
	script end
	async1 end
	promise1
	promise2
	async2 setTimeout
	setTimeout
	setTimeout promise
	async1 setTimeout
复制代码
步骤解析：

async函数是promise的一个语法糖，简单理解为：await中的语句相当于在promise.resolve()中；await后面的语句相当于.then中的语句

  1. 初始状态的队列信息
    • task queue：run script；
    • microtask queue：【空】；
  2. 【task 阶段】执行run script；根据上述对await的解释，async1中的await async2()直接执行，async1中的await 后面的语句相当于promise then去处理
    • 当前事件循环执行栈：run script；
输出：
	script start
复制代码

-- 2.1 执行到调用async1()语句，在async1中执行await async2，async2中的语句直接执行，async2 setTimeout callback被推入task queue中；async1中的await async2后面的语句相当于promise then被推入microtask queue中； ​ - task queue：async2 setTimeout callback； ​ - microtask queue：async1中的await async2后面的语句；

输出：
	script start 
	async2 end
复制代码

-- 2.2. 执行到setTimeout将setTimeout callback 推入 task queue中； ​ - task queue：async2 setTimeout callback、setTimeout callback； ​ - microtask queue：async1中的await async2后面的语句； -- 2.3. 执行到promise，执行resolve，将promise then1推入microtask queue； ​ - task queue：async2 setTimeout callback、setTimeout callback； ​ - microtask queue：async1中的await async2后面的语句、promise then1；

输出：
	script start
	async2 end 
	Promise
复制代码

-- 2.4. 执行输出script end；

输出：
	script start
	async2 end
	Promise
	script end
复制代码

  1. 【microtask 阶段】执行async1中的await async2后面的语句，输出内容，并将async1 setTimeout callback推入task queue中

    • 当前事件循环执行栈：async1中的await async2后面的语句；
    • task queue：async2 setTimeout callback、setTimeout callback、async1 setTimeout callback；
    • microtask queue：promise then1；
输出：
	script start
	async2 end
	Promise
	script end
	async1 end
复制代码
  1. 【microtask 阶段】执行promise then1，输出内容，并将promise then2推入microtask queue中
    • 当前事件循环执行栈：promise then1；
    • task queue：async2 setTimeout callback、setTimeout callback、async1 setTimeout callback；
    • microtask queue：promise then2；
输出：
	script start
	async2 end
	Promise
	script end
	async1 end
	promise1
复制代码
  1. 【microtask 阶段】执行promise then2，输出内容，microtask queue为空
    • 当前事件循环执行栈：promise then2；
    • task queue：async2 setTimeout callback、setTimeout callback、async1 setTimeout callback；
    • microtask queue：【空】；
输出：
	script start
	async2 end
	Promise
	script end
	async1 end
	promise1
	promise2
复制代码
  1. 【task 阶段】microtask queue为空，进入task阶段，执行async2 setTimeout callback，输出内容
    • 当前事件循环执行栈：async2 setTimeout callback；
    • task queue：setTimeout callback、async1 setTimeout callback；
    • microtask queue：【空】；
输出：
	script start
	async2 end
	Promise
	script end
	async1 end
	promise1
	promise2
	async2 setTimeout 
复制代码
  1. 【task 阶段】microtask queue为空，执行setTimeout callback，将setTimeout promise推入microtask queue，输出内容
    • 当前事件循环执行栈：setTimeout callback；
    • task queue：async1 setTimeout callback；
    • microtask queue：setTimeout promise；
输出：
	script start
	async2 end
	Promise
	script end
	async1 end
	promise1
	promise2
	async2 setTimeout
	setTimeout 
复制代码
  1. 【microtask 阶段】检查microtask queue，执行setTimeout promise，输出内容
    • 当前事件循环执行栈：setTimeout promise；
    • task queue：async1 setTimeout callback；
    • microtask queue：【空】；
输出：
	script start
	async2 end
	Promise
	script end
	async1 end
	promise1
	promise2
	async2 setTimeout
	setTimeout
	setTimeout promise 
复制代码
  1. 【task 阶段】microtask queue为空，执行async1 setTimeout callback，输出内容
    • 当前事件循环执行栈：async1 setTimeout callback；
    • task queue：【空】；
    • microtask queue：【空】；
输出：
	script start
	async2 end
	Promise
	script end
	async1 end
	promise1
	promise2
	async2 setTimeout
	setTimeout
	setTimeout promise
	async1 setTimeout
复制代码
参考：

什么是浏览器的事件循环（Event Loop）？

HTML标准-事件循环

MDN-并发模型与事件循环

一次弄懂Event Loop

转载于:https://juejin.im/post/5c6a25b151882562a12ada20

weixin_33875839
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浏览器事件循环
叮当的猫猫的博客
06-23 1823
浏览器事件循环
探索浏览器中的事件循环 Event loop
love2016hy的博客
05-25 1082
前言：由于浏览器中的事件循环机制与nodeJS中的事件循环机制不同，本文只记录基于浏览器的事件循环，希望能帮助到大家。 什么是异步？ 我们知道 javascript 由于要和浏览器进行交互，所以从一开始它就被设计成了一门单线程非阻塞的脚本语言， 所谓单线程：即是任何时候，都只有一个主线程来处理所有的逻辑任务。 所谓非阻塞：即主线程不会直接处理异步任务，而是当它们返回结果之后再去处...
浏览器的事件循环
略略略
09-25 153
什么是事件循环 JavaScript 有一个特点就是异步单线程，异步就是同时干不同的事，单线程就是只有一个线程可以做事，而 js 实现这一点就是通过事件循环来实现，本文只讨论浏览器端的事件循环，暂不涉及 Node 的事件循环。 前置知识 在具体了解事件循环之前，我们先了解一些必要的内容，帮助我们更好的理解事件循环。 执行栈（call stack） 函数调用栈，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，
浏览器事件循环与vue nextTicket的实现
10-17
主要介绍了浏览器事件循环（结合vue nextTicket）的实现方法,需要的朋友可以参考下
详解JS浏览器事件循环机制
10-17
主要介绍了JS浏览器事件循环机制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
分析浏览器底层事件循环处理机制.pdf
最新发布
01-02
分析浏览器底层事件循环处理机制.pdf
浏览器 事件循环(Event Loop)
piaojiancong的博客
07-24 1490
JS 的异步执行逻辑依赖 Event Loop 机制，但是这套机制却是定义在 HTML 标准中的。因为 Event Loop 本身并不属于 ES 层面的功能，是宿主环境给脚本提供了这一机制，才让脚步有了异步执行的能力。
浏览器事件循环机制
codezha的博客
06-13 1392
日常开发我们通常都会用到回调函数，promise，setTimeout，我们有没有想过它们在浏览器中是怎样运行的，下面我们通过一个小例子来了解下 console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { console.log('promise1'); }).then(function() { consol
浏览器的事件循环机制
weixin_42440314的博客
10-01 5773
一、事件循环 要想在线程运行过程中，能接收并执行新的任务，就需要采用事件循环机制，如果需要接收其他进程发送来的任务需要引入消息队列 渲染进程的主线程和子线程之间是子线程将任务添加到消息队列。 其他进程发送来的任务是渲染进程的I/O线程接收其他进程的消息，然后添加到消息队列，由主线程的事件循环系统执行。 消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。 消息队列的内容为宏任务，每一个宏任务都会有一个自己的微任务队列，执行完一个宏任务之后不会马上去执行下一个宏任务，而且是查看微任务队列中是否有要执
[浏览器事件循环] javaScript事件循环 EventLoop
03-22 119
前言 Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。 先熟悉基本概念 【堆Heap】 堆是一种数据结构，是利用完全二叉树维护的一组数据，堆分为两种，一种为最大堆，一种为最小堆，将根节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。 堆是线性数据结构，相当于一维数组，有唯一后...
浏览器 - 事件循环机制详解
qq_40147756的博客
08-16 1551
浏览器进程模型，渲染主线程，事件循环
彻底搞清楚JS浏览器事件循环机制
前端精髓
04-28 1815
一、概述 在分析浏览器的渲染过程之前，我们先了解一下什么是进程和线程： （1）什么是进程？ 进程是CPU进行资源分配的基本单位 （2）什么是线程？ 线程是CPU调度的最小单位，是建立在进程的基础上运行的单位，共享进程的内存空间。 那么我们可以得出结论： 1、进程是会占用系统资源；2、一个进程内可以存在一个或者多个线程，这就是单线程和多线程；3、无论是单线程还是多线程都是在一个进程内。 二、多进程 ...
浏览器的事件循环（Event Loop）
weixin_39307273的博客
03-09 553
在了解事件循环前，先介绍几个概念 JS单线程 JS引擎线程，负责处理javascript脚本程序（V8引擎），解析javascript脚本，运行代码。每次只能执行一段代码，其他任务都得按照顺序排队等待被执行，只有当前的代码执行完成之后才会往下执行下一段代码。 JS线程包含在浏览器渲染进程中。浏览器是事件驱动的（Event driven），浏览器中很多行为是异步（Asynchronize...
什么是浏览器的事件循环（Event Loop）？
weixin_33708432的博客
08-11 193
本文围绕浏览器的事件循环，而node.js有自己的另一套事件循环机制，不在本文讨论范围。网上的许多相关技术文章提到了process.nextTick和setImmediate两个node.js的API，这里不予讨论。 先看HTML标准的一系列解释： 为了协调事件（event），用户交互（user interaction），脚本（scri...
浏览器和 Node 中的事件循环 Event Loop 对比
你的博客
08-17 1585
什么是 Event Loop ？ 众所周知，JavaScript 是非阻塞单线程语言，在浏览器执行过程中会遇到很多事件，而这些事件的执行就涉及到异步处理（包括数据请求 Ajax 、用户交互事件、脚本、渲染等）这么多的事件肯定得有个执行顺序，这就涉及到 Event Loop 。 而浏览器端和 node 的事件循环又有所不同。 浏览器 JavaScript 中分为执行栈和任务队列，而任务队列又...
聊聊浏览器的事件循环机制
weixin_48726650的博客
07-01 258
消息队列和事件循环 JavaScript语言的一大特点就是单线程，作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。于是，所有任务可以分成两种，一种是同步任务，另一种是异步任务。同步任务指的是，在主线程上排队执行的任务；异步任务指的是，不进入主线程、而进入"消息队列"的任务。 每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还
浏览器的事件循环机制是什么
05-16
浏览器的事件循环机制是一种事件驱动的编程模式，它是浏览器中实现异步编程的基础。事件循环机制通过不断地从任务队列中取出任务并执行来实现异步编程。具体来说，事件循环机制包含以下几个部分： 1. 任务队列：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值