DOM操作对页面性能的影响(重排和重绘)

DOM操作对页面性能的影响

（1）DOM的修改会导致重排和重绘

重排是指元素的位置或者大小发生了改变，浏览器需要重新去计算渲染树，新的渲染树建立之后，浏览器会重新绘制所影响的元素

重绘是指元素的样式发生了变化，而大小和尺寸没有发生改变

（2）导致页面重排的一些操作

• 内容改变：文本改变(包括字体大小)或者图片的尺寸改变
• DOM元素的几何属性改变：元素的宽高改变时，原来渲染树中的DOM节点会失效，浏览器会根据DOM的变化重新构建渲染树中的相关节点。如果父元素的几何属性发生变化时，会导致子元素以及兄弟元素的位置发生变化，从而引起重排。
• DOM树结构发生变化：添加DOM节点，修改DOM节点的位置以及删除某个节点都会对渲染树进行修改，从而导致重排。浏览器的布局是自上而下的，修改当前元素不会都之前的元素造成影响，但是会对之后的元素造成影响，导致重排。
• 获取某些属性时：当获取一些属性值时，浏览器为了保证获取到正确的值也会引起重排。如元素的offsetTop，offsetLeft，offsetHeight，offsetWidth，scrollTop，scrollWidth，scrollLeft，scrollHeight、
• 浏览器窗口尺寸发生改变时：浏览器窗口的尺寸发生改变时，会导致所有元素的尺寸发生变化，从而导致重排。
• 页面初始化、页面第一次渲染时

（3）导致页面重绘的一些操作

只修改元素的样式，而未修改元素的大小和位置，引起重绘

重排一定引起重绘，而重绘不一定引起重排