重绘和重排

重绘

1 .元素外观的改变所触发的浏览器行为，例如改变vidibility,outline，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，重绘不会带来重新布局，并不一定伴随重排
2 .

重排

1 .渲染树需要重新计算
2 .dom元素的几何变化，渲染树中的相关节点就会失效。浏览器会根据DOM元素的变化重建渲染树中失效的节点，之后会根据新的渲染树重新绘制这部分页面。
3 .当前元素的重排也会带来相关元素的重排,容器节点渲染树改变时，也会触发子节点的重新计算，也会触发其后续兄弟节点的重排，祖先节点需要重新计算子节点的尺寸也会产生重排
4 .dom元素的结构变化。当树的结构变化时，节点的增减，移动也会触发重排。
5 .浏览器殷勤布局的过程，类似于树的前序遍历，是一个从上到下，从左到右的过程。通常这个过程中，当前的元素不会在影响前面已经遍历过的元素。所以，如果在body最前面插入一个元素，会导致整个文档的重新渲染，但是在最后插入一个元素，则不会影响到前面的元素.所以插入元素的时候可以这样
6 .获取某些属性：浏览器可能会对重排做了优化，会等到足够数量的变化发生，或者等到一定的时间，或者等一个线程结束，在一起处理，这样就只发生一次重排。但是你需要获取一些值的时候，浏览器为取得正确的值也会触发重排，这样使的浏览器的优化失效了。

1 .所以获取这些值的时候需要进行缓存
2 .offsetTop,offsetLeft,offsetWidth,offSetHeight,scrollTop,scrollLeft

7 .改变元素的一些样式，调整浏览器窗口大小等也将触发重排。
8 .当浏览器发现某个部分发生了变化影响到了布局，需要重新回去渲染，这个回退的过程叫做reflow
9 .元件的集合尺寸变了，我们需要重新验证并计算render tree，是render tree的一部分或全部发生了，需要重新layout
10 .

优化策略

1 .将多次改变样式属性的操作合并成一次操作。那就是以后尽量都是操作class，在vue里面最好不要使用:style属性。都是操作class就可以了
2 .将多次重排的元素设为absolute或者fixed，这样元素就脱离了文档流，他的变化不会影响到其他元素，比如有动画效果的元素
3 .在内存中多次操作节点，完成之后在添加到文档中去。例如要获取异步表格，渲染到页面里面，可以先取得数据后在内存中构建整个表格的html片段，在一次性的添加到文档中去，而不是循环添加每一行
4 .由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂操作时，可以先隐藏他，操作完成之后在显示，这样只会在影藏和显示的时候触发2次重排。
5 .在需要经常取的，引起浏览器重排的属性值时，要缓存到变量
6 .图片载入的时候设置宽高
7 .把dom离线之后修改

1 .使用documentFragment对象在内存里操作DOM
2 .先把dom给display，然后在自由修改，修改完成之后显示出来
3 .clone一个dom节点到内存里面，然后想怎么改就怎么改，改完之后，和在线的那个交换一下
4 .不要把dom节点的属性值放在一个循环里面当成循环里面的变量，这样会导致大量的读写这个节点的属性
5 .不要使用表格布局，因为任何微小的改变都会造成reflow

8 .repaint过程利用了对比渲染前后的矩形，找出差异并且重新局部绘制差异部分。如果绘制出现了破坏缓存的情况，也会出现全局repaint的情况。

利用chrome查看重排和重绘的性能

1 .