重绘和重排
2018-04-03 本文已影响0人
爱忽悠的唐唐在晃悠
- 什么引发重绘？
改变元素的外观，例如颜色等(无尺寸变化)。 - 什么引发重排？
- 页面初始化渲染
- 添加或者删除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)
