浏览器渲染原理中的那些事儿，前端开发必看

向右看齐 2023-01-12 04:19 106阅读 0赞

### 参加浏览器渲染的一些概念 ###

DOM（文档对象模型）  
CSSOM（CSS对象模型）  
Render Tree (渲染树)  
Layout（布局）  
Paint（绘制）  
Rasterize (栅格化)  
Layer（图层）  
Composite（合成）

### 渲染过程 ###

首先DOM、CSSOM大家耳熟能详， 二者就是文档加载之后创建的对象模型。前者描述了结构，后者描述了样式。

接着会将二者结合起来生成**渲染树**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
上图中，我们可以看到，DOM中存在的一些元素比如head，因为是没必要显示的，所以不会出现在渲染树中的。即使是body中的节点，若设置了display:none，依旧是不会出现在渲染树中的。

当得到了渲染树之后，页面还不能够被渲染。这就好像我们有一些色块（盒模型），但我们不知道每一个盒子的位置，所以无法拼出完整的图形。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]  
这时候Layout布局就出场了，他就是为了定位刚刚渲染树中各个节点的位置，使之能够拼成完整的可渲染的图层。

数一数，到目前为止，我们得到了文档DOM，渲染树，并且得到渲染树各个元素的所在的位置。似乎已经可以进行渲染了。的确，但此时渲染并非渲染到屏幕上，而是渲染到Layer图层上，这个概念和PS中的图层差不多，因为CSS是有`z-index`属性的，也就是展示给我们的页面其实并非是二维的，所以绘制的过程会在多个图层进行。图层与图层之间可能相互重叠，所以此时的渲染并不会真的出现在屏幕上。

（题外话：在Chrome中，Paint绘制分为两部分，一部分是准备绘图使用的列表数据，一部分是将数据已像素的形式栅格化(Rasterize )到图层上。）

有了渲染好的图层，才算是一切准备就绪，接下来会将各个图层按照层级与顺序关系**合成**(Composite)到到一起进而显示到屏幕上。

好了，总结一下整个流程如下，一图胜千言：  
![在这里插入图片描述][2021012721431117.png]  
长出一口气，现在我们知道了从服务返回的字符串如何最终转换为了精美的网页。但不妨思考一个问题，我们为什么要知道这个呢？答案很简单，因为我们当我们想提升页面的响应速度，尤其是动画的时候这些概念就变的尤为重要。

### 提升动画性能 ###

我们知道，实现动画方式多种多样，比如：

*  jquery有animatin的api
 *  css 有keyframes动画（改变left，height样式等）
 *  css3 的transform

但实际使用以上三种形式实际上有本质的区别，因为他们各自的触发的浏览器重新渲染的时机是不同的。通过JS或者CSS改变盒模型均会导致Layout -> Paint -> Composite的整个流程。相对而言，transform 仅仅是触发Composite 合成，不会重排也不会重绘。要知道这二者都是非常耗性能的。

其实不触发重排重绘也仅仅有transform以及opacity两个样式。但对于大部分动画都已经足够了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 2]  
本文仅仅是讲了浏览器渲染的原理，浏览器的机制还有很多，比如Chrome的多进程模型等等，有兴趣的可以深入探索。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221119/065fef93ac704f15a8958e3129f88020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 1]: /images/20221119/7df73c457e0d4097b7955ae8d530d21e.png
[2021012721431117.png]: /images/20221119/52af2bf527694755b5a2082c442063b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70 2]: /images/20221119/8c08445432ed4647a7d4f0f5d0cea1e1.png