效能最佳化

影片渲染是電腦最繁重的工作負載之一。Remotion 的目標是達到與傳統影片編輯軟體相近的效能表現。您的實際體驗也取決於您撰寫的程式碼品質以及執行渲染的硬體規格。

請審閱以下效能優化建議，找出可以提升渲染速度的機會。

並行數（Concurrency）

--concurrency 旗標對渲染速度的影響可正可負——並行數過高或過低都可能適得其反。

建議使用內建的基準測試工具找出最佳值：

npx remotion benchmark

此工具會自動測試不同的並行數設定，並報告哪個值在您的機器上能達到最佳渲染速度。

GPU 效果

以下元素會使用 GPU 進行運算：

• WebGL 內容（Three.JS、Skia、P5.js、Mapbox 等）
• 2D Canvas 圖形
• GPU 加速的 CSS 屬性：
  • box-shadow
  • text-shadow
  • background-image: linear-gradient()
  • background-image: radial-gradient()
  • filter: blur()
  • filter: drop-shadow()

重要注意事項： 雲端上的運算執行個體（例如 AWS Lambda、Google Cloud Run）通常沒有 GPU，渲染這些效果可能非常耗時，形成效能瓶頸。

建議做法： 考慮將這些效果預先渲染成靜態圖片，可大幅提升效能。詳情請參閱 GPU 使用注意事項。

影片標籤

<Html5Video>（原本在 remotion 套件中稱為 <Video>）與 <OffthreadVideo> 都不是效能最佳化的標籤。Remotion 提供了一個新的 <Video> 標籤，具有最佳的效能表現。

如果您仍在使用舊版影片標籤，建議升級至新版。詳細比較請參閱影片標籤比較。

慢速 JavaScript 程式碼

Remotion 的渲染效能也可能受到您的 JavaScript 程式碼效率影響。

除錯慢速程式碼

使用 console.time() 測量操作耗時：

console.time("expensive-operation");
const result = expensiveComputation();
console.timeEnd("expensive-operation");

使用記憶化（Memoization）

善用 useMemo() 和 useCallback() 快取昂貴的計算結果：

import { useMemo } from "react";
import { useCurrentFrame } from "remotion";
 
export const MyComp = () => {
  const frame = useCurrentFrame();
 
  // 只有在 frame 變化時才重新計算
  const expensiveValue = useMemo(() => {
    return performExpensiveCalculation(frame);
  }, [frame]);
 
  return <div>{expensiveValue}</div>;
};

資料獲取（Data Fetching）

外部資料獲取可能顯著增加渲染時間。

優化建議：

• 測量每次資料獲取的耗時，找出瓶頸
• 避免過度獲取（overfetching），只請求必要的資料
• 使用 Local Storage 快取，減少重複的網路請求：

import { delayRender, continueRender } from "remotion";
 
const handle = delayRender();
 
const cached = localStorage.getItem("my-data");
if (cached) {
  continueRender(handle);
} else {
  fetch("https://api.example.com/data")
    .then((res) => res.json())
    .then((data) => {
      localStorage.setItem("my-data", JSON.stringify(data));
      continueRender(handle);
    });
}

編碼設定

不同的圖片格式與編碼器對渲染速度的影響差異顯著：

詳細的速度與品質取捨，請參閱編碼指南。

解析度

解析度越高，渲染速度越慢。如果可以接受較低的解析度輸出，使用 --scale 旗標縮小畫面：

npx remotion render MyComp out.mp4 --scale=0.5

Lambda 的特別考量

使用 Remotion Lambda 時有額外的效能優化技巧，請參閱 Lambda 速度優化指南。

測量渲染速度

• 使用 --log=verbose 渲染，查看最慢的幾幀
• 注意：執行緒中的第一批幀可能因初始化而較慢
• 使用 console.time() 測量程式碼中各操作的耗時
• 使用 npx remotion benchmark 測試不同並行數值

參見

• Lambda：速度最佳化
• GPU 使用注意事項
• 編碼指南