chrome开发者工具中如何区分reflow和repaint?

Mpl*_*yBy 5 frontend repaint reflow

如何区分重绘

\n\n
\n

当对影响可见性但不影响布局的元素进行更改时,就会发生重绘。例如,不透明度、背景颜色、可见性和轮廓。\n 重新绘制的成本很高,因为浏览器\n 必须检查 DOM \xe2\x80\x94 中所有其他节点的可见性,一个或多个\n 可能已在更改的元素下方变得可见。

\n
\n\n

回流焊

\n\n
\n

回流焊的影响更大。这是指重新计算所有元素的位置和尺寸,从而导致重新渲染部分或全部文档。更改单个元素可能会影响所有子元素、祖先元素和兄弟元素。

\n
\n\n

使用 chrome 开发者工具(或其他类似工具)?

\n\n

在 Chrome 性能选项卡中,我只看到重新绘制。\n重新绘制

\n