深入浏览器渲染页面的原理-面试重点回流和重绘

Myth丶恋晨 2023-10-02 19:53 8阅读 0赞

#### 文章目录 ####

*   *  1.网页被解析的过程
     *  2.浏览器的内核
     *  3.浏览器渲染流程
     *   *  3.1 渲染引擎解析页面简介
         *  3.2 解析一: HTML解析过程
         *  3.3 解析二: 生成CSS规则
         *  3.4 解析三: 构建Render Tree
         *  3.5 解析四: 布局和绘制
     *  4.回流和重绘(面试重点)
     *   *  4.1 回流
         *  4.2 重绘
         *  4.3 如何避免回流
     *  5.特殊解析 – composite合成
     *  6. script标签的属性
     *   *  6.1 script元素和页面解析的关系
         *  6.2 defer属性
         *  6.3 async属性

### 1.网页被解析的过程 ###

**大家有没有深入思考过：一个网页URL从输入到浏览器中，到显示经历过怎么样的解析过程呢？**

*  **输入服务器地址**, 会**向服务器请求静态资源**, 一般是**html文件**
 *  在html文件进行解析的过程中, 如果**遇到link元素, 就会从服务器中下载对应的CSS文件**
 *  如果**遇到script元素, 就会从服务器中下载对应的JavaScript文件**
 *  如果**还遇到图片或字体**, 那么就会**再从服务器下载对应的静态资源**
 *  这就是网页URL输入到浏览器的基本解析过程

![在这里插入图片描述][db419f557f7a49c38ce49fb368aa04b9.png_pic_center]

**要想深入理解下载的过程，我们还要先理解，一个index.html被下载下来后是如何被解析和显示在浏览器上的.**

### 2.浏览器的内核 ###

**浏览器最核心的就是浏览器内核**

*  当我们**从服务器拿到对应的资源(如HTML, CSS, JS)后, 是被浏览器内核解析的**

**常见的浏览器内核有**

*  **Trident** （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
 *  **Gecko**（ 壁虎） ：Mozilla Firefox；
 *  **Presto**（急板乐曲）-> Blink （眨眼）：Opera
 *  **Webkit** ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
 *  **Webkit** \-> Blink ：Google Chrome，Edge
    
    ![在这里插入图片描述][80c0f679175944df9791d596deaffba3.png_pic_center]

**我们经常说的浏览器内核指的是浏览器的排版引擎：**

*  **排版引擎**（layout engine），也称为**浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎**。

**也就是一个网页下载下来后，就是由我们的渲染引擎来帮助我们解析的。**

### 3.浏览器渲染流程 ###

#### 3.1 渲染引擎解析页面简介 ####

**渲染引擎在拿到一个页面后，如何解析整个页面并且最终呈现出我们的网页呢？**

*  **我们之前学习过下面的这幅图**
    
    1.  当浏览器拿到对应的页面, 首先加载HTML, 对HTML进行解析
    2.  在解析HTML过程中, 一旦遇到link元素, 发现link元素有引入其他文件(CSS文件), 那么就会去下载对应的CSS文件
    3.  **解析所有的HTML会创建对应的DOM tree**; 创建DOM tree的过程中也在**解析CSS**, 解析完**CSS会添加到对应的DOM node上**
    4.  最终就会将页面展示出来
 *  **现在让我们更加详细的学习它的过程；**

![在这里插入图片描述][7d5fad2793684c24850d032a99d65c3d.png_pic_center]

**更详细的解析过程如下：**

*  解析HTML会形成DOM Tree, 解析CSS会形成DOM node, **结合DOM Tree和DOM node**会形成**渲染树(Rander Tree)**
 *  **Rander Tree上没有节点的位置大小信息**, 因此会进行Layout来处理
 *  当进行Layout后, 有了对应的位置信息和大小信息, 就会**绘制页面, 绘制完成后展示到浏览器**
 *  在生成DOM Tree之前, 如果有JavaScript进行DOM操作, 那么会在DOM Tree生成之前处理

![在这里插入图片描述][b9c876d9ab9f48c7b2fc22f063b01093.png_pic_center]

#### 3.2 解析一: HTML解析过程 ####

因为**默认情况下**服务器**会给浏览器返回index.html文件**，所以**解析HTML是所有步骤的开始**：

*  **解析HTML，会构建DOM Tree**：
 *  **HTML示例代码:**
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script src="./js/test.js" async></script>
          <script src="./js/demo.js" async></script>
        </head>
        <body>
          <p>Hello<span>web performance</span></p>
          <div>
            <img src="awesome-photo.jpg">
          </div>
        </body>
        </html>
 *  **解析出的DOM-Tree**
    
    ![在这里插入图片描述][1b16e3239b69405fb9f5794778d48bcc.png_pic_center]

