Flutter Web with WebAssembly and Skia: The Future of High-Performance Web Apps

Flutter Web has undergone significant changes with the release of Flutter 3.29, bringing a new era of high-performance web applications. With the removal of the HTML renderer and the shift to WebAssembly (WASM)-based Skia (SkWasm), Flutter Web now offers a smoother, more consistent, and optimized experience across browsers. In this blog, we’ll explore how Flutter Web works, why the HTML renderer was removed, and the benefits of WebAssembly for web performance.

?? How Flutter Web Works

Flutter Web’s rendering pipeline relies on Flutter’s powerful graphics engine, Skia, and WebAssembly (WASM). Here’s a breakdown of how it works:

??? Rendering Framework

Flutter Web now exclusively uses the CanvasKit renderer, which compiles Skia to WebAssembly (WASM) and renders via WebGL. This ensures a high-fidelity and GPU-accelerated user interface.

• CanvasKit Renderer: Uses WebGL for rendering, providing better performance and consistency across devices.
• WebAssembly Execution: Faster than JavaScript, enabling near-native execution speeds.
• -Based Rendering: Unlike traditional web apps, Flutter Web does not use standard HTML elements like <div>, <span>, or <img> but instead renders everything inside a <canvas> tag.

??? Compilation Process

1. Dart code is compiled into JavaScript using dart2js.
2. The compiled JavaScript interacts with Skia’s WebAssembly runtime.
3. Skia (SkWasm) renders everything inside a <canvas> tag.

?? Why Did Flutter Remove the HTML Renderer?

Before Flutter 3.29, developers could choose between the HTML renderer and CanvasKit renderer. However, the HTML renderer had several limitations, leading to its removal:

?? Performance Issues

• The HTML renderer struggled with complex animations and graphics-heavy applications.
• Mapping Flutter widgets to DOM elements caused layout lag and inconsistent performance.
• Animations were jittery, especially when shadows, gradients, or complex layouts were involved.

?? UI Consistency Problems

• The HTML renderer’s UI appeared different across browsers, requiring additional CSS tweaks.
• Some Flutter widgets did not render the same way as on mobile or desktop.

?? CanvasKit Offers a More Native-Like Experience

• Same Rendering Engine as Flutter Mobile/Desktop: Ensures UI consistency.
• GPU-Accelerated Rendering: Uses WebGL for faster animations and smoother performance.
• WebAssembly Execution: Faster and more optimized than JavaScript.

?? Easier Maintenance for the Flutter Team

• Maintaining two renderers increased complexity.
• By focusing only on CanvasKit, Flutter can improve web performance more efficiently.

?? Folder Structure of build/web/

When you build a Flutter Web app, the build/web/ directory contains:

flutter.js

• This is the main JavaScript file responsible for loading and initializing the Flutter Web application.
• It acts as a loader script that ensures all necessary resources (like WebAssembly, service workers, and compiled Dart code) are properly loaded before running the app.
• It typically does the following:Loads the compiled main.dart.js script.Handles caching and resource loading strategies.Calls FlutterEngine.initialize() to start the Flutter app.

flutter_bootstrap.js

• This script is newer and introduced to improve Flutter Web’s startup performance.
• It is responsible for bootstrapping the Flutter app and optimizing loading performance.
• It provides additional capabilities such as:Detecting and selecting the best renderer (skwasm.wasm vs. canvasKit.wasm).Handling different browser environments (ensuring compatibility).Efficiently managing dependencies before launching flutter.js.

How They Work Together

1. index.html first loads flutter_bootstrap.js.
2. flutter_bootstrap.js sets up the required environment and loads flutter.js.
3. flutter.js then fetches and executes main.dart.js, which is the compiled Dart code for the app.
4. The app starts running inside the <canvas> element.

Summary

• flutter.js: Handles app initialization and loads Flutter Web.
• flutter_bootstrap.js: Optimizes and prepares the environment before launching flutter.js.

?? SkWasm (Skia WebAssembly) – The Future of Flutter Web

?? What’s New in Flutter 3.29?

• HTML Renderer Removed – No more <div>-based rendering.
• CanvasKit Upgraded – Now uses WebAssembly-based Skia (SkWasm) instead of JavaScript-based Skia.
• Better Performance – WASM runs at near-native speed, improving execution time and memory usage.

?? Why is WebAssembly Faster?

1. Bypasses JavaScript Overhead – WASM code runs closer to native execution speed.
2. Direct Memory Access – No garbage collection delays like in JS.
3. Optimized Execution – WASM benefits from browser-level optimizations.

? Which Browsers Support WebAssembly?

BrowserSupported?

Chrome ? YesEdge ? YesFirefox ? YesSafari ? Yes (but some issues on iOS)

Internet Explorer?? No

?? Performance Comparison: Flutter WebAssembly (SkWasm) vs. Flutter EXE (Native Desktop)

?? Why is Flutter EXE Faster?

1?? Direct Hardware Access

• Flutter EXE runs natively on the OS, accessing CPU, GPU, and RAM directly.
• No browser restrictions like WebAssembly has.

2?? Better GPU Acceleration with Impeller

• Impeller (on Windows/macOS/Linux) has full GPU acceleration.
• WebAssembly (SkWasm) relies on the browser’s WebGL/WebGPU, which can be slower.

3?? Better Memory Management

• WebAssembly is fast, but still runs inside a browser sandbox, so it can’t manage memory as efficiently as native code.
• Flutter EXE has full access to system memory, making large data operations smoother.

4?? Multithreading Support

• WebAssembly doesn’t support full multithreading yet (Web Workers are limited).
• Flutter EXE can use full OS-level threading, improving performance in heavy computations.

??? Need HTML Elements in Flutter Web? Use HtmlElementView

Since Flutter Web now only uses CanvasKit, you cannot use <div>, <span>, or <img> directly. However, you can still embed HTML elements using HtmlElementView and JavaScript interop:

import 'dart:ui' as ui;
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  ui.platformViewRegistry.registerViewFactory(
    'hello-world-html',
    (int viewId) => DivElement()..innerText = 'Hello from HTML!'
  );
}        

?? What’s Next for Flutter Web?

With WebAssembly (SkWasm), Flutter Web is now positioned as a serious contender for high-performance web applications.

?? Upcoming Improvements:

• Further WebAssembly optimizations to reduce load time and memory usage.
• Better debugging tools for Flutter Web apps.
• Expanded browser support for WebAssembly-based rendering.

?? Final Thoughts

Flutter Web has evolved significantly with the removal of the HTML renderer and the adoption of WebAssembly-based Skia (SkWasm). These changes bring better performance, UI consistency, and reduced complexity. If you're building web apps with Flutter, now is the time to leverage SkWasm for fast, GPU-accelerated web experiences.

?? Ready to try Flutter WebAssembly? Start experimenting today and unlock the full potential of Flutter for the web! ??.