安装npx shadcn@latest add https://motion-lexicon.pages.dev/r/primitive-compositing.json
- 目的
- 比较合成友好属性与触发布局或绘制的属性,选择稳定的渲染路径。
- 触发
- 由属性选择或性能实验触发,同时记录主线程、布局、绘制和合成活动。
- 可中断性
- 测试可中断并重置图层状态,will-change 只在需要前短暂启用。
- 减弱动效
- 低动态模式仍优先 transform 和 opacity,并减少持续图层占用。
compositing合成合成会把已绘制的图层组合成最终画面;独立图层上的 transform 或 opacity 更新可跳过布局,并可能跳过重绘。
will-changewill-change一种 CSS 渲染提示,告知浏览器某项属性即将变化,以便浏览器按需提前准备优化。
layout-thrashing布局抖动交替读取布局信息并写入样式,会反复触发同步布局计算并耗尽帧预算。
hardware-acceleration硬件加速符合条件的视觉更新可利用合成线程和 GPU 资源,帮助画面赶上显示刷新期限。