浅谈浏览器渲染过程与重绘

一、服务器返回html/css/js是如何渲染到页面上的呢？

1、处理HTML并构建DOM树。

2、处理CSS构建CSSOM树。

3、将DOM和CSSOM合成一个渲染树。

4、根据渲染树布局，计算每个节点位置。

5、调用GPU绘制，合成图层，显示。

以chrome浏览器为例，主要流程图

1.HTML解析到script标签时，会暂停构建DOM，直到加载完成才继续构建，所以一般我们将script放在body最后边。

    defer和async不会阻塞DOM渲染，defer是按照书写顺序异步加载，async不是按照书写顺序执行，按照谁先加载完成谁执行。

    需要注意的区别

   defer属性HTML 文档解析不受影响，等 DOM 构建完成之后 defer 脚本执行，但脚本执行之前需要等待 CSSOM 构建完成。在 DOM、CSSOM 构建完毕，defer 脚本执行完成之后，DOMContentLoaded 事件触发。

    async属性HTML文档构建不受影响，解析完毕后，DOMContentLoaded 触发，而不需要等待 async 脚本执行、样式表加载等等。

2.在构建cssom树时，会阻塞渲染，直到树渲染完成。而且css选择器的规则是从右向左，如.nav li p，它会先找到页面中p标签，再往上找，所以要避免嵌套太深。

3.DOM和CSSOM组合成渲染树（render tree）

4.渲染树（layout）计算节点属性，进行GPU绘制，合成图层显示在屏幕上。

二、重绘和回流

重绘更改当前节点不会影响布局

  引起重绘的属性

回流布局或者几何属性发生改变称为回流

 引起回流的属性

 减少重绘和回流

1、对于频繁变动的元素可以使用transform 属性

2、不要在循环内获取dom 的样式

3、不要使用table 布局，因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局

4、避免css选择器过深

 

参考：https://www.jianshu.com/p/76bb929eae01 ，https://blog.csdn.net/qq_29923881/article/details/83422671