待解决

• how to display fps in <iframe>?

• why droped frame by GPU thread will result in flicker issue

实测

• 测试页面：xx

• 缩放页面：150%

• Behavior：可以看到有掉帧，前置帧绘制超过 16.7ms

• - Normal --

• - 20x cpu slow --

• - no gpu accelerate --

Notes

利用 Chrome Devtools 调试 Performance

• Rendering 包含 Style 计算 + Layout

• Painting 包含 Paint + Composite

devtools里 Rendering 和 Painting 时间对应事件：

‣

非动画优化

Animation 专题

Chrome Animation Topics

【Articles】CSS vs JS in animation

• CSS-based animations, and Web Animations where supported natively, are typically handled on a thread known as the "compositor thread". This is different from the browser's "main thread", where styling, layout, painting, and JavaScript are executed. This means that if the browser is running some expensive tasks on the main thread, these animations can keep going without being interrupted.

• Other changes to transforms and opacity can, in many cases, also be handled by the compositor thread.

• If any animation triggers paint, layout, or both, the "main thread" will be required to do work. This is true for both CSS- and JavaScript-based animations, and the overhead of layout or paint will likely dwarf any work associated with CSS or JavaScript execution, rendering the question moot.

1. CSS animation vs requestAnimationFrame()

Tracing

Reference

• INP - web.dev

• Article - 渲染性能

• Article - 如何优化动画（Animation）性能

• Article - RAIL 模型

• https://web.dev/explore/metrics?hl=zh-cn

• Chrome 光栅化