Flutter Web Renderers: Which One Should I Use? HTML or CanvasKit Renderer?
In the Flutter application development process, especially for the Web, Flutter recognizes two types of renderers, namely HTML Renderer and CanvasKit Renderer.
It’s true that not many other frameworks have multiple rendering options like Flutter. In general, most frameworks use the default rendering engine for the platform they are targeting, and don’t offer alternative rendering engines or methods. Then, why does Flutter offer these multiple options? What makes them different from each other?
Concept
Basically, the fundamental difference between the HTML Renderer and the CanvasKit Renderer lies in the technology used.
HTML Renderer uses standard web technologies such as HTML, CSS, and DOM to render the app in a web browser. HTML Renderer is compatible with a wide range of web browsers and devices, making it a reliable choice for building web apps with Flutter. Whereas, CanvasKit Renderer uses the WebGL standard to render the app in a web browser. CanvasKit Renderer is not compatible with all web browsers and devices, and it requires a WebGL-enabled browser to work. However, it is compatible with most modern browsers, and its compatibility is expected to improve over time.
Therefore, Flutter claims that HTML Renderer has a smaller download size dan CanvasKit Renderer has better result with higher widget density, but adds about 2MB in download size.
Testing
Based on these basic concepts, let’s conduct a simple experiment. The experiment we will conduct is to test the performance for each renderer method.
Here, I have prepared a Flutter project that displays several texts, widgets, images, and animations on one page. For the performance measurement tool, I will use Lighthouse, which is available on most browsers on their Developer Tools. Lighthouse is an open-source automated tool for improving the quality of web pages.
In Lighthouse, there are 6 (six) indicators of assessment variables for rendering performance, namely:
- First Contentful Paint
Measures how long it takes for a user’s browser to render the first piece of content on a web page, such as text, images, or videos. - Time to Interactive
Measures how long it takes for a web page to become fully interactive after a user requests it. - Speed Index
Measures how quickly the visual content of a web page is displayed to the user. - Total Blocking Time
Measures the amount of time during which a user’s interaction with a web page is blocked by long-running JavaScript. - Largest Contentful Paint
Measures the loading speed of a web page’s main content. - Cumulative Layout Shift
Measures the stability of a web page’s layout as it loads.
For this testing, I will be using Google Chrome as the browser environment.
Testing with HTML Renderer
// command in the terminal
flutter run -d chrome --web-renderer html
Testing with CanvasKit Renderer
// command in the terminal
flutter run -d chrome --web-renderer canvaskit
Result & Analysis
Based on the performance testing that has been conducted, the following results were obtained:
The results show that HTML Renderer has better performance (time) compared to CanvasKit Renderer, resulting in shorter rendering time. This is in line with Flutter’s claim above, where HTML Renderer will reduce the objects in the display so that it has a smaller download size, while CanvasKit Renderer has better results for each object displayed, resulting in a larger download size. This can be seen in Figures 1 and 5. It can be clearly seen that there are differences for each rendered object element between HTML Renderer and CanvasKit Renderer.
- Text
For the text element, it appears that HTML Renderer slightly reduces the thickness of the text, and this seems to change the typeface and font of the text itself. Meanwhile, CanvasKit Renderer appears more natural and in line with the typeface and font provided. - Widget
There are no significant differences for the widget element in both HTML Renderer and CanvasKit Renderer. - Image
There are no significant differences if we look at the image element in its normal size. However, when we zoom in several times, we found something interesting. Even though HTML Renderer reduces the rendered object element, the HTML Renderer appears smoother than the CanvasKit Renderer when we zoom in on the image element. Meanwhile, the CanvasKit Renderer will look rougher (with visible pixelated images) when zooming in on the image element. - Animation
For the animation element, this is perhaps where the most noticeable difference is felt. In the HTML Renderer, the animation appears to be rendered incorrectly, with some parts not placed in the correct location. Whereas in the CanvasKit Renderer, there are no issues at all for this element.
Summary
For the performance and rendering time aspect, HTML Renderer has an advantage over CanvasKit Renderer. However, HTML Renderer also has its drawbacks. It sacrifices the rendering quality in order to achieve better performance and rendering time. On the other hand, CanvasKit Renderer may not be as good in terms of performance and rendering time compared to HTML Renderer, but CanvasKit Renderer has an advantage in rendering higher-quality elements.
The performance of HTML Renderer can be affected by the complexity of the UI and the number of animations used in the app. While it can handle simple UIs and animations with ease, it may struggle with more complex ones, especially on lower-end devices. CanvasKit renderer is designed to improve performance on lower-end devices, especially when dealing with complex UIs and animations. This is because it uses the GPU to render the app, which can provide a smoother user experience overall. So, we cannot decide which one is better. Both have their own functions that can be adjusted to our needs as developers.
References
https://docs.flutter.dev/development/platform-integration/web/renderers
https://wilsonwilson.dev/articles/flutter-web-renderers
https://developer.chrome.com/docs/lighthouse/overview/
https://www.semrush.com/blog/google-lighthouse/
