Chrome

Performance

Summary

Loading ：加载时间
Scripting ：js计算时间
Rendering ：渲染时间
Painting ：绘制时间
Other ：其他时间
Idle ：浏览器闲置时间
image.png

layout, paint, and composite

在浏览器的执行计时中，Rendering与Painting属于内部机制，执行关于css，内容变化导致的重排重绘等操作，大致如下。
https://developer.mozilla.org/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#the_css_rendering_waterfall
(Rendering)Recalculate Style
(Rendering)Update Layer Tree: reflow
(Rendering)Hit Test: https://www.chromium.org/developers/design-documents/compositor-hit-testing
(Painting)Paint
(Painting)Composite Layers
image.png

  1. Recalculate Style: every time a CSS property for an element changes, the browser must recalculate computed styles.
  2. Layout: next, the browser uses the computed styles to figure out the position and geometry for the elements. This operation is labeled “layout” but is also sometimes called “reflow”.
  3. Paint: finally, the browser needs to repaint the elements to the screen. One last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called “Composition”.

Composite Layers