View Transitions 性能优化清单：重排绘制与合成层治理

View Transitions 性能优化清单：重排绘制与合成层治理概述视图过渡涉及样式计算与绘制开销。本文给出可操作的优化清单，控制重排与重绘，利用合成层减少主线程压力。关键参数/概念重排（reflow）与重绘（repaint）对动画的影响。合成层：`transform`/`opacity` 优先以 GPU 合成实现。INP：交互响应延迟需避免动画与脚本竞争主线程。实践/示例.thumb { view-transition-name: post-thumb; will-change: transform, opacity } ::view-transition-old(post-thumb), ::view-transition-new(post-thumb) { animation: fade-scale 200ms ease } @keyframes fade-scale { from { opacity: 0; transform: scale(.98) } to { opacity: 1; transform: scale(1) } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(post-thumb), ::view-transition-new(post-thumb) { animation: none } } function withTransition(run) { const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches if (reduce || !document.startViewTransition) { run(); return } document.startViewTransition(() => run()) } 优化清单使用 `transform/opacity` 实现动画，避免 `width/height/left/top`。为关键元素加 `will-change`，但避免过度使用造成内存浪费。过渡期间减少同步布局与频繁 DOM 更新。控制动画时长与缓动曲线，避免与交互事件冲突。在减少动态效果偏好下禁用动画，保证可访问性与稳定性。验证方法性能面板：观察脚本/样式/绘制占比变化。指标：比较开启与禁用优化清单的 INP/LCP。视觉：在关键路由进行截图比对，确认无抖动与闪烁。注意事项合成层创建需谨慎，过多会增加内存与合成成本。与滚动驱动动画协同时控制时间线叠加与样式覆盖。保持语义与可达性优先，动画不可替代信息表达。参考资料MDN: ViewTransition 与 `startViewTransition()`（2025-11 更新）https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransitionhttps://developer.mozilla.org/en-US/docs/Web/API/ViewTransition