Web 渲染器

在為 Web 執行和建置應用程式時,您可以在兩種不同的渲染器之間進行選擇。此頁面說明了這兩種渲染器,以及如何為您的需求選擇最佳渲染器。這兩種渲染器為

HTML 渲染器
此渲染器比 CanvasKit 渲染器具有較小的下載大小,它使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的組合。
CanvasKit 渲染器
此渲染器與 Flutter 行動裝置和桌上型電腦完全相容,在小工具密度較高的情況下效能較快,但下載大小會增加約 1.5MB。CanvasKit 使用 WebGL 來呈現 Skia 繪製指令。

命令列選項

--web-renderer 命令列選項採用下列三個值之一:autohtmlcanvaskit

  • auto(預設值)- 自動選擇要使用的渲染器。當應用程式在行動裝置瀏覽器中執行時,此選項會選擇 HTML 渲染器;當應用程式在桌上型電腦瀏覽器中執行時,則會選擇 CanvasKit 渲染器。
  • html - 永遠使用 HTML 渲染器
  • canvaskit - 永遠使用 CanvasKit 渲染器

此旗標可與 runbuild 子命令搭配使用。例如

flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit

當選取非瀏覽器(行動裝置或桌上型電腦)裝置目標時,此旗標會被忽略。

執行時期組態

若要在執行時期覆寫 Web 渲染器

  • 使用 auto 選項建置應用程式。
  • 準備一個組態物件,將 renderer 屬性設定為 "canvaskit""html"
  • 將該物件傳遞給 Flutter 網路應用程式初始化 腳本中的 engineInitializer.initializeEngine(configuration); 方法。
<body>
  <script>
    let useHtml = true;

    window.addEventListener('load', function(ev) {
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: function(engineInitializer) {
        let config = {
          renderer: useHtml ? "html" : "canvaskit",
        };
        engineInitializer.initializeEngine(config).then(function(appRunner) {
          appRunner.runApp();
        });
      }
    });
  });
  </script>
</body>

main.dart.js 中開始 Flutter 引擎啟動程序後,無法變更網路呈現器。

選擇要使用的選項

如果您要針對行動瀏覽器最佳化下載大小,並針對桌上型瀏覽器最佳化效能,請選擇 auto 選項(預設值)。

如果您要針對桌上型和行動瀏覽器最佳化下載大小,而非效能,請選擇 html 選項。

如果您優先考量效能和桌上型與行動瀏覽器中的像素完美一致性,請選擇 canvaskit 選項。

範例

使用預設呈現器選項 (auto) 在 Chrome 中執行

flutter run -d chrome

使用預設 (auto) 選項在發行模式中建置應用程式

flutter build web --release

使用僅限 CanvasKit 呈現器在發行模式中建置應用程式

flutter build web --web-renderer canvaskit --release

使用 HTML 呈現器在設定檔模式中執行應用程式

flutter run -d chrome --web-renderer html --profile