性能提示
视频渲染是计算机可以承受的最繁重的工作之一。Remotion 旨在至少与传统视频编辑程序的表现相当。
🌐 Video rendering is one of the most heavy workloads a computer can take on. Remotion aims to at least perform similarly than traditional video editing programs.
你的体验还取决于你的代码和运行它的硬件。请查看以下性能见解，以寻找加快渲染的机会。
🌐 Your experience is also dependent on your code and the hardware you run it on. Review the following performance insights to find opportunities for speeding up your render.
并发
🌐 Concurrency
你设置的 --concurrency 标志可以对渲染速度产生正面或负面的影响。并发过高或过低都可能适得其反。使用 npx remotion benchmark 命令来找到最佳并发度。
🌐 The --concurrency flag you set can influence the rendering speed both positively and negatively. A concurrency too high and a concurrency too low can both be coutnerproductive. Use the npx remotion benchmark command to find the optimal concurrency.
GPU 效果
🌐 GPU effects
以下元素使用GPU：
🌐 The following elements use the 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，渲染这些效果可能需要很长时间，从而导致瓶颈。
🌐 Compute instances in the cloud do not have a GPU and may take a long time to render these effects, leading to bottlenecks.
考虑用预先计算好的图片替换这些效果以获得最佳性能。
🌐 Consider replacing those effects with a precomputed image for the best performance.
阅读有关使用 GPU 的注意事项。
🌐 Read the considerations about using the GPU.
视频
🌐 Videos
[<Html5Video>（以前仅称为<Video>，来自remotion包）]和<OffthreadVideo>都没有经过优化。
🌐 Both [<Html5Video> (formerly just called <Video>, from the remotion package)] and <OffthreadVideo> are not optimized.
我们创建了一个新的<Video>标签，具有最佳性能。如果你仍在使用旧的视频标签，建议考虑使用它。
🌐 We made a new <Video> tag that has the optimal performance. Consider using it if you are still using one of the old video tags.
参见：视频标签比较
🌐 See: Comparison of video tags
慢速的 JavaScript 代码
🌐 Slow JavaScript code
Remotion 也可能受到你代码中引入的 JavaScript 瓶颈的影响。调试你的渲染并记录时间信息 以查找代码中较慢的部分。
🌐 Remotion can also suffer from JavaScript bottlenecks that are introduced in your code. Debug your render and log timing information to find slow parts of your code.
在适当的地方使用 useMemo() 和 useCallback() 进行记忆化，以缓存高开销的计算。
🌐 Use memoization using useMemo() and useCallback() where appropriate to cache expensive computation.
数据获取
🌐 Data fetching
衡量 获取外部资源的影响，探查是否存在过度获取，并尝试尽量减少外部数据的获取。
如果可能，使用本地存储中的缓存以减少网络花费的时间。
🌐 Use caching in Local storage if possible to reduce time spent on networking.
编解码器设置
🌐 Codec settings
- 如果你设置图片格式为
png，它比jpeg慢。然而，如果你要渲染透明视频，则需要png。 - 由于压缩更强，WebM 编解码器
vp8和vp9的编码速度非常慢。
另请参阅编码指南，以了解在编码速度方面的所有权衡。
🌐 See also the Encoding guide to see all tradeoffs when it comes to encoding speed.
决议
🌐 Resolution
更高的分辨率会使渲染变慢。如果你可以接受较低的分辨率，请使用 --scale 缩小图片
🌐 Higher resolutions will make the render slower. If you can live with a lower resolution, scale down the picture using --scale
Lambda 的注意事项
🌐 Considerations for Lambda
请参阅 这篇文章 以获取专门针对 Lambda 的技巧。
🌐 See this article for tips specifically for Lambda.
测量渲染速度
🌐 Measuring render speed
- 使用
--log=verbose渲染以列出 Remotion 渲染中最慢的帧。请注意，由于初始化，线程中最先渲染的帧可能会较慢。 - 使用
console.time来测量代码中一个操作所花费的时间，以找出渲染中较慢的部分。 - 使用
npx remotion benchmark尝试不同的--concurrency值以找到最佳值。
另请参阅
🌐 See also