Skip to main content
预览会实时播放您的作品，因此任何耗时超过 33 毫秒（30 fps）的帧都会显示为卡顿。本页介绍了超出预算的模式以及如何发现它们。

​
预览与渲染

渲染一次捕获一帧并将它们拼接成视频。慢帧使渲染时间更长，但您永远不会看到暂停 - 您会看到完成的 mp4。 预览实时执行相同的工作。如果绘制一帧需要 200 毫秒，您会看到 200 毫秒的冻结。 这就是为什么“渲染看起来不错，预览时断断续续”对于油漆较多的合成来说是预期的。这并不意味着预览被破坏了——这意味着单个帧对于实时播放来说太昂贵了。

​
昂贵的 CSS 模式

这些模式最常导致预览速度低于 30 fps。

​
背景过滤器：blur()

在大面积上采样的每个 backdrop-filter: blur(radius) 都会强制合成器从元素后面读取像素，在它们上运行模糊内核，然后合成结果。成本与模糊区域和半径成比例。 堆叠的模糊层会增加成本。半径逐渐变大的八层（1、2、4、8、16、32、64、128 像素）在中层 GPU 上的 1920x1080 区域中每帧将花费 200 毫秒。 该怎么办：
  • 将堆叠层数保持在最多 2-3 层，并手动调整半径
  • 避免大面积使用 blur(128px) 或 blur(64px) — 最大半径决定成本
  • 对于静态模糊，将其渲染为 PNG 并使用常规 <img> 叠加层

​
过滤器：blur() 和过滤器：drop-shadow()

与 backdrop-filter 相同的故事，但应用于元素本身而不是其后面。对于小元件来说很好，对于大元件来说价格昂贵。

​
许多元素上的阴影

少数元素上的 box-shadow 和 text-shadow 没问题。在数十个同样具有动画效果的元素上，合成器会重新光栅化每一帧上的每个阴影层。

​
带有掩模图像的大梯度

与 backdrop-filter 结合使用，mask-image 可以强制执行额外的合成器通道。如果同一个元素上有这两个，请考虑是否需要两者。

​
图像尺寸调整

图像源分辨率比文件大小更重要。 Chrome 在显示 JPEG 和 PNG 之前将其解码为原始 RGBA 位图 - 解码后的位图是： 
bitmap_bytes = width × height × 4
无论磁盘上的 JPEG 是 2MB 还是 5MB，7000×5000 的源图像解码后的大小为 140MB。 经验法则： 将源图像大小调整为最多 2 倍画布尺寸。对于 1920x1080 画布，3840x2160 源图像已经过大了。任何高于此的费用都会支付内存和纹理上传成本，而这些成本永远不会显示在屏幕上。
Terminal
# ImageMagick one-liner to downsize a directory of images
mogrify -path resized -resize 3840x3840\> *.jpg

​
测量缓慢的构图

不要猜测——测量。 Chrome 开发者工具拥有您所需的一切。
1

运行预览

启动预览服务器并在 Chrome 中打开它：
Terminal
npx hyperframes preview
2

打开开发工具 → 性能

Cmd+Option+I (macOS) 或 Ctrl+Shift+I (Linux/Windows)，然后切换到 性能 选项卡。
3

播放时录音

点击录制按钮，在预览中单击“播放”，让它在容易出现卡顿的场景中运行 3-5 秒，然后停止录制。
4

读取主线程轨迹

寻找较长的任务（在时间轴中标记为红色）。展开最高的条并检查 Chrome 为它们添加的标签：
  • 复合层/绘画具有较长的持续时间 = 合成器成本（背景滤镜、阴影、大纹理）
  • 解码图像 = 第一次绘制时进行图像解码（在 Chrome 131+ 中很少见，默认情况下图像在线程外解码）
  • 布局/重新计算样式 = 脚本中的布局抖动
  • 脚本 = JS 作品（对于作品来说很少见，请检查作者脚本）
一旦你知道哪个类别占主导地位，你就知道要改变什么。
单独以 60 fps 运行但仅在特定场景中卡顿的合成通常是合成成本问题。检查哪些图层在这些场景中变得可见。

​
当预览速度不可避免地变慢时

有些作品对于实时播放来说确实太昂贵了。如果您已经减少了能做的，但预览仍然卡顿，渲染到 mp4 并观察输出是一个很好的工作流程 — 渲染仍然准确。
Terminal
npx hyperframes render --quality draft --output preview.mp4
草稿质量渲染速度很快，并且除了编码器级细节之外的所有内容在视觉上都接近最终渲染。

​
下一步

故障排除

环境、工具和渲染问题

常见错误

破坏渲染的合成陷阱

渲染

渲染模式、选项和标志

CLI 参考

CLI 命令的完整列表