重绘(repaint)和回流(reflow)

一. 首先要明确页面加载到完全渲染结束的过程,1.根据文档渲染DOM树,包括display:none的节点 2.在DOM树的基础上根据节点几何属性(margin/padding/width/height)生成render树,不包括display:none和head节点,但是包括visbility:hidden节点 3.在render树的基础上进一步渲染包括color,outline等样式

reflow:当render树中的一部分或者全部元素的规模尺寸,布局,隐藏等问题发生改变而需要重建的过程叫做回流

repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘

二. 哪些操作会引起回流?

  1.dom树结构的变化,例如添加或删除某个节点

  2.页面初始化渲染

  3.节点几何属性的变化(width,height,margin,padding变化)

  4.浏览器窗口发生-resize事件变化

  5.获取某些属性,虽然浏览器会对回流做一些优化处理,比如Opera,它会等到有足够 数量的变化发生,或者等到一定的时间,或者等一个线程结束,再一起处理,这样就只发生一次重排。但除了render树的直接变化,当获取一些属性时,浏览器为取得 正确的值也会触发回流。这样就使得浏览器的优化失效了。这些属性包括offsettop,offsetleft,offsetwidth,offsetheight,scorllTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight

三.有哪些优化的手段

  1.对于多次使用到回流节点,使用absolute和fixed使节点脱离文档流,复杂动画一定要使用absolute或者fixed使得脱离文档流

扫描二维码关注公众号,回复: 6188034 查看本文章

  2.改变样式的操作一次完成,修改一个class的name,其中包括了要修改的所有样式

  3.将元素设置为display:none,操作结束之后在显示出来,因为display:none元素上进行DOM操作不会引起回流和重绘

  4.不要经常访问浏览器flush队列属性,即不要经常使用上面提到的offsetLeft等方法,如果确实需要多次使用,就用一个变量缓存起来

  5.尽量不要使用表格,因为在没有确定一列表格宽度的时候,表格的每一列都会使用最大宽度的一列为标准渲染,如果最后渲染出来的表格宽度超过了页面的宽度,引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间

  6.避免重绘,避免使用CSS表达式(例如:calc()),避免设置多层内联样式

四.总结

  回流一定伴随重绘,重绘不一定有回流,回流消耗的性能比重绘高的多

  

猜你喜欢

转载自www.cnblogs.com/advanceCabbage/p/10843477.html