day209-repaint和reflow扫盲

要点

  1. 介绍
  2. 引起XX的常见操作
  3. 优化

介绍

浏览器重新渲染,就需要重新生成布局和重新绘制。前者叫做”回流”(reflow,又叫重排,英文也叫Layout),后者叫做”重绘”(repaint)。

元素样式的改变不影响布局, UI 层面的重新像素绘制,重绘对元素进行更新 —— 重绘(repaint)
重新渲染页面 —— 回流(reflow)

常见原因

常见的reflow操作:

  1. 页面初次渲染,浏览器窗口大小改变
  2. 元素尺寸/位置/内容发生改变
  3. css伪类

    offsetTop/offsetLeft/offsetWidth/offsetHeight/offsetParent

clientTop/clientLeft/clientWidth/clientHeight

scrollTop/scrollLeft/scrollWidth/scrollHeight

getComputedStyle()/getClientRects()/getBoundingClientRect()

常见的repaint操作:

css属性的改变。

具体见CSS Triggers https://csstriggers.com/ 这里列出了哪些属性会引起reflow(即Layout)或repaint。

优化

  • rAF等
    使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染

  • FASTDOM (Eliminates layout thrashing by batching DOM measurement and mutation tasks
    )

    自动完成读写操作的批处理

参考

如何不择手段提升scroll事件的性能—知乎

网页性能管理详解—阮一峰

文章作者: lmislm
文章链接: http://lmislm.com/2019/08/10/2019-08-10/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog