forked from webVueBlog/Leetcode
-
Notifications
You must be signed in to change notification settings - Fork 0
/
事件循环.js
31 lines (31 loc) · 1.96 KB
/
事件循环.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
* 进程:
* CPU 正在进行的一个任务的运行过程的调度单位
* 浏览器是一个多进程的应用程序(分主进程和辅助进程)
* 进程是计算机调度的基本单位
* 进程包含线程,线程在进程中运行(一个进程可以开多个线程,可以理解为线程的进程的小单位,没有进程就不可能有线程)
*
* 渲染过程
* GUI渲染进程(解析HTML,CSS,构建DOM/Render树,初始布局与绘制,重绘与回流,渲染页面)
* JS 引擎线程(一个主线程和多个辅助线程配合,一个浏览器只有一个JS引擎,解析JS脚本,运行JS代码)
* GUI渲染与JS引擎线程运行互斥(GUI渲染的时候如果JS 还在操作DOM 的话就矛盾了,JS引擎空闲的时候,GUI 渲染更新)
*
* 渲染进程-事件
* 事件触发线程:事件循环 Event Loop线程
* 事件线程:用户交互事件,setTimeout, Ajax
*
* 渲染进程 - 宏任务 与 微任务
* 创建线程的目的是为了实现异步的执行条件
* 宏任务:宿主提供的异步方法(比如:鼠标移入移出事件),用户触发的事件和任务 Ajax,script,setTimeout UI 渲染
* 微任务:语言标准(ECMA262)提供的API 运行Promise MutationObserver
* 微任务 优先级 高于宏任务
*
* 同步代码->微任务代码->渲染->宏任务代码
*
* JS引擎线程执行栈 同步代码 宏任务异步代码 执行完毕->微任务队列(清空)-> GUI渲染->宏任务队列(取出一个放入执行栈)
*
* 1. js代码执行顺序:同步代码会先于异步代码;异步任务的微任务会比异步任务宏任务先执行
* 2. js代码默认先执行主栈中的代码,主栈中的任务执行完成后,开始执行清空微任务操作
* 3. 清空微任务执行完毕,取出第一个宏任务到主栈中执行
* 4. 第一个宏任务执行完后,若是有微任务会再次去执行清空微任务操作,以后再去取宏任务
*/