#### 3.3 解析二: 生成CSS规则 ####

**在HTML解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件：**

*  注意：下载CSS文件, **会有一个单独的解析单元,** 是**不会影响HTML解析**形成DOM Tree的；

浏览器下载完CSS文件后，就会对CSS文件进行解析，**解析出对应的规则树：**

*  我们可以称之为 **CSSOM（CSS Object Model，CSS对象模型）；**
 *  **CSS示例代码**
    
        body {
              
          font-size: 16px;
        }
        
        p {
              
          font-weight: bold;
        }
        
        span {
              
          color: red;
        }
        
        p span {
              
          display: none;
        }
        
        img {
              
          float: left;
        }
 *  解析出的对应规则树
    
    ![在这里插入图片描述][1bb4fcd5c389442092693c764c453e13.png_pic_center]

#### 3.4 解析三: 构建Render Tree ####

当有了DOM Tree和 CSSOM Tree后，就可以**两个结合来构建Render Tree了**

![在这里插入图片描述][432cf6c8a5d247ff91809b005a2c0ba7.png_pic_center]

**注意一**：**link元素不会阻塞DOM Tree的构建过程**，但是**会阻塞Render Tree的构建过程**

*  这是因为**Render Tree在构建**时，**需要对应的CSSOM Tree**；

**注意二**：**Render Tree和DOM Tree并不是一一对应的关系**，**比如对于display为none的元素，压根不会出现在render tree中**；

#### 3.5 解析四: 布局和绘制 ####

**第四步是在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体。**

*  渲染树会表示显示哪些节点以及其他样式，但是**不表示每个节点的尺寸、位置等信息**；
 *  **布局**是确定渲染树中**所有节点的宽度、高度和位置信息**；

**第五步是将每个节点绘制（Paint）到屏幕上**

*  在绘制阶段，浏览器将布局阶段计算的每个**frame转为屏幕上实际的像素点**；
 *  包括**将元素的可见部分进行绘制**，比如**文本、颜色、边框、阴影、替换元素（比如img）**

![在这里插入图片描述][3ffb9ce28e2c4c8f8244e92c7cd18820.png_pic_center]

### 4.回流和重绘(面试重点) ###

#### 4.1 回流 ####

**理解回流reflow：（也可以称之为重排）**

*  **第一次确定节点的大小和位置**，称之为**布局**（layout）。
 *  之后对节点的大小、位置修改重新计算称之为**回流。**

**什么情况下引起回流呢？**

*  比如**DOM结构发生改变**（添加新的节点或者移除节点）；
 *  比如**改变了布局**（修改了width、height、padding、font-size等值）
 *  比如**改变窗口resize**（修改了窗口的尺寸等）
 *  比如**调用getComputedStyle方法**获取尺寸、位置信息；

#### 4.2 重绘 ####

**理解重绘repaint：**

*  **第一次渲染**内容称之为**绘制**（paint）。
 *  **之后重新渲染称之为重绘。**

**什么情况下会引起重绘呢？**

*  比如**修改背景色**、**文字颜色**、**边框颜色**、**样式**等；
 *  **回流一定会引起重绘**，所以回流是一件**很消耗性能**的  
    事情。

#### 4.3 如何避免回流 ####

**所以在开发中要尽量避免发生回流**：

1.  **修改样式时尽量一次性修改**

*  比如通过cssText修改，比如通过添加class修改

1.  **尽量避免频繁的操作DOM**

*  我们可以在一个DocumentFragment或者父元素中  
    将要操作的DOM操作完成，再一次性的操作；

1.  **尽量避免通过getComputedStyle获取尺寸、位置等信**  
    **息**；
2.  **对某些元素使用position的absolute或者fixed**

*  并**不是不会引起回流**，而是**开销相对较小**，**不会对**  
    **其他元素造成影响**。

### 5.特殊解析 – composite合成 ###

**绘制的过程，可以将布局后的元素绘制到多个合成图层中。**

*  这是浏览器的一种优化手段；

**默认情况下**，**标准流中的内容都是被绘制在同一个图层**（Layer）中的；

而**一些特殊的属性**，会**创建一个新的合成层**（ CompositingLayer ），并且**新的图层可以利用GPU来加速绘制**；

*  因为**每个合成层都是单独渲染**的；

那么哪些属性可以形成新的合成层呢？**常见的一些属性：**

*  **3D transforms**
 *  **video、canvas、iframe**
 *  **opacity 动画转换时；**
 *  **position: fixed**
 *  **will-change**：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化；
 *  **animation 或 transition 设置了opacity、transform；**

