浏览器渲染流程

傷城~ 2022-11-21 04:07 197阅读 0赞

## 概念解释 ##

**DOM Tree**：浏览器将HTML解析成树形的数据结构。

**CSS Rule Tree**：浏览器将CSS解析成树形的数据结构。

**Render Tree**: DOM和CSSOM合并后生成Render Tree。

**layout**: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

**painting**: 按照算出来的规则，通过显卡，把内容画到屏幕上。

**reflow（回流**）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。

**repaint（重绘）**：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

注意：  
(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。

(2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

(3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

## 浏览器渲染大致流程 ##

本文所讨论的浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。  
webkit的主要流程：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70_pic_center]  
Geoko的主要流程：  
　　![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70_pic_center 1]  
尽管Webkit与Gecko使用略微不同的术语，这个过程还是基本相同的，如下：

1.  处理 HTML 标记并构造 DOM 树。
2.  处理 CSS 标记并构造 CSSOM 树。
3.  将 DOM 与 CSSOM 合并成一个渲染树。
4.  根据渲染树来布局，以计算每个节点的几何信息。  
    包含以下内容：  
    Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）  
    Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5.  将各个几点绘制到屏幕上（将像素发送给GPU，展示在页面上）。

## 生成渲染树流程 ##

渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。  
![渲染树流程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70_pic_center 2]

1.  从DOM树的根节点开始遍历每个**可见节点**。
2.  对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
3.  根据每个可见节点以及其对应的样式，组合生成渲染树。

**不可见节点如下：**  
一些不会渲染输出的节点，比如script、meta、link等。  
一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。

参考：  
[https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/\#The\_browser\_high\_level\_structure][https_www.html5rocks.com_zh_tutorials_internals_howbrowserswork_The_browser_high_level_structure] 对浏览器工作原理做了详细介绍  
[https://segmentfault.com/a/1190000017329980][https_segmentfault.com_a_1190000017329980]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4b90223ca8b0493a96a4fbb08472e06f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d2103b88aee445a4acf16962c1454d26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/0155eb1d783544aebfb992a4470ecc8b.png
[https_www.html5rocks.com_zh_tutorials_internals_howbrowserswork_The_browser_high_level_structure]: https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browser_high_level_structure
[https_segmentfault.com_a_1190000017329980]: https://segmentfault.com/a/1190000017329980