浏览器渲染页面的流程

浏览器渲染流程如下图所示：

渲染的流程如下：

1. 解析HTML文件，创建 DOM 树

　　（自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。）

2. 解析CSS文件，构建 CSSOM Tree(CSS规则树)

　　　优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3. 将CSS与DOM合并，构建渲染树（Render Tree）
4. reflow(重排)：根据Render tree进行节点信息计算（Layout）
5. repaint(重绘)：根据计算好的信息绘制整个页面（Painting）
理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排

　　JS也参与DOM 树的构建，浏览器会先执行js再开始构建渲染树。所以说：JS脚本会阻塞Render tree的构建，阻塞了页面的渲染。
我们可以在把script脚本放于body后面，来解决上面的问题。

 

 

 

重排也叫回流：实际上，reflow的字面意思也是回流，之所以有的叫做重排，也许是因为更符合中国人的思维。标准文档之所以叫做回流（Reflow）,是因为浏览器渲染是基于“流式布局”的模型，流实际就使我们常说的文档流，当dom或者css几何属性发生改变的时候，文档流会受到波动联动的去更改。

 

 

 

重绘repaint：就是当页面中元素样式的改变并不影响它在文档流中的位置时，例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称。

常见引起浏览器绘制过程的属性：

 

重排一定会引起重绘，而重绘不一定会引起重排  那如何减少重排  如下：

1.避免设置大量的style属性  style属性改变结点样式，每设置一次会触发一次reflow重排（回流）  最好使用class属性

2.position属性 最好是设为absoulte或fixe  不会影响其他布局；

3.动画实现的速度的如果太慢 以1个像素为单位移动这样最平滑 大量消耗CPU，以3个像素为单位移动则会好很多

4.不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。

标签：浏览器,reflow,渲染,重排,页面,重绘,属性
来源： https://www.cnblogs.com/yang1997/p/12104932.html