Web 渲染器

為 Flutter Web 應用選擇構建模式和渲染器。

Flutter Web 提供兩種構建模式和兩種渲染器。兩種構建模式分別是預設 (default) 和 WebAssembly，兩種渲染器分別是 canvaskit 和 skwasm。

Flutter 在構建應用時選擇構建模式，並在執行時確定可用的渲染器。

對於預設構建，Flutter 在執行時選擇 canvaskit 渲染器。對於 WebAssembly 構建，Flutter 在執行時會選擇 skwasm 渲染器；如果瀏覽器不支援 skwasm，則會回退到 canvaskit。

當使用 flutter run 或 flutter build web 命令且不傳遞 --wasm，或者傳遞了 --no-wasm 時，Flutter 會選擇預設模式。

此構建模式僅使用 canvaskit 渲染器。

要在 Chrome 中使用預設構建模式執行

flutter run -d chrome

要使用預設構建模式構建生產環境應用

flutter build web

透過向 flutter run 和 flutter build web 命令傳遞 --wasm 即可啟用此模式。

此模式使 skwasm 和 canvaskit 均可用。skwasm 需要 WasmGC，並非所有現代瀏覽器都支援。因此，在執行時，如果支援垃圾回收，Flutter 會選擇 skwasm，否則會回退到 canvaskit。這使得以 WebAssembly 模式編譯的應用仍能在所有現代瀏覽器中執行。

--wasm 標誌不支援非 Web 平臺。

要在 Chrome 中使用 WebAssembly 模式執行

flutter run -d chrome --wasm

要使用 WebAssembly 模式構建生產環境應用

flutter build web --wasm

Flutter 有兩種渲染器（canvaskit 和 skwasm），它們重新實現了用於在瀏覽器中執行的 Flutter 引擎。渲染器將 UI 原語（儲存為 Scene 物件）轉換為畫素。

canvaskit 渲染器與所有現代瀏覽器相容，也是預設構建模式中使用的渲染器。

它包含一份編譯為 WebAssembly 的 Skia 副本，這會增加約 1.5MB 的下載大小。

skwasm 渲染器是 Skia 的一個更緊湊版本，它被編譯為 WebAssembly 並支援在獨立執行緒上進行渲染。

此渲染器必須與 WebAssembly 構建模式配合使用，該模式將 Dart 程式碼編譯為 WebAssembly。

要利用多執行緒，Web 伺服器必須滿足 SharedArrayBuffer 安全要求。在此模式下，Flutter 使用專門的 Web Worker 將部分渲染工作負載解除安裝到單獨的執行緒，從而利用多個 CPU 核心。如果瀏覽器不滿足這些要求，skwasm 渲染器將以單執行緒配置執行。

此渲染器包含一份更緊湊的、編譯為 WebAssembly 的 Skia 版本，增加了約 1.1MB 的下載大小。

預設情況下，在 WebAssembly 模式下構建時，Flutter 會決定何時使用 skwasm 以及何時回退到 canvaskit。這可以透過向載入器傳遞配置物件來覆蓋，如下所示：

使用 --wasm 標誌構建應用，使 skwasm 和 canvaskit 渲染器對應用均可用。
按照編寫自定義 flutter_bootstrap.js 中的說明設定自定義 Web 應用初始化。
準備一個配置物件，並將 renderer 屬性設定為 "canvaskit" 或 "skwasm"。
將準備好的配置物件作為 config 屬性傳遞給之前注入程式碼所提供的 _flutter.loader.load 方法的新物件中。

示例

html

<body>
  <script>
    {{flutter_js}}
    {{flutter_build_config}}

    // TODO: Replace this with your own code to determine which renderer to use.
    const useCanvasKit = true;

    const config = {
      renderer: useCanvasKit ? "canvaskit" : "skwasm",
    };
    _flutter.loader.load({
      config: config,
    });
  </script>
</body>

呼叫 load 方法後，無法更改 Web 渲染器。因此，任何關於使用哪種渲染器的決定都必須在呼叫 _flutter.loader.load 之前做出。

要將 Dart 編譯為 WebAssembly，您的應用及其外掛/包必須滿足以下要求：

使用新的 JS Interop - 程式碼必須僅使用新的 JS 互操作庫 dart:js_interop。舊式的 dart:js、dart:js_util 和 package:js 不再受支援。
使用新的 Web API - 使用 Web API 的程式碼必須使用新的 package:web 而不是 dart:html。
數字相容性 - WebAssembly 實現 Dart 的數字型別 int 和 double 的方式與 Dart VM 完全相同。在 JavaScript 中，這些型別是使用 JS Number 型別模擬的。如果您的程式碼意外或有意依賴 JS 的數字行為，則需要更新此類程式碼以確保其與 Dart VM 的行為一致。

使用以下建議來決定使用哪種模式：

包支援 - 如果您的應用依賴於尚未支援 WebAssembly 的外掛和包，請選擇預設模式。
效能 - 如果您的應用程式碼和包與 WebAssembly 相容且應用效能很重要，請選擇 WebAssembly 模式。與 canvaskit 相比，skwasm 具有明顯更好的應用啟動時間和幀效能。skwasm 在多執行緒模式下特別有效，因此請考慮配置伺服器以滿足 SharedArrayBuffer 安全要求。

此頁面內容有幫助嗎？

除非另有說明，本網站上的文件反映的是 Flutter 3.41.5 版本。頁面最後更新於 2026-05-05。檢視原始碼或報告問題。

Web 渲染器

構建模式

預設構建模式

WebAssembly 構建模式

渲染器

canvaskit

skwasm

在執行時選擇渲染器

選擇要使用的構建模式