Asial Blog

Recruit! Asialで一緒に働きませんか?

Crosswalkを使うとどれくらいパフォーマンスがアップするかテストしてみました

カテゴリ :
Monaca
タグ :
HTML5
Tech
Monaca

Intelが開発、提供しているハイブリッドアプリ用のWebViewがCrosswalkです。




Crosswalkの公式サイト

Crosswalkの公式サイト



Crosswalk - build world class hybrid apps



Crosswalk登場の経緯



ハイブリッドアプリでは通常、OS標準のWebViewを使いますが、Crosswalk版はCrosswalkをレンダリングおよびJavaScriptエンジンとして使うようになります。図にすると次のようになります。




通常版とCrosswalk版の違い

通常版とCrosswalk版の違い



通常のハイブリッドアプリがHTML5/JavaScriptのコードを持ち、Android OSが提供するWebViewを使うのに対して、さらにCrosswalk版はChromiumベースのレンダリング/JavaScriptエンジン(Crosswalk)をアプリ内に内包します。



なぜCrosswalkが登場したのかと言うと、これまでハイブリッドアプリにおいてOS間におけるレンダリング/JavaScriptエンジンの違いによる動作、パフォーマンスの違いが大きな問題になってきました。Android 4.4になり、Chromiumベースになったことでパフォーマンスは大きく向上しましたが、それでも端末間の動作差異が微妙に残ってしまっています。4.4以前の端末においてもハイブリッドアプリのパフォーマンス、機能を大きく改善してくれるのがCrosswalkです。



Crosswalkにより、大きく分けて以下の3つの利便性があります。



1. レンダリングエンジンの統一



CrosswalkはPhoneGap/Cordova、そしてMonacaアプリに同梱して一つのアプリとして配布できます。つまり異なるAndroid OSにおいてもWebViewのバージョンが統一されるようになります。



2. 最新のAPIが利用できる



CrosswalkはGoogle Chromeベースではなく、Chromiumベースになります。ChromiumはGoogle Chromeのベースになるオープンソース・プロジェクトですが、その成果がGoogle Chromeに反映されています。そのため、より先進的なAPIを(しかもOSのバージョン差異を気にすることなく)利用できます。



3. パフォーマンスが向上



今回の記事ネタになりますが、Chromiumは最新の技術を使い、パフォーマンスが向上しています。どれくらい向上しているかは後述します。



デメリットとしては、



1. Android 4.0以降限定



CrosswalkがサポートしているのはAndroid 4.0以降になります。2.3などをターゲットして考えると使えないということになります(またはアプリを分割しないといけません)。



2. アプリサイズが増えます



レンダリングエンジンを内包しますので、その分アプリのサイズが大きくなります。10MBくらいは大きくなるようです。



といったデメリットがあります。とはいえAndroid 4.0以降向けに提供されるハイブリッドアプリであれば選択しない手はないのではないでしょうか。



3. 最新の環境下ではCrosswalk相当な場合があります



例えばAndroid 4.4.4の場合、Chromeのバージョンが33.0.0.0にあがっており、WebKitは537.36になっています。これはCrosswalk版と同じになります。このように最新のAndroid OS環境の場合、Crosswalk相当になることがあります。



Android 4.1でチェック



Android 4.1、Nexus 7相当の環境でテストをしました。手元にAndroid 4.1実機がなかったのでGenemotionで仮想環境を作っています。この環境にMonacaデバッガーMonacaデバッガー(ハイパフォーマンス版)をインストールしています。



バージョン



WebViewのバージョンは次のようになっています。




  • 通常版:Apple WebKit/534.30

  • Crosswalk版:Apple WebKit/537.36



数字にすると3くらいしか変わらないのですが、バージョン番号の付け方が通常のソフトウェアとは異なるので、その性能差は相当大きいというのが以下の内容で分かります。



javascriptパフォーマンス



JavaScriptがどれくらい高速化したのか、Googleが提供するJavaScriptベンチマークソフトウェアのOctane 2.0でチェックしました。



まずは通常版での結果です。




通常版のOctane 2.0の結果

通常版のOctane 2.0の結果



次にCrosswalk版。




Crosswalk版のOctane 2.0の結果

Crosswalk版のOctane 2.0の結果



スコアにして1.7倍近く向上しています。2回目は通常のWebViewが9,265で、Crosswalkが18,851となり2倍以上の高速化となりました。



|回数|通常のWebView版|Crosswalk版|



|1 | 9,365| 16,338|
|2 | 9,265| 18,851|
|3 | 10,599| 17,784|



APIの実装具合



HTML5は2014年10月にようやく勧告になったこともあり、実装の度合いがブラウザによって異なってきます。そのため、Android OSのバージョンが違うと使えない機能があるというのはよくあります。なおAndroid 4.1は2012年6月ごろにリリースされたようです(via Wikipedia)。



Crosswalk版はレンダリングエンジンがどのAndroid OSにおいても統一できるのでそういった心配が大幅に軽減されるでしょう。



そこでAPIの実装具合を確認します。テストはHTML5Testで行いました。




通常版のHTML5実装状況

通常版のHTML5実装状況



通常版の場合、278ポイントなのに対して、




Crosswalk版のHTML5実装状況

Crosswalk版のHTML5実装状況



Crosswalk版は493ポイントになっています。実際、利用不可の数が圧倒的に少なくなっているという印象があります。これでHTML5を活かした機能が躊躇なく実装できるようになるでしょう。






ハイブリッドアプリの場合、ネイティブに対するパフォーマンスが常に話題にあがります。それだけにレンダリングエンジンを内包するだけで高速化し、さらにAPIの面で多機能化、OS標準ブラウザごとの差異を気にすることなく実装できるのは大きなメリットと言えそうです。



MonacaではAndroidアプリのデバッグ時、コンパイル時にCrosswalk版が選択できるようになっています。より高いパフォーマンスを目指すためにもぜひご利用ください。