如何理解浏览器的回流与重绘

一、浏览器渲染过程

1.浏览器会开启两条线程，一条渲染UI层（即html标签和css样式），一条渲染JavaScript脚本；

2.浏览器会将html标签渲染成一个DOM树，每个标签都是一个节点，挂载到根节点document上；

3.浏览器会把css样式解析成一个样式结构体，并且会去掉浏览器不能识别的样式，如通常设置的一些浏览器前缀-moz-、-webkit-、-o-、-ms-。

4.DOM树和样式结构体结合之后就会生成render树，render树就是带有样式的DOM树，但是不包含隐藏的元素。

5.虽然开启了两条线程，但一般渲染UI层的时候，JS线程会停止，反之渲染脚本的时候，UI线程会停止。这是因为JS中难免会遇到修改样式的脚本，所以UI层会重新渲染，在这个过程中，浏览器会不断的回流与重绘。

二、浏览器的回流与重绘

浏览器的回流与重绘就像在样本间看精装修的房子。

1.回流：

当DOM元素发生了宽高尺寸变化，布局变化，隐藏与否变化，就会导致页面重新构建，这就是回流。

回流操作主要有盒子模型、定位、改变文字结构等，常见的回流操作有：

width | height | margin | padding | border | display | overflow

top | bottom | left | right | position | float

font-size | font-family | font-weight | text-align | vertival-align | line-height | white-space

2.重绘：

当DOM元素外观风格发生变化，就是重绘，常见的重绘操作有：

color | background | border-radius | visibility | border-radius | outline | box-shadow | text-decoration

3.总结：

回流必定触发重绘，而重绘不一样引发回流。有一个很好的方式区分回流还是重绘，看过房子的人在面对精装修的房子一般会有一个问题，在看样板间的时候很难区分哪些是交房的时候已经装修好的，哪些不是，有句玩笑话是搬不动的就是已经装修完成的（交房的时候）。这种情况用在浏览是回流还是重绘的理解上很到位。回流指的是会影响空间、格局，而重绘指的是外观、色彩、填充、装饰。所以这就是为什么回流会影响性能，设想只是换个沙发桌子很容易，直接网购，送货人都可以帮你安装好。如果交房的时候水电系统有问题，需要重新安装，那无疑是个大工程。看，程序就是生活。