6张图让你搞懂浏览器渲染网页过程
最新回答
小小
2021-11-16 14:30:27
浏览器渲染网页的过程可分为以下六个主要阶段，每个阶段均配有示意图辅助理解：
1. 开始解析HTML浏览器通过网络接收HTML数据后，解析器立即将其转换为文档对象模型（DOM）。
- DOM是HTML/XML文档的编程接口，以节点和对象形式表示文档结构，允许程序访问和修改内容、样式及结构。
- 解析过程将HTML分解为开始标记、结束标记及内容标记，逐步构建DOM树。
解析器遇到外部资源（如CSS/JS文件）时，会发起请求获取资源，但不同资源的加载行为不同：
- CSS文件：加载时阻塞页面渲染，需完全解析后才能继续渲染。
- JavaScript文件：默认阻塞HTML解析，但可通过属性优化：
defer：延迟执行，按脚本在文档中的顺序执行。
<script src="script.js" defer></script>async：加载后立即执行，执行顺序不确定。
<script src="script.js" async></script> - 预加载资源：通过<link rel="preload">提前获取关键资源，减少渲染阻塞。<link href="style.css" rel="preload" as="style" />
CSS文件需解析为CSS对象模型（CSSOM），与DOM类似但特性不同：
- CSSOM是树形结构，包含所有CSS选择器及其属性，描述页面样式规则。
- 与DOM的区别：CSSOM需完整构建后才能渲染，因CSS规则可能因特异性覆盖，导致浏览器无法提前确定元素位置（CSS阻塞渲染的原因）。
JavaScript由浏览器引擎（如V8）执行，优化解析对性能至关重要：
- 关键事件：
DOMContentLoaded：DOM解析完成后触发，适合操作DOM的脚本。
document.addEventListener('DOMContentLoaded', () => { // 安全操作DOM});load：所有资源（包括图片）加载完成后触发。
window.addEventListener('load', () => { // 页面完全加载});
渲染树是DOM与CSSOM的组合，表示需渲染的内容：
- 包含节点：仅包含可见元素（如opacity: 0的节点仍存在，display: none的节点不包含）。
- 忽略标签：如<head>等非视觉标签。
- 布局计算：浏览器从渲染树顶部向下遍历，确定每个节点的位置和大小（坐标计算）。
- 绘制阶段：根据布局信息将像素绘制到屏幕，完成最终渲染。
通过理解这六个阶段，开发者可针对性优化关键路径（如减少阻塞资源、合理使用defer/async），显著提升页面加载性能。
热门标签
