浏览器解析HTML构建DOM树，同时解析CSS生成样式规则，两者结合形成渲染树后计算布局，最终将像素绘制到屏幕上完成页面显示。
第一步：获取与解码
- 网络请求
输入网址后，浏览器向服务器发送HTTP请求，服务器响应返回HTML文档，通常伴随CSS、JavaScript等资源。 - 字节流解码
浏览器接收二进制数据流（字节），根据文件声明的编码（如UTF-8）转换为可读的文本字符串。
第二步：构建文档对象模型（DOM）
浏览器通过解析器逐行扫描HTML文本：
<!DOCTYPE html>
<html>
<head>示例</title>
</head>
<body>
<h1>你好世界</h1>
</body>
</html>
- 词法分析
拆分文本为有效标记（如<html>、<body>等）。 - 语法分析
根据HTML规范构建树形结构：- 根节点：
<html> - 子节点：
<head>和<body> - 孙节点：
<title>、<h1>等
(图示：DOM树层级关系)
- 根节点：
- DOM树生成
最终形成完整的文档对象模型（DOM），每个元素成为可编程的节点。
第三步：解析CSS并构建CSSOM
- 加载样式
遇到<link>标签或<style>内容时，解析所有CSS规则。 - 级联排序
计算样式优先级（内联样式 > ID选择器 > 类选择器 > 元素选择器）。 - 构建CSSOM树
生成样式对象模型（CSSOM），记录每个节点的最终样式：h1 { color: blue; font-size: 24px; } body { background: #f0f0f0; }
第四步：合并渲染树（Render Tree）
- 关键合并
浏览器将DOM和CSSOM组合为渲染树，仅包含可见元素（忽略display:none）。 - 样式匹配
为每个DOM节点应用CSSOM计算的最终样式。
第五步：布局（Layout） / 重排（Reflow）
- 计算几何尺寸
遍历渲染树，计算每个元素在视口中的精确位置和大小（像素级坐标）。 - 视口响应
根据设备尺寸动态调整布局（如手机端的响应式设计）。
第六步：绘制（Painting）
- 生成绘制指令
将布局结果转换为像素绘制命令（如“在坐标(10,20)绘制蓝色文字”）。 - 分层绘制
复杂页面被拆分为多个图层（如动画元素单独分层），提升渲染效率。
第七步：合成（Compositing）
- 图层合并
浏览器将所有分层按顺序合成为最终图像（类似Photoshop图层叠加）。 - GPU加速
利用显卡并行处理能力，快速输出到屏幕。
动态交互处理
- JavaScript介入
当遇到<script>标签时，暂停HTML解析，执行JavaScript。
优化提示：建议将脚本放在页面底部或用async/defer异步加载。 - 用户响应
点击或滚动时触发重绘（Repaint）或重排（Reflow）更新局部内容。
性能优化关键
- 减少重排
集中修改样式（避免逐行改变DOM几何属性）。 - 压缩资源
缩小CSS/JS文件，使用图片懒加载。 - 利用缓存
设置Cache-Control头复用已下载资源。
从字节流到绚丽页面,浏览器在毫秒级内完成了DOM构建、样式计算、布局绘制三大核心阶段，理解这一过程，能帮助开发者编写高性能代码，打造流畅的用户体验，每一次网页加载，都是一场精密的视觉工程。
引用说明参考Mozilla开发者网络（MDN）的浏览器渲染原理文档、Google开发者性能优化指南，以及W3C的HTML/CSS规范标准，技术细节均符合现代浏览器（Chrome, Firefox, Safari）的通用实现原理。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/14748.html
