跳至主要內容
目錄

網頁渲染器

目錄

Flutter Web 提供了兩種建置模式和兩種渲染器。兩種建置模式分別是預設和 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

WebAssembly 建置模式

#

此模式透過傳遞 --wasm 給 flutter run 和 flutter build web 指令來啟用。

此模式會使 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

#

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

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

skwasm

#

skwasm 渲染器是 Skia 的更精簡版本，它被編譯為 WebAssembly，並支援在單獨的執行緒上進行渲染。

此渲染器必須與WebAssembly 建置模式一起使用，該模式將 Dart 程式碼編譯為 WebAssembly。

為了利用多個執行緒，Web 伺服器必須滿足 SharedArrayBuffer 安全性要求。在此模式下，Flutter 使用專用的 Web Worker 將部分渲染工作量卸載到單獨的執行緒，從而利用多個 CPU 核心。如果瀏覽器不符合這些要求，則 skwasm 渲染器將在單執行緒配置中執行。

此渲染器包含一個編譯為 WebAssembly 的更精簡版本的 Skia，會增加約 1.1MB 的下載大小。

在執行階段選擇渲染器

#

預設情況下，當以 WebAssembly 模式建置時，Flutter 將決定何時使用 skwasm，以及何時退回使用 canvaskit。這可以透過將組態物件傳遞給載入器來覆寫，如下所示

  1. 使用 --wasm 標誌建置應用程式，使 skwasm 和 canvaskit 渲染器都可供應用程式使用。
  2. 依照 撰寫自訂的 flutter_bootstrap.js 中所述，設定自訂 Web 應用程式初始化。
  3. 準備一個組態物件，將 renderer 屬性設定為 "canvaskit" 或 "skwasm"。
  4. 將您準備好的組態物件作為新物件的 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 interop 程式庫 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 的最新穩定版本。頁面最後更新於 2024-11-21。 檢視原始碼 或 回報問題。