性能提示
视频渲染是计算机可能承担的最繁重的工作负载之一。Remotion 至少旨在表现与传统视频编辑程序类似。
您的体验还取决于您的代码和运行代码的硬件。查看以下性能见解,找到加快渲染速度的机会。
并发性
您设置的 --concurrency
标志可以积极或消极地影响渲染速度。并发性过高和并发性过低都可能产生负面影响。使用 npx remotion benchmark
命令找到最佳并发性。
GPU 效果
以下元素使用 GPU:
- WebGL 内容(Three.JS、Skia、P5.js、Mapbox 等)
- 2D 画布图形
- GPU 加速的 CSS 属性,如
box-shadow
、text-shadow
、background-image: linear-gradient()
、background-image: radial-gradient()
、filter: blur()
、filter: drop-shadow()
云中的计算实例没有 GPU,可能需要很长时间来渲染这些效果,导致瓶颈。
考虑用预先计算的图像替换这些效果以获得最佳性能。
阅读有关使用 GPU 的注意事项。
视频
对于嵌入视频,有一种替代组件 <OffthreadVideo>
可以加快渲染速度。查看 <Video>
vs. <OffthreadVideo>
无论使用哪种组件,嵌入视频目前在 Remotion 中可能是一个重要瓶颈。我们意识到这一限制,并鼓励用户将 Remotion 与其他工具(如 FFmpeg)结合使用以构建高效的流水线。
我们还正在努力通过在未来的更新中使 <OffthreadVideo>
组件更加高效来缓解这个问题。
JavaScript 代码运行缓慢
Remotion 也可能受到您的代码引入的 JavaScript 瓶颈的影响。调试您的渲染并记录时间信息 以找到代码中运行缓慢的部分。
使用useMemo()
和useCallback()
进行记忆化,以便在适当的情况下缓存昂贵的计算。
数据获取
测量获取外部资源的影响,探测过度获取并尝试最小化获取外部数据。
如果可能的话,使用本地存储中的缓存来减少在网络上花费的时间。
编解码器设置
- 如果设置图像格式为
png
,则比jpeg
慢。但是,如果要渲染透明视频,则需要png
。 - WebM 编解码器
vp8
和vp9
在编码时非常慢,因为压缩更强。
另请参阅编码指南,了解在编码速度方面的所有权衡。
分辨率
更高的分辨率会使渲染变慢。如果可以接受较低的分辨率,请使用 --scale
缩小图片。
Lambda 注意事项
请参阅此文章,了解专门针对 Lambda 的提示。
测量渲染速度
-
使用
--log=verbose
进行 Remotion 渲染的最慢帧列表。请注意,由于初始化,线程中渲染的前几帧可能会很慢。 -
使用
console.time
来测量代码中操作所需的时间,以找出渲染中的慢部分。 -
使用
npx remotion benchmark
尝试不同的--concurrency
值,以找到最佳值。