- 什么引发重绘?
改变元素的外观,例如颜色等(无尺寸变化)。 - 什么引发重排?
- 页面初始化渲染
- 添加或者删除dom节点
- 改变元素位置
- 改变元素尺寸(如padding、margin)等
- 改变元素内容(文本或者图片)
- 改变窗口尺寸
- 开发中如何减少重排次数和缩小重排范围?
1、改变元素的样式合并成一次操作,即样式集中改变(可以将每次的style改成添加class,或者用cssText)
2、将元素的display设置成‘none'或者position:absolute,脱离文档流
3、异步获取的数据如果需要append,我们需要将这些内容先拼接成html片段,再一次性append到文档中。或者使用documentFragment(如ul中循环添加大量li )
4、读写分离。(渲染队列)
5、将会触发重排的属性进行缓存。
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle() (currentStyle in IE)
网友评论