浏览器架构与渲染流程
现代浏览器是一套复杂度不亚于操作系统的软件工程系统。你在地址栏敲下一个网址、按下回车，短短几百毫秒内，浏览器要完成网络请求、安全校验、HTML/CSS/JS 解析、样式计算、布局、绘制、合成，最终把像素点亮在屏幕上。理解这套流程，不只是"面试背题"，而是每一次做性能优化、排查安全问题、设计前端架构时的底层地图。
这篇文章会把浏览器拆开揉碎讲：先讲多进程/多线程模型是怎么回事，再顺着关键渲染路径一步步往下讲 DOM、CSSOM、渲染树、布局、绘制、合成，然后展开安全模型、存储方案、网络协议和事件循环，每个话题都配代码示例、真实案例和数据表格，帮助你建立一张完整的心智地图。
🌐 从输入网址到页面显示：一次导航的全貌
在深入细节之前，先给一次完整导航画一条时间线，建立整体框架：
1.输入与解析：用户输入 URL，浏览器进程判断是搜索词还是合法地址
2.DNS 解析与建连：域名解析成 IP，进行 TCP 三次握手，如果是 HTTPS 还要做 TLS 握手
3.发送请求 / 接收响应：浏览器进程通过网络线程发出 HTTP 请求，服务器返回响应头和响应体
4.准备渲染进程：浏览器进程根据响应的 Content-Type 决定是否需要渲染进程（下载文件则不需要），通常会复用或新建一个渲染进程
5.提交导航：渲染进程准备就绪后，浏览器进程把数据"提交"给渲染进程，更新地址栏、历史记录
6.渲染页面：渲染进程解析 HTML/CSS，构建 DOM/CSSOM，生成渲染树，完成布局、绘制、合成
7.子资源加载：解析过程中遇到的 CSS、JS、图片、字体等继续并行加载
8.交互就绪：DOMContentLoaded、load 等事件依次触发，页面进入可交互状态
下面我们把每一环拆开讲清楚。
🏗️ 浏览器进程模型
概念定义
•进程（Process）：操作系统分配资源的基本单位，拥有独立的内存地址空间、文件句柄、系统资源，进程之间互相隔离，一个进程崩溃不会直接影响另一个进程
•线程（Thread）：进程内部的执行单元，多个线程共享所属进程的内存和资源，线程切换开销远小于进程切换，但需要处理同步、互斥、竞态等问题
•可以把进程想象成一栋栋独立的房子（各自有独立的水电系统），线程则是房子里的房间（共享同一套水电，互相之间沟通成本低但也容易"打架"）
为什么重要
早期浏览器（如 2008 年之前的 Chrome 之前的浏览器、以及早期 Firefox）大多是单进程架构：所有标签页、插件、渲染逻辑都跑在同一个进程里。这带来三个致命问题：
•稳定性差：任意一个标签页的渲染逻辑崩溃（比如遇到复杂 JS 死循环、内存溢出），会导致整个浏览器窗口甚至所有标签页一起崩溃
•安全性弱：所有页面共享同一个进程的内存空间，一旦某个页面被注入恶意代码，理论上可以读取到其他标签页的数据
•性能瓶颈：单进程意味着无法充分利用多核 CPU，各个标签页的 JS 执行、渲染任务互相抢占同一条主线程
Chrome 在 2008 年发布时首创多进程架构，此后逐渐成为现代浏览器（Chrome、Edge、新版 Firefox、Safari）的标准做法。
底层原理：主要进程分工
•浏览器进程（Browser Process）：唯一的主控进程，负责地址栏、书签栏、前进后退按钮等 UI，管理其他各类子进程的生命周期，统一处理网络请求、文件访问、剪贴板等需要更高权限的操作
•渲染进程（Renderer Process）：负责把 HTML/CSS/JS 转换成可视化页面，运行在沙箱环境中，权限受限，通常一个标签页对应一个渲染进程（但同源的多个标签页可能复用同一个进程以节省内存）
•GPU 进程：负责处理各类图形渲染任务，把合成后的图层交给显卡绘制到屏幕，支持硬件加速，Chrome 从最初就把 GPU 相关逻辑独立出来，减少崩溃对页面渲染的影响
•网络进程：现代 Chrome 把网络栈也从浏览器进程中拆出来单独跑一个网络进程，处理 DNS 解析、TCP 连接、TLS 握手、HTTP 请求响应
•插件进程：负责运行传统浏览器插件（如已经逐渐退场的 Flash、部分 PDF 渲染逻辑），与渲染进程隔离，防止插件崩溃拖垮页面
•扩展进程：运行浏览器插件/扩展程序的逻辑代码，与普通网页渲染进程分开，避免恶意扩展直接操作页面数据
真实案例：Chrome 站点隔离（Site Isolation）
2018 年，Google 公开了 Spectre 和 Meltdown 两个 CPU 级别的旁路攻击漏洞，攻击者可以利用 CPU 的推测执行机制，跨越进程边界读取本不该访问的内存数据。这意味着，即使浏览器做了多进程隔离，如果同一个渲染进程里同时加载了多个不同来源的站点（比如通过 iframe 嵌入了另一个域名的页面），攻击者理论上仍能通过 JS 计时攻击，从同进程内的其他站点内存中窃取数据（例如 Cookie、Session Token、跨域 iframe 中的敏感表单内容）。
Chrome 应对措施是升级为站点隔离（Site Isolation）：默认让每一个"站点"（严格来说是 eTLD+1，即注册域，如 example.com）都运行在独立的渲染进程中，即使是同一个页面里通过 `