概念理解
DOM的变化影响到了元素的几何属性(宽高),浏览器重新计算元素的几何属性,其他元素的几何属性和位置也会受到影响,会影响到布局结构的情况,浏览器需要重新构造渲染树,这个过程称为重排,
浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘。如color,background-color
引起重排的原因有
- 添加或者删除可见的DOM元素,
- 元素位置、尺寸、内容改变,
- 浏览器页面初始化,
- 浏览器窗口尺寸改变,重排一定重绘,重绘不一定重排
减少重绘和重排的方法:
- 使用cssText或者className一次性改变属性
- 让要操作的元素进行”离线处理”,处理完后一起更新;
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
b) 使用display:none技术,只引发两次回流和重绘;
c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;
documentFragment的学习https://www.cnblogs.com/echolun/p/10098752.html
简单理解:documentFagment不属于真实dom树的一部分,它的改变不会导致回流,对其进行添加和删除时不回影响性能,所以可以当作一个暂时的节点储存器,当对documentFragment修改完成后,再一次性加入到dom树中,可以减少回流
- 对于多次重排的元素,如动画,使用绝对定位脱离文档流,让他的改变不影响到其他元素