浏览器的重绘和重排

此文章参考以下链接：http://www.css88.com/archives/4991

根据参考文章结合自己理解，写成适合自己理解和记忆的方式。

❤浏览器如何绘制页面？

浏览器从下载文档到显示页面的大体过程如下：浏览器引擎解析html文档来构建DOM树，之后根据DOM元素的几何属性构建渲染树，渲染树的每个节点都有大小和边距等属性，类似盒子模型（隐藏元素不需显示，故渲染树中不包含隐藏元素）。渲染树构建完成后，浏览器就可将元素放到正确位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局、渲染树的计算通常只需要遍历一边即可完成，table除外，一般情况下table及其内部元素需要多次计算（通常为3倍于同等元素的时间），因此需要避免使用table。

❤ 什么是浏览器重绘和重排？

重绘：元素外观的改变（visibility、outline或背景色改变）所触发的浏览器行为，浏览器会根据新属性重新绘制元素外观。

重排：更明显的一种改变，可以理解为渲染树需要重新计算

❤什么情况下会触发重排？ 

① 元素的几何属性发生变化，此时渲染树的相关节点会失效，浏览器需要根据变化重新构建该失效节点，并且当前元素的重排可能会引起其父元素、子元素、后续兄弟元素等一系列的相关元素的重排，性能代价很高。

② DOM树的节点变化，如增加或删减节点。由于浏览器引擎布局采取的是从上到下从左到右的过程，因此增加或删减节点的过程，通常情况下不会影响前面那些已经遍历过的元素，只会引起后续元素的重排。

③ 当通过js获取某些属性时，浏览器为了获取正确的值也会触发重排。这些属性包括：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()等。因此在使用这些信息时最好进行缓存，避免不必要的多次获取。

④改变元素的某些样式或改变窗口大小也会触发重排。

❤ 开发中如何减少重排次数和缩小重排范围？

① 将多次改变元素样式属性的操作合并成一次操作。

② 将需要多次重排的元素（如有动画的）设置为脱离文档流的元素，这样他的变化将不会影响到其他元素。

③ 异步获取到的数据需要append到html中时，等整个拼接完html片段后再一次性append到文档，而不是通过for循环多次append

④ 由于display为none的元素不会在渲染树中，因此要对某元素进行复杂操作时，可以先隐藏次元素，然后操作完成之后再显示，这样就只会在隐藏和显示时重排两次。

⑤ 通过js获取那些会触发重排的属性时要进行缓存，避免不必要的重复获取导致的多次重排。