共计 984 个字符,预计需要花费 3 分钟才能阅读完成。
首先咱们要晓得 js 语言的特点,即 js 是单线程的解释性语言,也就是说同一时间只能做一件事。
事件循环
为了协调事件绑定、用户交互、js 脚本、UI 渲染、网络申请等行为,避免主线程的不阻塞,事件循环(Event Loop)的计划应运而生,即事件循环机制。
工作队列
事件循环是通过工作队列的机制来进行协调的,一个 Event Loop 能够有一个或多个工作队列。
Event Loop 中每进行一次循环操作的工作解决的关键步骤如下:
- js 分为同步工作和异步工作
- 同步工作都在主线程上执行,造成一个执行栈
- 主线程之外,事件触发线程治理着一个工作队列,只有异步工作有了运行后果,就会在工作队列中搁置一个事件
- 一旦执行栈中的所有同步工作执行结束(此时 JS 引擎闲暇),零碎就会读取工作队列,将可运行的异步工作增加到可执行栈中,开始执行
此步骤须要理解以下内容:
宏工作
- 能够了解为每次执行栈执行的代码就是一个宏工作(包含每次从事件队列中获取一个事件回调并放到执行栈中执行的代码)
- 宏工作队列能够有多个
- 宏工作执行实现后要查看微工作队列,如果有微工作则优先执行所有微工作,执行完微工作当前再执行下一个宏工作,因而造成了事件循环机制
宏工作包含:
script(整体代码)
setTimeout
setInterval
ajax 申请
DOM 事件绑定(UI 交互事件)
I/O
setImmediate(Node.js 环境)
微工作
- 能够了解为是在执行栈中当前任务执行完结后立刻执行的工作。也就是说,在以后 task 工作后,下一个 task 之前,在渲染之前
- 微工作队列只有一个
- 微工作要先于 setTimeout、setInterval、DOM 事件绑定 (UI 交互事件) 等的回调执行。只有微工作队列的所有微工作执行完之后才会执行宏工作的回调
微工作包含:
Promise.then()
Object.observe
process.nextTick (Node.js 环境)
运行机制
在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的工作解决模型是比较复杂的,但关键步骤如下:
- 执行一个宏工作(栈中没有就从事件队列中获取)
- 执行过程中如果遇到微工作,就将它增加到微工作的工作队列中
- 宏工作执行结束后,立刻执行以后微工作队列中的所有微工作(顺次执行)
- 以后宏工作执行结束,开始查看渲染,而后 GUI 线程接管渲染
- 渲染结束后,js 线程持续接管,开始下一个宏工作(从事件队列中获取)
正文完
发表至: javascript
2021-08-09