⚡ 30 秒速记
- 核心判断：页面从 HTML/CSS 解析到布局、绘制和合成是一条流水线，变更命中哪一层决定更新成本
- 原理主线：围绕 「线程和进程」、「浏览器是多进程的」、「重点是浏览器内核（渲染进程）」 建立输入、状态变化与输出之间的因果关系
- 文章范围：介绍了浏览器的多进程架构、各类进程的作用及渲染机制，帮助前端开发者理解页面渲染、线程与进程的关系，以及多进程带来的性能与稳定性优势。
- 边界与代价：浏览器会批量延迟样式计算，但同步读取布局可能强制刷新；合成层也不是越多越好
- 工程落地：优化应使用性能面板确认主线程、布局、绘制与合成瓶颈，再减少对应阶段的工作量
浏览器通过多进程隔离页面和插件，并在渲染进程内由多个线程协作完成解析、脚本执行、事件处理与页面呈现。 JavaScript 主线程和界面渲染不能同时操作页面，所以长时间计算会阻塞渲染，定时器和网络回调也只能排队等待。页面通常经历 DOM、样式计算、布局、绘制和合成，改动命中的阶段越靠前，影响范围往往越大。计算密集型任务可以交给 Web Worker，但它不能直接操作 DOM，需要通过 postMessage 与主线程通信。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 线程和进程
进程和线程的概念可以这样理解：
进程是一个工厂，工厂有它的独立资源--工厂之间相互独立--线程是工厂中的工人，多个工人协作完成任务--工厂内有一个或多个工人--工人之间共享空间
工厂有多个工人，就相当于一个进程可以有多个线程，而且线程共享进程的空间。
进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位，系统会给它分配内存）
线程是cpu调试的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程。核心还是属于一个进程。）
# 浏览器是多进程的
浏览器是多进程的，每打开一个tab页，就相当于创建了一个独立的浏览器进程。
# 浏览器包含的进程：
Browser进程：浏览器的主进程（负责协调，主控），只有一个，作用有：- 负责浏览器的界面显示，与用户交互，如前进，后退等
- 负责各个页面的管理，创建和销毁其它进程
- 将
Rendered进程得到的内存中的Bitmap,绘制到用户界面上 - 网络资源的管理，下载
- 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建。
GPU进程：最多一个，用于3D绘制等。- 浏览器渲染进程（浏览器内核）（
Render进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为：- 页面渲染，脚本执行，事件处理等
