输入 URL 到页面展示（结合浏览器多进程完整版面试口述版）
按顺序 + 进程分工梳理，直接背诵，逻辑清晰、考点全覆盖。
整体流程（分 7 大步，标注对应进程）
1. 地址栏输入 URL，回车（浏览器主进程）
- 主进程判断输入内容是搜索词 还是网址
- 进行 DNS 缓存查询，没有则发起域名解析
- 主进程通过 IPC 通信 ，把网络请求任务交给网络进程
2. 网络请求阶段（网络进程）
- DNS 解析：域名 → IP 地址
- 建立 TCP 连接（三次握手），HTTPS 额外进行 TLS 加密协商
- 发送 HTTP 请求（请求行、请求头、请求体）
- 接收服务端响应：状态码、响应头、响应体（HTML 文档）
- 关闭/复用 TCP 连接
- 将 HTML 响应数据，通过 IPC 传回渲染进程
补充 ：图片、JS、CSS 等后续静态资源，依然由网络进程统一请求。
3. 解析 HTML，构建 DOM 树（渲染进程-主线程）
- 逐行解析 HTML，生成 DOM 树
- 解析过程中遇到：
- 同步 JS ：阻塞 HTML 解析、阻塞渲染，主线程暂停，先执行 JS
<link>外链 CSS：发起请求（网络进程），阻塞渲染，不阻塞 HTML 解析<img>/<video>：异步发起请求，不阻塞 HTML 与首次渲染
4. 解析 CSS，构建 CSSOM 树（渲染进程-主线程）
解析所有 CSS，生成 CSSOM 样式规则树。
5. 生成渲染树 Render Tree（渲染进程-主线程）
DOM + CSSOM 合并，只包含需要显示的节点。
6. 布局 Layout + 绘制 Paint（渲染进程-主线程）
- 布局（回流）：计算每个节点精确位置、大小
- 绘制（重绘）：按样式把节点画成像素图层
7. 图层合成 Composite（渲染进程-合成线程 + GPU 进程）
- 合成线程将页面分层，分别生成图层
- 交由 GPU 进程 进行硬件加速合成、最终显示到屏幕
- 滚动、动画一般只走合成层，性能最高
精简背诵版（面试直接说，1 分钟讲完）
在浏览器主进程 中输入网址，主进程将请求转发给网络进程 ；网络进程完成 DNS 解析、TCP 连接、HTTP 请求并拿到 HTML 资源，再交给渲染进程。
渲染进程主线程依次解析 HTML、CSS，构建 DOM、CSSOM、渲染树，完成布局和绘制；最后由合成线程配合GPU 进程做图层合成，页面最终展示。
其中图片、视频等资源异步加载，不会阻塞首次渲染。
高频延伸考点（顺带记忆）
1. 谁阻塞首次渲染？
- 阻塞：同步 JS、CSS
- 不阻塞：图片、视频、异步 JS
2. 进程分工总结
| 进程 | 职责 |
|---|---|
| 主进程 | 窗口管理、任务调度 |
| 网络进程 | 全部网络请求、缓存、协议处理 |
| 渲染进程 | 解析、JS 执行、布局、绘制 |
| GPU 进程 | 图层合成、硬件加速 |
3. 重排、重绘、合成开销
重排 > 重绘 > 合成