ハイブリッドアプリが「重い！遅い！」と悩んだ時にまず調べること

ここでいうハイブリッドアプリとは、CordovaベースのWebViewで動作するアプリのことです。 たとえば Ionic, Monaca などのフレームワークがCordovaベースです。

そんなハイブリッドアプリで動作が遅いときにまず調べておくことはDOMの要素数です。 つまり、タグの数がどれだけあるかを調べてみる、ということですね。

なぜ、DOMの要素数をまず調べるのかというと、 「開発者ツールの検証で簡単に調べられる」 「案外JavaScriptよりも描画の負荷で重くなりがち」 ということが理由です。

これは個人的な感覚なのですが、JavaScriptで膨大な計算をすることってハイブリッドアプリ制作であまりないと思うんですよね。 それよりも、知らず知らずのうちにDOMの要素数が増えてしまって重くなっている、というパターンの方がよくあるのではないかと思います。

DOMの要素数を調べるといっても、単純に数を数えればいいというわけではありません。 レンダリングの計算対象となる要素の数を調べる必要があります。 ブラウザはDOMが変更された時、CSSのスタイルからレイアウトを計算して、最終的に画面に描画します。 このレンダリングの計算処理は、対象となるDOM要素の数が多ければ多いほど負荷が高くなります。

ハイブリッドアプリはJSでDOMを操作することでアプリのような動きを表現しているため、レンダリングは高頻度で発生します。 とはいえ、Ionicのようなフレームワークを使っていれば、そのあたりは最適化されています。

レンダリングの計算対象から除外される要素は、 display: none; または visibility: hidden; が適用されている要素です。

そのため、Ionic3 ではページ遷移した時に前のページを display: none; するようになっています。 フレームワークを使っていれば、レンダリングの計算対象となる要素は現在のページのみとなるように最適化されているはずです。 というわけで、取っ掛かりとしては、開発者ツールで現在表示中の画面を検証するのがベターでしょう。

ハイブリッドアプリが遅くなってしまうありがちなパターンとしては大量のリストを表示しているというものがあります。 たとえば、 APIから取得した情報を全部表示している、とか。 「もっと見る」でリストを追加している、とか。 そんな時にはバーチャルスクロールを使ってください。

バーチャルスクロールは、画面に表示するのに必要な分だけ要素を生成し、画面外に出た要素は削除します。 100万件のリストを扱ったとしても、作成される要素は十数件程度で済みます。 以下の動画で、バーチャルスクロールがどういう動作をしているかを確認することができます。

「別に大量のリストなんて使ってないな」という場合は、表示中の画面以外の要素も調べてみてください。 意図せず、フレームワークの仕様などで要素が display: none; にならずに蓄積してるかもしれません。 私の場合、Ionic3を使っていてModalからPageをPushした時に、意図せず display: none; にならない状況になっていました。 （私の使い方が悪かったわけですけども）

そういうわけで、手っ取り早く開発者ツールで検証できるという意味で、まずは「レンダリング計算対象のDOMの要素が大量にないか」を調べてみることをお勧めします。