# **前端必知：HTML / CSS / JS 页面渲染全流程（深入解析版）** 在前端开发中，我们每天写 HTML、CSS 和 JS，但你是否真正理解浏览器是如何把这些代码“变成页面”的？理解页面渲染机制，不仅能帮助你写出高性能网页，还能优化 SEO 和提升用户体验。本文将从原理到实践，逐步解析浏览器渲染流程，并提供优化建议和示例。 * * * ## 一、浏览器渲染流程概览浏览器将网页内容渲染成可视页面的大致流程如下： 1. **输入阶段** - 浏览器接收 HTML、CSS、JS 文件 - 解析文件编码，加载资源（图片、字体、视频等） 1. **处理阶段（以 Chrome 为例）** - **构建 DOM 树（Document Object Model）** ：解析 HTML 标签生成节点树 - **构建 CSSOM 树（CSS Object Model）** ：解析 CSS 样式规则生成树 - **合并生成渲染树（Render Tree）** ：只包含可见元素及其样式 - **布局（Layout / Reflow）** ：计算每个渲染树节点的大小和位置 - **绘制（Painting）** ：将节点绘制到屏幕 - **合成（Compositing）** ：将多个图层合成最终页面 1. **输出阶段** - 页面显示在屏幕上，浏览器一般每秒绘制 60 次（60fps） - 页面刷新涉及 Layout、Repaint 和 Compositing 操作 > **性能优化提示**：Layout 和 Repaint 开销大，尽量减少频繁操作 DOM 和修改样式，可显著提升页面性能。 * * * ## 二、HTML → DOM 树构建 - **HTML 输入**：浏览器从上到下解析 HTML 文件 - **解析过程**： - 标签 → 元素节点 - 文本 → 文本节点 - 递归生成树状结构 → **DOM 树** - **结果**： - `document.getElementById('#root')` 可访问 DOM 根节点 - DOM 树存在内存中，浏览器基于它渲染页面 ### 小技巧 - **语义化 HTML** - 结构语义化：`header`、`footer`、`main`、`aside`、`section` - 功能语义化：`h1-h5`、`code`、`ul>li` - 语义化标签有助于 SEO 和无障碍访问 - **布局优化** - 核心内容 `

` 优先渲染，提升首屏速度 - 侧边栏 `