浏览器的 EventLoop
浏览器的内核： Render 进程
- GUI渲染线程
- JavaScript 引擎线程 （Chrome v8）
- 事件触发线程
- 定时器线程
- 异步 HTTP 请求线程
JavaScrit是一个单线程（JS引擎是单线程的）的拥有异步特性（拥有独特的异步线程）的事件驱动（事件也是一个单独的线程处理）的解释型脚本语言。
1. 异步线程
- 网络请求
1
fetch(url).then(res => res.json()).then(console.log);
- 定时器
1
setTimeout(fn, 0)
- 事件触发在执行
1
2
3
4
5
6
7
8
9const btn = document.getElementById('btn');
btn.addEventListener('click', () => console.log('clicked btn'));
const timeoutId = setTimeout(() => {
for (let i = 0; i < 10000; i++) {
console.log('hello');
}
clearTimeout(timeoutId);
}, 5000);console.log('hello')的时候，点击按钮，不会立刻执行绑定的事件，JS引擎处于阻塞状态。
2. 任务队列 Task Queue
- JS引擎从上到下将程序入栈出栈的过程中，遇到那些有异步能力的 WebApi，会选择把他们放入他们自己的线程中，短暂的忽略他们。继续执行那些同步代码。
- 在各自的线程里完成处理之后，会将这些异步结果以回调的形式放入 Task Queue 中。
- 等待JS引擎空闲，再次回到JS引擎中。
3. Event Loop （浏览器）
- 任务队列和JS主引擎之间的桥梁。
- 它被设计出来的目的也就是为了保证JS引擎线程的安全和稳定的。
- 其实是在把异步转化为同步。
- An event loop has one or more task queues. A task queue is a set of tasks.
4.1 宏任务队列 Macrotask Queue
- setTimeout
- setInterval
4.2 微任务队列 Microtask Queue
- Promise
- process.nextTick
- MutationObserver
MicroTask 会在一次 EventLoop 中全部执行完。
- 同步（主线程执行栈清空）-> 微任务（全部） -> 宏任务（第一个） -> 微（全部）-> 宏（一个）-> …
5. 其他关于浏览器加载资源阻塞
script
css 加载不会阻塞 DOM 树的解析
css 加载会阻塞 DOM 树的渲染
css 加载会阻塞后面 js 语句的执行
ps: 前端输入 url 到页面渲染的流程:
1. DNS 解析 URL 的过程
浏览器输入域名后, 操作系统首先会检查本地 hosts 文件是否有当前网址的映射关系, 如果有直接调用这个 IP 地址映射完成域名解析
如果没有则查找本地 DNS 解析器缓存中是否有当前网址的映射关系, 如果有直接返回完成域名解析
如果没有则到本地 TCP/IP 设置的 DNS 服务器进行查询, 如果查找的网址在 DNS 资源的范围内则返回解析给主机, 此解析具有权威性
如果不在本地 DNS 资源范围内, 但该服务器存储了网址的映射关系, 则调用这个 IP 的映射关系, 完成域名解析
如果本地 DNS 服务器解析失败并且缓存中没有对应的映射关系则去 DNS 服务器中查找
2. 浏览器与服务器交互的过程
根据 IP 建立 TCP 连接（三次握手）
首先客户端向服务端发送一个同步信号 SYN， 等待服务端接收
服务端收到同步信号后会返回一个确认信号以及一个同步信号 SYN/ACK 给客户端
客户端收到后返回一个确认信号 ACK，此时通道建立
HTTP 发起请求
服务器处理请求， 浏览器接收 HTTP 响应
渲染页面
关闭 TCP 连接（四次挥手）
客户端发送一个结束信号 FIN 给服务端
服务端收到后发送一个确认信号 ACK 给客户端
当服务端数据传输完之后发送一个 FIN 结束信号给客户端
客户端收到后发送一个确认信号 ACK 给服务端， 此时通道关闭
3. 浏览器页面渲染的过程
解析 HTML 文件为 DOM 树
解析 CSS 文件为 CSS 规则树
合并 DOM 树以及 CSS 规则树为 renderTree 渲染树
进入 Layout 环节， 对元素节点进行大小尺寸以及位置的计算
painting 环节，将渲染树各个节点绘制到屏幕上