关于重排与重绘

重绘不一定需要重排，比如改变某个页元素的颜色，就会只会触发重绘，不会触发重排，因为布局没有改变，但是，重排必然会导致重绘，比如改变一个网页元素的位置

每个页面至少在初始化的时候会有一次重排操作。任何对渲染树的修改都有可能会导致下面两种操作：

1，重排
就是渲染树的一部分必须要更新 并且节点的尺寸发生了变化。这就会触发重排操作。

2，重绘
部分节点需要更新，但是没有改变他的集合形状，比如改变了背景颜色，这就会触发重绘。

浏览器下载完页面中的所有组件(html标记、Javascript、CSS、图片)之后会解析生成两个内部数据结构——DOM树和渲染树。

DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素 display:none 在渲染树中没有对应的节点)

当DOM的变化影响了元素的几何属性(宽或高)，浏览器需要重新计算元素的几何属性，同时其他元素的几何属性和位置也会受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树，这个过程称为重排。完成重排后，浏览器会重新绘制受到影响的部分到屏幕，这个过程称为重绘。

重排的发生：

1.添加或删除可见的DOM元素

2.元素尺寸改变

3.元素的位置改变

4元素的内容改变

5页面渲染初始化

6浏览器窗口尺寸

避免重排重绘带来的性能消耗：

1.尽量不要在布局信息改变时候做查询

2尽量不要把读操作和写操作放在一个句子里

3同一个Dom的多个属性改变可以写在一起

4如果要批量添加DOM，可以先让元素脱离文档流（display：none），操作结束后再带入文档流，这样就会只触发两次重排（隐藏和显示时）

5.将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离文档流，它的变化就不会影响到其他元素

6。在需要经常取那些引起浏览器重排的属性值时，要缓存到变量

 

有待完善。。