分层确实可以提高性能，但是它以内存管理为代价，因此不应作为 web 性能优化策略的一部分过度使用。

### 6. script标签的属性 ###

#### 6.1 script元素和页面解析的关系 ####

**我们现在已经知道了页面的渲染过程，但是JavaScript在哪里呢？**

*  事实上，浏览器在解析HTML的过程中，**遇到了script元素**是**不能继续构建DOM树**的；
 *  它会**停止继续构建**，首先**下载JavaScript代码**，**并且执行JavaScript的脚本**；
 *  只有**等到JavaScript脚本执行结束**后，才会**继续解析HTML，构建DOM树**；

**为什么要这样做呢？**

*  这是因为**JavaScript的作用之一就是操作DOM**，并且**可以修改DOM**；
 *  如果我们等到**DOM树构建完成并且渲染**再执行JavaScript，**会造成严重的回流和重绘**，**影响页面的性能**；
 *  所以会在**遇到script元素时，优先下载和执行JavaScript代码，再继续构建DOM树**；

**但是这个也往往会带来新的问题，特别是现代页面开发中：**

*  在目前的开发模式中（比如Vue、React），**脚本往往比HTML页面更“重”**，**处理时间需要更长**；
 *  所以**会造成页面的解析阻塞，在脚本下载、执行完成之前，用户在界面上什么都看不到**；

**为了解决这个问题，script元素给我们提供了两个属性（attribute）：defer和async。**

#### 6.2 defer属性 ####

defer 属性告诉浏览器**不要等待脚本下载，而继续解析HTML，构建DOM Tree。**

*  脚本**会由浏览器来进行下载，但是不会阻塞DOM Tree**的构建过程；
 *  **如果脚本提前下载好了**，它会**等待DOM Tree构建完成**，**在DOMContentLoaded事件之前先执行,**；

1.  **所以DOMContentLoaded总是会等待defer中的代码先执行完成。**
2.  另外**多个带defer的脚本是可以保持正确的顺序执行的**, 执行顺序就是**书写的顺序**。
3.  从某种角度来说，**defer可以提高页面的性能**，并且**推荐放到head元素**中, 放在head元素中可以提前下载,；
4.  注意：defer仅适用于外部脚本，**对于script默认内容会被忽略**。

#### 6.3 async属性 ####

**async 特性与 defer 有些类似，它也能够让脚本不阻塞页面。**

**async是让一个脚本完全独立的：**

1.  浏览器不**会因 async 脚本而阻塞（与 defer 类似）**；
2.  async脚本**不能保证顺序**，它是**独立下载、独立运行**，下载完成就运行, **不会等待其他脚本**；
3.  async**不能保证在DOMContentLoaded之前或者之后执行**；

**defer**通常用于需要在文档**解析后操作DOM的JavaScript代码**，并且**对多个script文件有顺序要求的**；  
性与 defer 有些类似，它也能够让脚本不阻塞页面。\*\*

**async是让一个脚本完全独立的：**

**defer**通常用于需要在文档**解析后操作DOM的JavaScript代码**，并且**对多个script文件有顺序要求的**；  
**async**通常用于**独立的脚本**，**对其他脚本，甚至DOM没有依赖的**；

[db419f557f7a49c38ce49fb368aa04b9.png_pic_center]: https://img-blog.csdnimg.cn/db419f557f7a49c38ce49fb368aa04b9.png#pic_center
[80c0f679175944df9791d596deaffba3.png_pic_center]: https://img-blog.csdnimg.cn/80c0f679175944df9791d596deaffba3.png#pic_center
[7d5fad2793684c24850d032a99d65c3d.png_pic_center]: https://img-blog.csdnimg.cn/7d5fad2793684c24850d032a99d65c3d.png#pic_center
[b9c876d9ab9f48c7b2fc22f063b01093.png_pic_center]: https://img-blog.csdnimg.cn/b9c876d9ab9f48c7b2fc22f063b01093.png#pic_center
[1b16e3239b69405fb9f5794778d48bcc.png_pic_center]: https://img-blog.csdnimg.cn/1b16e3239b69405fb9f5794778d48bcc.png#pic_center
[1bb4fcd5c389442092693c764c453e13.png_pic_center]: https://img-blog.csdnimg.cn/1bb4fcd5c389442092693c764c453e13.png#pic_center
[432cf6c8a5d247ff91809b005a2c0ba7.png_pic_center]: https://img-blog.csdnimg.cn/432cf6c8a5d247ff91809b005a2c0ba7.png#pic_center
[3ffb9ce28e2c4c8f8244e92c7cd18820.png_pic_center]: https://img-blog.csdnimg.cn/3ffb9ce28e2c4c8f8244e92c7cd18820.png#pic_center