DOM & BOM – Browser Reflow & Repaint

前言

没有深入研究过, 懂个概念就好, 等性能遇到问题在来看看.

以前写的笔记: 

参考:

reflow和repaint引发的性能问题

Reflow & Repaint

repaint 是小的, 性能没有那么伤, 它只是换换颜色之类的.

reflow 是大的, 伤性能, 它会更动到排版布局.

所有插入 dom, 修改 dimension, padding 这类影响 layout 的东西都会导致 reflow.

translate 不会哦, positioin fixed 这种就 ok. 或者说它可以优化. 只是上层渲染, 不会影响整棵树.

when render ?

当 JS 修改 DOM 时, 游览器并不是马上就渲染的, 它会有一个 timing. 

通过 requestanimationframe 可以监听到它渲染了没有. 它不定时的, 依据各种 CPU / GPU 繁忙程度之类的去决定.

所以呢, 可能 JS 修改了多个属性, 但是其实游览器是一次性 reflow, repaint 的.

getBoundingClientRect & window.getComputedStyle

有传言说 getBoundingClientRect 和 getComputedStyle 会导致 reflow.

以前我都不太敢用, 后来才明白它的意思是.

如果 JS 修改了 DOM, 在游览器还没有决定什么时候渲染前, JS 又调用了 getBoundingClientRect.

那么游览器就必须马上去渲染, 这样才能给出准确的 rect. 所以说调用后就会 reflow.

但前提是游览器有需要渲染的东西而它还没有执行. 一旦执行了渲染, 你连续调用 100 次 getBoundingClientRect 它也不会去 reflow 了.

它怎么可能这么蠢呢. 是我以前蠢.. 哈哈