【玩转移动端系列】还记得浏览器页面渲染机制吗？
最新回答
风铃鹿
2026-03-26 16:52:52
浏览器页面渲染机制
浏览器页面渲染机制是指浏览器从接收HTML、CSS和JavaScript等资源的原始字节开始，到最终在屏幕上呈现像素化页面的整个过程。这个过程涉及多个步骤和组件，下面将详细阐述。
一、浏览器引擎
浏览器引擎是浏览器的核心组件，负责将加载到的文件渲染成用户可浏览的网页。不同的浏览器厂商对引擎的称呼也不同，如Firefox的Gecko、Chrome的Blink（WebKit的一个分支）等。
二、从原始字节到DOM和CSSOM
HTML的原始字节到DOM
当开发者编写HTML代码并尝试在浏览器中打开时，浏览器会从硬盘（或网络）中读取HTML的原始字节数据。
浏览器将这些原始字节数据转换为它可以理解的形式，并构建出一个DOM（文档对象模型）树。DOM树建立了HTML元素之间的父子关系、相邻兄弟关系等。
CSS的原始字节到CSSOM
与HTML类似，浏览器也会读取CSS的原始字节数据，并将其转换为CSSOM（CSS对象模型）树。
CSSOM树结构对于浏览器确定将哪些样式应用于元素至关重要，因为影响元素的样式可能来自父元素（即通过继承），或者已经在元素本身上设置。
三、渲染树的构建
- 浏览器将DOM和CSSOM树组合成一个渲染树。渲染树包含有关页面上所有可见DOM内容的信息以及不同节点所需的所有CSSOM信息。
- 如果某个元素已被CSS隐藏（如display: none;），则该节点将不会在渲染树中表示。
四、布局
- 在布局阶段，浏览器计算出页面上每个对象的确切大小和位置。这是基于渲染树中的信息进行的。
五、绘制
- 当浏览器得到了每个元素的确切位置信息后，剩下的就是将元素“绘制”到屏幕上。
六、JavaScript对渲染树的影响
- JavaScript可以修改页面的内容和样式，即可以从DOM树中删除和添加元素，也可以通过JavaScript修改元素的CSSOM属性。
- 一旦引入JavaScript，每当浏览器遇到<script>标签时，DOM构建就会暂停，直到脚本完成执行。这是因为JavaScript可以同时改变DOM和CSSOM，浏览器不确定这个特定的JavaScript会做什么，因此会采取预防措施，通过完全停止整个DOM构建来避免潜在的问题。
- 常见的应对手段包括在body末尾引入JavaScript和JavaScript异步加载。
七、关键渲染路径（CRP）
- 关键渲染路径是指从接收HTML、CSS和JS字节并将它们转换为屏幕上呈现的像素之间所采取的步骤。
- 优化网站的性能就是优化CRP。一个优化良好的网站应该进行渐进式渲染，并且不会阻止整个过程。
- 通过优先考虑加载哪些资源以及加载它们的顺序，浏览器能够尽可能快地渲染页面。
八、总结
整个渲染流程可以概括为以下步骤：
- 浏览器读取HTML和CSS的原始字节数据。
- 构建DOM和CSSOM树。
- 将DOM和CSSOM树组合成渲染树。
- 进行布局计算，确定每个元素的位置和大小。
- 将元素绘制到屏幕上。
- JavaScript可以影响渲染树的构建和绘制过程。
- 优化CRP以提高网站性能。
了解浏览器页面渲染机制对于前端开发者来说至关重要，它有助于我们优化网站性能，提高用户体验。
热门标签
