浏览器如何工作、页面如何呈现

浏览器的工作机制和页面呈现过程可分为网络请求、解析渲染、布局绘制三个核心阶段，涉及多线程协作与复杂的渲染流水线。以下是具体流程：

一、网络请求阶段

URL解析与DNS查询
用户输入URL后，浏览器首先检查本地DNS缓存（如浏览器缓存、操作系统缓存），若未命中则向DNS服务器发起查询，获取域名对应的IP地址。
若使用HTTPS协议，还需进行TLS握手，协商加密算法并交换密钥。
建立TCP连接
浏览器通过三次握手与服务器建立TCP连接（HTTP/1.1默认持久连接，HTTP/2/3支持多路复用）。
现代浏览器会优先复用现有连接（如HTTP Keep-Alive）或预建立连接（DNS预解析、TCP预连接）。
发送HTTP请求
浏览器构造HTTP请求报文（包含方法、路径、协议版本、请求头、请求体等），通过TCP连接发送至服务器。
请求头可能包含User-Agent、Cookie、Accept-Encoding等信息，用于服务器识别客户端和协商内容格式。
接收服务器响应
服务器返回HTTP响应报文（状态码、响应头、响应体），浏览器根据状态码（如200、404、500）处理不同情况。
若响应体较大，浏览器可能通过分块传输编码（Chunked Transfer Encoding）逐步接收数据。

图：浏览器网络请求与响应流程二、解析渲染阶段

HTML解析与DOM构建
浏览器通过HTML解析器将HTML文本转换为DOM树（Document Object Model），解析过程中会处理标签嵌套、属性赋值等，遇到外部资源（如CSS、JS、图片）会发起额外请求。
解析器采用词法分析+语法分析，将文本拆分为Token（如开始标签、结束标签、文本节点），再构建节点树。
CSS解析与CSSOM构建
浏览器解析CSS文件或内联样式，生成CSSOM树（CSS Object Model），记录元素的样式规则（如颜色、字体、布局属性）。
CSS解析是阻塞渲染的，浏览器会等待CSSOM构建完成后再进行后续步骤（除非使用media属性按需加载）。
JavaScript执行与DOM/CSSOM修改
遇到<script>标签时，浏览器会暂停HTML解析（除非标记async或defer），执行JS代码。
JS可通过DOM API修改节点（如document.getElementById()），或通过CSSOM API修改样式（如element.style.color），触发重新渲染。
渲染树（Render Tree）构建
浏览器合并DOM树和CSSOM树，生成渲染树（仅包含需要显示的节点及其样式，如<head>、display: none的节点不包含在内）。
渲染树构建完成后，浏览器可计算每个节点的几何信息（布局阶段）。

三、布局绘制阶段

布局（Layout/Reflow）
浏览器根据渲染树计算每个节点的位置和尺寸，这一过程称为布局或重排（Reflow）。
布局是全局操作，修改一个节点的尺寸可能触发整个文档的重新布局（如修改根元素宽度）。
分层（Layerization）
浏览器将渲染树划分为多个图层（Layer），例如：
拥有position: fixed或transform属性的元素会单独成层；
视频、Canvas等复杂元素也会独立分层。
分层目的是优化绘制性能，通过合成（Composite）减少重绘范围。
绘制（Paint）
浏览器将每个图层转换为位图（Bitmap），这一过程称为绘制或重绘（Repaint）。
绘制仅涉及像素填充，不改变元素位置（如修改颜色会触发重绘，修改宽度会触发重排+重绘）。
合成（Composite）
浏览器将所有图层的位图按照层级顺序合并，生成最终页面图像，显示在屏幕上。
合成阶段利用GPU加速（如硬件加速的CSS属性），提升动画和滚动性能。

四、关键优化点

减少重排与重绘
避免频繁修改样式（如批量操作DOM或使用class替代内联样式）；
使用transform和opacity触发合成层，避免布局和绘制。
资源加载优化
通过preload、prefetch预加载关键资源；
使用async或defer异步加载非关键JS。
渲染性能监控
利用Chrome DevTools的Performance面板分析渲染瓶颈（如长任务、强制同步布局）；
使用Rendering面板开启“Paint Flashing”或“Layer Borders”调试图层问题。

总结

浏览器的工作流程是“请求-解析-渲染-合成”的闭环：

热门标签