Skip to content

Latest commit

 

History

History
41 lines (34 loc) · 1.31 KB

reflow-vs-repaint.md

File metadata and controls

41 lines (34 loc) · 1.31 KB

重绘和回流

  • 发生在浏览器解析 DOM Tree 过程中
  • 回流Reflow计算每一个可见(visible)元素的大小和位置,回流也称布局layout
  • 重绘Repaint把每个像素(pixels)绘制到屏幕上

回流(Reflow)

  • position 位置
  • font-size 字体
  • width,height 大小
  • float 浮动
  • 页面新增和删除节点

上述属性发生变化,可能会引起其该节点的父节点,子节点,兄弟节点,甚至是整个文档的重新布局

重绘(Repaint)

  • color
  • outline
  • backgound
  • visibility
  • opactiy

其中一个发生改变就会引起重绘

优化

  • 不要用多条语句来改变样式,取而代之classcssText
  • 批量DOM离线更新
    • docuemntFragment
    • cloneNode节点,再更新节点,最后替换replace
    • display:none(1 Repaint & 1 Reflow),积累 100 个更新后,再恢复display,总共2 Repaint,2 Reflow
  • 不要重复读取计算样式(computed styles),先缓存在读取
  • 开启GPU加速
    • transform
    • filter
    • opacity
    • will-change

代码参考

参考