浏览器渲染原理Browser Rendering Pipeline是前端非常核心的一块基本流程可以分成从输入 URL 到页面显示的一整套步骤。给你按工程角度讲清楚 一、整体流程核心主线浏览器渲染页面大致分为 5 个阶段1. 解析 HTML → 构建 DOM 2. 解析 CSS → 构建 CSSOM 3. 合并 DOM CSSOM → Render Tree 4. Layout布局 / 回流 5. Paint绘制 → Composite合成二、详细拆解每一步1️⃣ HTML 解析 → DOM 树浏览器拿到 HTML 后从上到下解析流式解析遇到标签 → 转成节点Node最终形成DOM 树 特点同步解析遇到script默认会阻塞解析除非 async / defer2️⃣ CSS 解析 → CSSOM 树解析 CSS 文件和style生成CSSOMCSS Object Model 注意CSS 是阻塞渲染的render blocking因为浏览器必须知道样式才能绘制3️⃣ 构建 Render Tree渲染树将DOM CSSOM → Render Tree 特点只包含可见节点display: none❌ 不会进入每个节点都有样式信息4️⃣ Layout布局 / 回流 Reflow计算每个元素的位置和大小width / heightmargin / paddingposition 结果确定每个元素在屏幕上的精确位置 会触发 Reflow 的操作修改 DOM改变元素尺寸改变字体大小获取布局信息如 offsetTop5️⃣ Paint绘制将布局后的节点转换成像素绘制颜色、边框、阴影、文字6️⃣ Composite合成页面被分成多个图层layersGPU 进行合成最终显示到屏幕 常见触发新图层transformopacitywill-changeposition: fixed三、重点机制面试必问✅ 1. 回流Reflow vs 重绘Repaint类型影响Reflow重新计算布局最贵Repaint只改样式不影响布局 举例div.style.width 200px // Reflow div.style.color red // Repaint✅ 2. 为什么 CSS 会阻塞渲染因为 浏览器必须确保DOM CSSOM → Render Tree 正确否则页面会出现闪烁FOUC样式错乱✅ 3. JS 为什么会阻塞默认script会暂停 HTML 解析因为 JS 可能修改 DOM 解决方案script defer/script // HTML解析完再执行 script async/script // 下载完立即执行不保证顺序✅ 4. GPU 加速性能优化关键transform: translateZ(0); 作用创建独立图层避免 Reflow提高动画性能四、性能优化总结实战 减少 Reflow批量修改 DOM使用documentFragment避免频繁读取 layout 属性 使用合成层优化动画优先用transform opacity避免width height top left CSS / JS 优化CSS 放头部JS 放底部或用 defer减少 CSS 层级五、一句话总结面试版 浏览器渲染流程HTML → DOM CSS → CSSOM DOM CSSOM → Render Tree Layout → Paint → Composite
浏览器渲染原理？
发布时间：2026/7/7 21:44:17
浏览器渲染原理Browser Rendering Pipeline是前端非常核心的一块基本流程可以分成从输入 URL 到页面显示的一整套步骤。给你按工程角度讲清楚 一、整体流程核心主线浏览器渲染页面大致分为 5 个阶段1. 解析 HTML → 构建 DOM 2. 解析 CSS → 构建 CSSOM 3. 合并 DOM CSSOM → Render Tree 4. Layout布局 / 回流 5. Paint绘制 → Composite合成二、详细拆解每一步1️⃣ HTML 解析 → DOM 树浏览器拿到 HTML 后从上到下解析流式解析遇到标签 → 转成节点Node最终形成DOM 树 特点同步解析遇到script默认会阻塞解析除非 async / defer2️⃣ CSS 解析 → CSSOM 树解析 CSS 文件和style生成CSSOMCSS Object Model 注意CSS 是阻塞渲染的render blocking因为浏览器必须知道样式才能绘制3️⃣ 构建 Render Tree渲染树将DOM CSSOM → Render Tree 特点只包含可见节点display: none❌ 不会进入每个节点都有样式信息4️⃣ Layout布局 / 回流 Reflow计算每个元素的位置和大小width / heightmargin / paddingposition 结果确定每个元素在屏幕上的精确位置 会触发 Reflow 的操作修改 DOM改变元素尺寸改变字体大小获取布局信息如 offsetTop5️⃣ Paint绘制将布局后的节点转换成像素绘制颜色、边框、阴影、文字6️⃣ Composite合成页面被分成多个图层layersGPU 进行合成最终显示到屏幕 常见触发新图层transformopacitywill-changeposition: fixed三、重点机制面试必问✅ 1. 回流Reflow vs 重绘Repaint类型影响Reflow重新计算布局最贵Repaint只改样式不影响布局 举例div.style.width 200px // Reflow div.style.color red // Repaint✅ 2. 为什么 CSS 会阻塞渲染因为 浏览器必须确保DOM CSSOM → Render Tree 正确否则页面会出现闪烁FOUC样式错乱✅ 3. JS 为什么会阻塞默认script会暂停 HTML 解析因为 JS 可能修改 DOM 解决方案script defer/script // HTML解析完再执行 script async/script // 下载完立即执行不保证顺序✅ 4. GPU 加速性能优化关键transform: translateZ(0); 作用创建独立图层避免 Reflow提高动画性能四、性能优化总结实战 减少 Reflow批量修改 DOM使用documentFragment避免频繁读取 layout 属性 使用合成层优化动画优先用transform opacity避免width height top left CSS / JS 优化CSS 放头部JS 放底部或用 defer减少 CSS 层级五、一句话总结面试版 浏览器渲染流程HTML → DOM CSS → CSSOM DOM CSSOM → Render Tree Layout → Paint → Composite
