页面性能优化（一）

DOM操作会影响性能

　　修改DOM元素会导致重绘或重排

　　重绘：是指一些像是的修改，元素的位置和大小尺寸没有改变；

　　重排：是指元素的位置或尺寸发生了变化，浏览器需要重新计算渲染树，对元素进行重新的排列并且重绘受影响的元素。

　　页面重绘的速度比重排的速度读要快得多，在页面交互中要尽量避免页面的重排操作。浏览器不会再JS执行时更新DOM，而是把需要对DOM的操作放入一个队列中，等DOM元素渲染后再执行队列中的操作，因此在JS执行过程中用户一直被阻塞。

　　页面渲染过程：JavaScript=>Style=>Layout=>Paint=>Composite

　　　　JavaScript:通过js来制作动画效果或者操作DOM实现交互效果

　　　　Style:计算样式，如果元素样式有变，在这一步要重新计算样式，并匹配到对应的DOM上

　　　　Layout:根据上一步的DOM样式规则，重新进行布局（重排）

　　　　Paint:在多个渲染层上，对新的布局进行重绘

　　　　Composite:将绘制好的多个渲染层合并，显示到屏幕上

 

　　导致页面重排的操作：

　　　　1）内容改变  

　　　　　　　　文本或图片大小改变

　　　　2）DOM元素的几何属性变化

　　　　　　　　就是上文说的改变DOM元素宽高值。如果父元素的几何属性变化，会使其子节点及后续兄弟节点重新计算位置，造成一系列重排

　　　　3）DOM树结构变化

　　　　　　　　添加、删除、修改DOM元素节点都是对DOM树的修改，都会使页面重排。浏览器布局是从上到下的，修改当前的元素不会对上面已遍历过的元素造成影响。

　　　　4）获取某些属性

　　　　　　　　比如offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft等

　　　　5）浏览器窗口尺寸改变

　　　　　　　　窗口尺寸改变会影响整个网页元素的尺寸改变。

　　导致页面重绘的操作：

　　　　1）新的样式或影响元素外观的属性

　　　　2）重排一定会导致重绘