浏览器渲染流程

https://mp.weixin.qq.com/s/q70TMZ5jJcOCJpHOWndo8A

• 浏览器刷新频率60HZ
• JS的浏览器环境有一个主线程，它既负责页面渲染（页面布局、绘制。合并图层），也负责运行JS脚本执行DOM； 两个行为是互斥的；

浏览器虽然使用单线程执行 JavaScript 代码，但通过以下机制实现了并发效果：

---

1. 浏览器是多进程/多线程架构

浏览器本身并非单线程，其底层由多个线程协同工作：

• 主线程：负责执行 JavaScript、处理 DOM、样式计算等核心任务。
• 网络线程：处理 HTTP 请求（如 fetch、XMLHttpRequest）。
• 定时器线程：管理 setTimeout、setInterval 等定时任务。
• 渲染线程：负责页面布局和绘制（与 JS 主线程互斥）。
• Web Workers 线程：运行独立于主线程的 JavaScript 脚本。

---

2. 事件循环（Event Loop）机制

单线程的 JavaScript 通过 事件循环 实现异步非阻塞操作：

1. 调用栈（Call Stack）：同步任务按顺序执行。
2. 任务队列（Task Queue）：
   • 宏任务队列：包含 setTimeout、DOM 事件、requestAnimationFrame 等。
   • 微任务队列：包含 Promise.then、MutationObserver 等。
3. 运行流程：
   • 主线程执行完同步代码后，检查微任务队列并清空。
   • 从宏任务队列中取出一个任务执行。
   • 循环往复，实现“伪并发”。

---

3. 异步非阻塞 I/O

• 示例：发起一个 fetch 请求时：
  1. 主线程将请求交给网络线程处理，自身继续执行后续代码。
  2. 网络线程收到响应后，将回调函数放入任务队列。
  3. 主线程在事件循环中处理回调，实现异步响应。

---

4. Web Workers

通过 new Worker() 创建独立线程：

• 特点：可运行复杂计算而不阻塞主线程。
• 限制：不能直接操作 DOM，需通过 postMessage 与主线程通信。

---

5. 并发 vs 并行

• 并发（Concurrency）：单线程通过时间片轮转交替执行任务（如事件循环）。
• 并行（Parallelism）：多线程同时执行任务（如 Web Workers）。

---

示例代码：异步任务执行流程

console.log("Start"); // 同步任务

setTimeout(() => console.log("Timeout"), 0); // 宏任务

Promise.resolve().then(() => console.log("Promise")); // 微任务

console.log("End"); // 同步任务

// 输出顺序：
// Start → End → Promise → Timeout

---

总结

• 单线程限制：JavaScript 主线程无法同时执行多段代码。
• 并发实现：通过浏览器多线程 + 事件循环 + 异步回调，模拟出并发效果。
• 适用场景：适合 I/O 密集型任务（如网络请求），但对 CPU 密集型任务需谨慎（可借助 Web Workers）。

为什么要引入Fiber架构？

在引入fibe架构之后，会采用异步策略， 将其分为Reconciliation和Commit阶段，其中Reconciliation阶段会将update分成一小块一小块，并且加上优先级来决定先更新什么（什么时候diff，什么时候渲染， 什么时候响应用户输入）。 并且它是可中断的，可以被更高优先级的东西中断； 就相当于给它加了一个操作系统，有时间片轮转这样的机制，也支持中断；