🚀We conducted a performance comparison between two Flutter web apps: one compiled with Flutter 3.22 and WebAssembly (Wasm) support, and the other with a standard Flutter 3.19 build (JavaScript). Here’s what we discovered: Courtesy: @ashishgourr 1/8
Key Findings for Web Apps: Smoothness & Janks: The Wasm-compiled app (App 1) delivers significantly smoother performance with fewer visual janks. 2/8
Rendering & Painting Times: App 1 impresses rendering at 70ms & painting at 136ms, vastly outperforms App 2's 755ms rendering & 1018ms painting times. Initial Load Time: App 2 has a slight edge with 0ms initial load time, but App 1 is close behind at 7ms. 3/8
Additional Benefits: Printing Page Issue: Resolved with Wasm; pages are fully captured regardless of height. Text Selection and Search: Enhanced efficiency using Wasm. 4/8
Key Findings for macOS Apps: Smoothness and Janks: The Wasm-compiled app on macOS shows fewer visual stutters, with only 7 UI janks during initial load compared to App 2's 12. 5/8
Shader Compilation Time: Flutter 3.22 with Wasm reduces shader compilation time to 377.4ms, compared to Flutter 3.19's 567.6ms. Dependency Updates: Ensure your dependencies support Wasm to avoid compatibility issues. 6/8
These findings highlight substantial performance improvements offered by WebAssembly compilation with Flutter 3.22, particularly in rendering speed, painting efficiency, & overall user experience ,however, ensure your dependencies support Wasm to avoid compatibility issues. 7/8
Check out the links ⬇️ Web App 🔗 flutter-wasm-95893.web.app GitHub 🔗github.com/ashishgourr/wa… #FlutterPerformance #WebAssembly #Flutter #WebAppDevelopment #GeekLabs