【以层为基础的复合模型对浏览器渲染的影响】

落日映苍穹つ 2023-07-24 13:18 2阅读 0赞

工作中遇到在absolute元素上鼠标hover不起作用的问题，搜索发现是这个原因：You can increase the stacking order by setting a higher z-index value. 因此引发了我的思考，重叠元素是如何显示，页面元素是如何以正确的顺序合成的，所以今天来学习浏览器渲染的图层，以便将来分析更加复杂的css渲染问题。

**目录**

浏览器渲染过程

回流和重绘

从DOM到屏幕

reflow 的原因

如何减少回流、重绘（渲染过程中的优化）

思考1：浏览器渲染过程中的absolute/fixed布局

思考2：visibility: hidden和display: none的区别

GPU 硬件加速/提升为合成层（渲染过程中的优化）

GPU和CPU的职责

什么情况下能使元素获得自己的层 （即提升为合成层，即硬件加速技术）

参考

--------------------

## 浏览器渲染过程 ##

DOM树+CSSOM树，合成渲染树（render tree）

![format_png][]

**渲染树只会包括需要显示的节点和这些节点的样式信息**，如果某个节点是 `display: none` 的，那么就不会在渲染树中显示。

*  普通定位是根据对象在文档中的位置进行定位，也就是说对象在呈现树中的位置和它在 DOM 树中的位置相似，并根据其框类型和尺寸进行布局。
 *  HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。box-sizing默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。*W3C 标准盒模型只包含内容content，不包含border和padding；IE 盒模型包含border和padding，指的是content+padding+border。*

### 回流和重绘 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

当网页生成的时候，至少会渲染一次。在用户访问的过程中，还会不断重新渲染。重新渲染会重复上图中的回流+重绘或者只有重绘。

*  Repaint（重绘）：如果只是改变了render tree中的某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。如background-color。
 *  Reflow（回流）：当render tree中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建。reflow比repaint更消耗性能，写代码时要尽量避免。

**回流必定会发生重绘，重绘不一定会引发回流**。

var s = document.body.style;
    s.padding = "2px"; // 回流+重绘
    s.border = "1px solid red"; // 再一次 回流+重绘
    s.color = "blue"; // 再一次重绘
    s.backgroundColor = "#ccc"; // 再一次 重绘
    s.fontSize = "14px"; // 再一次 回流+重绘
    document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘

### 从DOM到屏幕 ###

1.  获取 DOM 并将其分割为多个层
2.  将每个层独立的绘制进位图中
3.  将层作为纹理上传至 GPU
4.  GPU复合多个层来生成最终的屏幕图像。

第4步：即`Composite（渲染层合并）。`对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。

## reflow 的原因 ##

*  页面初始化的时候
 *  添加或者删除可见的DOM元素
 *  某些元素的尺寸变了——边距、填充、边框、宽度和高度
 *  CSS 的属性发生变化了
 *  浏览器窗口尺寸改变——resize事件发生时
 *  内容变化，比如用户在input框中输入文字

## **如何减少回流、重绘（渲染过程中的优化）** ##

*  为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的
 *  不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局
 *  不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
 *  使用 transform 替代 top
 *  把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界
 *  使用 visibility:hidden 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
 *  将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层

### 思考1：浏览器渲染过程中的absolute/fixed布局 ###

虽然可以脱离普通文档流，但它仍然属于`默认复合层`。然后，可以通过`硬件加速`的方式，声明一个`新的复合图层`，它会单独分配资源（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响`默认复合层`里的回流重绘）。就算absolute中信息改变时不会改变普通文档流中render树，但是浏览器最终绘制时，是整个复合层绘制的，所以absolute中信息的改变，仍然会影响整个复合层的绘制。浏览器会重绘它，如果复合层中内容多，absolute带来的绘制信息变化过大，资源消耗是非常严重的。

### `思考2：visibility: hidden`和`display: none`的区别 ###

`display`由于隐藏后不占据位置，所以造成了dom树的改变，会引发回流，代价较大。当一个页面某个元素经常需要切换`display`，一般会用复合层优化，或者要求低一点用`absolute`让其脱离普通文档流也行。

## `GPU` 硬件加速/提升为合成层**（渲染过程中的优化）** ##

renderLayer提升为了合成层就会有自己的绘图上下文，并且会开启硬件加速，有利于性能提升。

合成层的优势：一般一个元素开启硬件加速后会变成合成层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。复合图层单独分配资源，独立绘制，性能提升，但是不能过多

### GPU和CPU的职责 ###

`GPU`（Graphics Processing Unit） 是`图像处理器`。`GPU` 硬件加速是指应用 `GPU` 的图形性能对浏览器中的一些图形操作交给 `GPU` 来完成，因为 `GPU` 是`专门为处理图形而设计`，所以它在`速度和能耗`上更有效率。

`GPU` 加速可以不仅应用于3D，而且也可以应用于2D。这里， `GPU` 加速通常包括以下几个部分：`Canvas2D`，`布局合成（Layout Compositing）`, `CSS3转换（transitions）`，`CSS3 3D变换（transforms）`，`WebGL`和`视频(video)`。[·][Link 1]

我们可以说 CPU 所做的工作都在软件层面，而 GPU 在硬件层面，我们可以用软件（使用 CPU ）做任何事情，但是对于图像处理，通常用硬件会更快，因为GPU使用图像对高度并行浮点运算做了优化。

举个例子，下面的方式二在浏览器渲染上性能更好：

/* 方式一*/
    @keyframes move {
     from { left: 30px; }
     to { left: 100px; }
    }
     
    /* 方式二*/  
    @keyframes move {
     from { transform: translateX(0); }
     to { transform: translateX(70px); }
    }

### 什么情况下能使元素获得自己的层 （即提升为合成层，即硬件加速技术） ###

*  3D 或透视变换(perspective transform) CSS 属性 （`translate3d`、`translateZ`）
 *  `opacity`属性
 *  <video> 元素
 *  拥有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
 *  拥有加速 CSS 过滤器的元素
 *  元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
 *  元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

## 参考 ##

[http://taligarsiel.com/Projects/howbrowserswork1.htm][http_taligarsiel.com_Projects_howbrowserswork1.htm]  （how browsers work -- behind the scenes of modern web browsers）

[https://blog.fundebug.com/2019/01/03/understand-browser-rendering/][https_blog.fundebug.com_2019_01_03_understand-browser-rendering]

[https://www.html5rocks.com/zh/tutorials/speed/layers/][https_www.html5rocks.com_zh_tutorials_speed_layers]

[format_png]: /images/20230528/4893244c1c05453c90a1cd4ae5671f6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20230528/ede24626c63c41ed8770e91b609b28f2.png
[Link 1]: http://caibaojian.com/css-reflow-repaint.html
[http_taligarsiel.com_Projects_howbrowserswork1.htm]: http://taligarsiel.com/Projects/howbrowserswork1.htm
[https_blog.fundebug.com_2019_01_03_understand-browser-rendering]: https://blog.fundebug.com/2019/01/03/understand-browser-rendering/
[https_www.html5rocks.com_zh_tutorials_speed_layers]: https://www.html5rocks.com/zh/tutorials/speed/layers/