【干货】十分钟读懂浏览器渲染流程

十分钟读懂浏览器渲染流程

浏览器渲染流程是浏览器从接收HTML、CSS、JavaScript等资源到最终呈现页面给用户看到的整个过程。这个过程涉及多个步骤和组件的协同工作。以下是浏览器渲染流程的详细解读：

一、浏览器主要组件结构

浏览器的主要组件包括用户界面、浏览器引擎、渲染引擎、网络、UI后端、JS解释器、数据存储等。其中，渲染引擎是浏览器中最核心的部分，它负责解析HTML、CSS，以及将页面内容绘制到屏幕上。常见的渲染引擎有Webkit（Safari和Chrome使用）和Gecko（Firefox使用）。

二、关键渲染路径

关键渲染路径是指浏览器从接收HTML、CSS、JavaScript等资源开始，到解析、构建树、渲染布局、绘制，最后呈现给用户界面的整个过程。这个过程主要包括以下几个步骤：

解析HTML生成DOM树：浏览器接收服务器响应的HTML文档后，会遍历文档节点，生成DOM树。DOM树是页面结构的表示，每个节点都对应页面上的一个元素。
解析CSS生成CSSOM规则树：浏览器解析CSS文件并生成CSS规则树。CSS规则树是页面样式的表示，每个节点都包含CSS规则和选择器。
构建渲染树：浏览器将DOM树和CSS规则树合并在一起，生成渲染树。渲染树只包含可见节点和对应的样式信息。
布局：浏览器遍历渲染树，计算每个节点的位置和大小信息，生成盒子模型。这个过程称为布局或reflow。
绘制：浏览器遍历渲染树，调用渲染器的paint()方法将内容绘制到屏幕上。这个过程称为绘制或repaint。

三、构建DOM树和CSSOM规则树

在构建DOM树的过程中，浏览器会逐个解析HTML元素，并将其插入到DOM树中。同时，浏览器还会查找CSS样式规则，并将其应用到对应的元素上。需要注意的是，DOM树的构建可能会被CSS和JavaScript的加载执行阻塞。

CSSOM规则树的构建过程与DOM树类似，浏览器解析CSS文件，生成CSS规则树。每个CSS文件都被分析成一个StyleSheet对象，每个对象都包含CSS规则。

四、渲染阻塞

当浏览器遇到一个script标签时，DOM构建将暂停，直至脚本完成执行。这是因为JavaScript可能会修改DOM或CSSOM，所以浏览器需要等待脚本执行完毕后再继续构建DOM。为了避免渲染阻塞，我们可以将JavaScript代码放到页面底部，或者使用异步加载的方式。

此外，CSS的加载也会影响DOM的构建。如果CSS文件还没有下载完成，浏览器可能会延迟脚本的执行和DOM的构建，直到CSSOM构建完成。因此，在实际开发中，我们应该尽量将CSS资源放在JavaScript资源之前加载。

五、构建渲染树

通过DOM树和CSSOM规则树，我们可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个可见节点，对每个可见节点找到其适配的CSS样式规则并应用。渲染树构建完成后，每个节点都是可见节点并且都含有其内容和对应规则的样式。

六、渲染树布局

布局阶段会从渲染树的根节点开始遍历，确定每个节点对象在页面上的确切大小与位置。布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

七、渲染树绘制

在绘制阶段，浏览器遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

八、reflow与repaint

在渲染过程中，经常会涉及到页面的重新布局和重绘。reflow是指元素的几何尺寸发生变化，需要重新验证并计算渲染树。repaint是指屏幕的一部分重画，但不影响整体布局。

为了减少reflow和repaint的次数，我们应该尽量减少对DOM和CSSOM的修改。此外，display:none会触发reflow，而visibility:hidden只会触发repaint，因为它只是隐藏元素但仍然占据布局空间。

有些情况下，浏览器并不会立即进行reflow或repaint，而是会把这样的操作积攒一批，然后做一次reflow或repaint。这称为异步reflow或增量异步reflow。但是，在某些情况下，如resize窗口或改变页面默认字体等，浏览器会立即进行reflow。

九、小结

通过本文的介绍，我们了解了浏览器渲染流程的主要步骤和关键组件。在实际开发中，我们应该注意避免渲染阻塞、减少reflow和repaint的次数、优化CSS选择器等技巧来提高页面的渲染性能。希望本文对大家有所帮助！

热门标签