Tuesday, November 27, 2012

Is Webview Slower than the Mobile Browser? (part 1: Canvas Graphics)

The common belief is that running HTML5 apps inside a WebView is slower that the mobile browser. This has become more and more popular when companies like Facebook and Tumblr moved away from using HTML5 in their iOS apps while their mobile websites provide a reasonable experience.

All of these hypes around HTML5 performance and the fact that the experience on the mobile websites is quite well led us to perform some measurement and determine the actual performance differences between using a WebView (for example UIWebView on iOS) on mobile platform versus the actual Web Browser (for example Mobile Safari). Is the difference (if any) enough to move you away from using WebViews?

Therefore we plan to perform a series of tests to provide concrete information on the performance of the WebView against the Browser. We start by graphics and rendering performance (specifically HTML5 canvas performance) on Android and iOS, then we will try to compare page load time and DOM manipulation performance. Finally in the final post of these series, we plan to use our benchmarks to evaluate the scrolling and animation performance of the two options.

The devices used for our first evaluation are as follows:
  • iPhone 5 running iOS 6.0.1
  • iPhone 4s running iOS 6.0.1
  • Samsung Galaxy S III running Android 4.0.4 
The test application is written entirely in JavaScript and renders a number of particles in an HTML5 canvas. You can get the source code from Github or test it in your web browser from this public link.
The Canvas Particles App.
The initial test results are very interesting. For most of the cases the performance of the WebView and the Browser are very close, except in the cases when you use Chrome on an Android Phone.

Webview vs Browser performance on iPhone 4s, iPhone 5 and Samsung Galaxy S III
A comparison of WebView and the Browser on iPhone 5, iPhone 4s and Galaxy S III 

Let's have a look at it in a different way, in a chart that compares all of the values on different platforms.   First is iOS 6.0.1 you can see that the UIWebView performs very close to Safari and in some cases it is even faster. Another interesting observation from this chart is that iPhone 5 out performs iPhone 4S with a wide margin.


Now let's have a look at the same chart for Android on one of the most popular devices out there, Samsung Galaxy S III. The interesting observation here is that Chrome by far outperforms the stock browser and the WebView, but the WebView's performance (in practice) is still very close to the browser.

Based on the information above, we can conclude that in practice for graphic intensive applications WebView and Browsers perform very close and in practice you should not worry about  the difference in performance.

2 comments:

  1. Yes, a UIWebView in iOS 5, still a popular version, is much slower than Safari Mobile, due to disabled Nitro engine.

    ReplyDelete
  2. Great post and indeed great series of posts you have made on this blog so far... all very useful. Thanks!

    Dying to see part II of this one though!!! Really interested to see how the web views affect loading and DOM performance.

    Thanks again

    ReplyDelete