> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperframes-zh.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# 表现

> 如何保持预览播放流畅并诊断昂贵的作品。

预览会实时播放您的作品，因此任何耗时超过 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 源图像已经过大了。任何高于此的费用都会支付内存和纹理上传成本，而这些成本永远不会显示在屏幕上。

```bash Terminal theme={null}
# ImageMagick one-liner to downsize a directory of images
mogrify -path resized -resize 3840x3840\> *.jpg
```

## 测量缓慢的构图

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

<Steps>
  <Step title="运行预览">
    启动预览服务器并在 Chrome 中打开它：

    ```bash Terminal theme={null}
    npx hyperframes preview
    ```
  </Step>

  <Step title="打开开发工具 → 性能">
    `Cmd+Option+I` (macOS) 或 `Ctrl+Shift+I` (Linux/Windows)，然后切换到 **性能** 选项卡。
  </Step>

  <Step title="播放时录音">
    点击录制按钮，在预览中单击“播放”，让它在容易出现卡顿的场景中运行 3-5 秒，然后停止录制。
  </Step>

  <Step title="读取主线程轨迹">
    寻找较长的任务（在时间轴中标记为红色）。展开最高的条并检查 Chrome 为它们添加的标签：

    * **复合层/绘画**具有较长的持续时间 = 合成器成本（背景滤镜、阴影、大纹理）
    * **解码图像** = 第一次绘制时进行图像解码（在 Chrome 131+ 中很少见，默认情况下图像在线程外解码）
    * **布局/重新计算样式** = 脚本中的布局抖动
    * **脚本** = JS 作品（对于作品来说很少见，请检查作者脚本）
  </Step>
</Steps>

一旦你知道哪个类别占主导地位，你就知道要改变什么。

<Tip>
  单独以 60 fps 运行但仅在特定场景中卡顿的合成通常是合成成本问题。检查哪些图层在这些场景中变得可见。
</Tip>

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

有些作品对于实时播放来说确实太昂贵了。如果您已经减少了能做的，但预览仍然卡顿，渲染到 mp4 并观察输出是一个很好的工作流程 — 渲染仍然准确。

```bash Terminal theme={null}
npx hyperframes render --quality draft --output preview.mp4
```

草稿质量渲染速度很快，并且除了编码器级细节之外的所有内容在视觉上都接近最终渲染。

## 下一步

<CardGroup cols={2}>
  <Card title="故障排除" icon="wrench" href="/guides/troubleshooting">
    环境、工具和渲染问题
  </Card>

  <Card title="常见错误" icon="triangle-exclamation" href="/guides/common-mistakes">
    破坏渲染的合成陷阱
  </Card>

  <Card title="渲染" icon="film" href="/guides/rendering">
    渲染模式、选项和标志
  </Card>

  <Card title="CLI 参考" icon="terminal" href="/packages/cli">
    CLI 命令的完整列表
  </Card>
</CardGroup>