純粋な HTML5 アプリとネイティブ アプリの違いは何ですか?

私は純粋な H5 アプリをいくつか作成しました。これらは開発が高速で快適ですが、ネイティブ アプリと比較すると、主に次の点で多くの問題が残っています。

1. アニメーション

アニメーションには、サイドバー メニューのスライドインとスライドアウト、要素のレスポンシブ アニメーション、ページ切り替え間の遷移など、さまざまな種類があります。H5 での多くの実装方法では、純粋なネイティブ パフォーマンスを実現できません。一般的に、これらには CSS3 アニメーション、JavaScript アニメーション、ネイティブ アニメーションなど、いくつかの異なるオプションがあります。

CSS3 アニメーションはパフォーマンスを大量に消費します。特定の要素が CSS3 アニメーションを使用している場合、その要素は表示されない可能性がありますが、広い領域やトランジションで CSS3 アニメーションを使用すると、低スペックの携帯電話でのアプリのエクスペリエンスが非常に悪くなります。通常、最善のオプションは、フレームワークを通じて基礎となるアニメーションを呼び出すことですが、いずれにしても、元のコードにレイヤーをラップすることと同じであり、パフォーマンスは必然的に影響を受けます。

たとえば、新しいページを読み込むときに、基になるアニメーションを呼び出す場合、考慮すべき問題が 2 つあります。1 つはリソース ページ自体のレンダリングであり、もう 1 つはリモート データの取得です。これらのアニメーションはすばやく応答できますが、CSS ページが大量にあるとレンダリングが滞り、スライドイン時に白い画面やマシンの滞りが発生する可能性があります。これらのパフォーマンスの問題を解決するには、プリロードまたはシミュレーション アニメーションを使用する必要があります。それでも、スライドインとスライドアウトのアニメーションは、ローエンドの Android マシンでは依然として多くの問題を抱えています。サーバー側のデータ取得処理方法が適切でない場合、フリーズや白い画面の現象はさらに深刻になります。詳細については、以下のデータ取得方法を参照してください。

2. サーバーデータを取得する

最初に受け入れるべきことは、ここでのデータ取得がリソース ページで非同期的に行われることです。この方法でのみ、これらのリソース ページをプリロードまたはレンダリングできるためです。ただし、非同期で取得したデータをページに埋め込むときに、DOM 操作が関与する場合があります。ご存知のように、DOM 操作はパフォーマンスを大量に消費します。ページが小さい場合は、それほど問題にはなりません。しかし、ページにもう少し多くのデータが含まれており、もう少し複雑な場合は、頻繁な DOM 操作によって明らかな白いちらつきが発生します。そして最も重要な点は、ページが読み込まれた後のデータの更新が遅すぎると、ページテンプレートが長時間待たされることになり、ユーザーフレンドリーではないということです。ブラウザのように開くたびに更新を待つことはできませんよね？

この問題が解決されなければ、H5APP は大量のデータを持つページを処理するのが難しくなり、頻繁に切り替えるのはさらに難しくなります。そうなると、誰かが MVVM の使用を必ず考えるでしょう。実際、私も MVVM をベースにした H5APP をいくつか書きました。相対的に言えば、それらのデータの取得と更新の方法はより機敏で科学的ですが、執筆の過程では、H5 特有の多くの問題に注意を払う必要があります。これらの問題については、以下のページ切り替えで説明します。

3. ページ切り替え

上記では、プリロードやシミュレーションアニメーション、さらにはバッチプリロード、バッチスクリーンショットシミュレーションアニメーションなど、いくつかの優れた実装方法を見てきました。これらはフレンドリーで多くの問題を解決しているように見えますが、実際には、ページ数が十分にあると、ページのライフサイクルという別の問題が発生します。

ブートページまたはメインページが 5 つのサブページのリソースをキャッシュし、対応するサブページにジャンプすると、これらのサブページの従属ページリソースがキャッシュされると想像してください。これは間違いなく大量のメモリを消費し、APP エクスペリエンスを低下させます。では、どのページが必要か、最大何ページをキャッシュする必要があるか、どのページのライフサイクルをいつ終了するかをどうやって知るのでしょうか?私が使用した多くの H5APP フレームワークには、これらの問題に対する完璧な解決策がないため、ページ数やコンテンツ数が多いアプリでは、これらのリソース割り当ての問題によりパフォーマンスが低下する可能性があります。

ここで、MVVM のデータ読み込み問題を振り返ってみましょう。実際、どの MVVM フレームワークであっても、それを書いたことがある人なら誰でも、この新しいタイプのフロントエンド コードを管理する上で最も重要な問題はメモリであることを知っています。メモリ リークのないエレガントなコードが書かれていることを確認する必要があります。また、ページ ライフサイクルの最後にコントローラー/ページ リソースが解放されるかどうか、そしてこれがグローバルな状況に何らかの影響を与えるかどうかも考慮する必要があります。複数のリクエストの場合、リソースを合理的に割り当てる必要があり、これらの親ページから渡されるキャッシュ リソースも再利用できます。小規模なアプリではこうした問題は発生しないかもしれませんが、純粋な H5 を使用して大規模なアプリを開発する場合、多くの時間を無駄にすることになり、結果も満足のいくものにはなりません。

4. AndroidとiOSの違い

純粋な H5 アプリは、一度記述するだけで Android と iOS の 2 つの異なるアプリにコンパイルできるため、コストが大幅に削減されると多くの人が言っています。実は、この見方自体が疑問です。このタイプのアプリを書いたことがある人なら、私の言っていることが分かるでしょう。面倒なだけでなく、バ​​グも多く、デバッグが特に面倒です。簡単な例を挙げると、全画面でiOSのトップバーを処理する方法、Androidマシンでスマートバーが表示されたときのページのレイアウトを処理する方法、基盤となるハードウェアを呼び出すときに異なるシナリオを区別する方法など、前のページに戻る方法にはAndroidとiOSの間に明らかな違いがあります。モデルとシステムの判断を次々に書き、AndroidとiOSでそれぞれデバッグする必要があります。結局、それは無駄であることがわかります。疲れ果てていますが、何も学んでおらず、いつ時代遅れになるかわからない経験の集まりだけです。

現在、H5 ハイブリッド アプリを開発している人はたくさんいますが、純粋な H5 はまだ歴史が浅く、多くの問題が十分に解決されていません。これらは、私がこれらのアプリを作成するときに最も考慮する問題です。もちろん、心配する必要はありません。ES6の推進により、ハードウェアの開発はますます速くなり、純粋なH5APPがなくなることはないかもしれません。最後に、ほとんどの人が気づいていない H5 の利点についてお話しします。H5APP について話すとき、皆が迅速な開発、低コスト、マルチプラットフォームなどについて言及しますが、私は、H5APP は多くの APP 開発方法、つまりテキストと画像の混合レイアウトとは異なると考えています。複雑で変更しやすい CSS スタイルはパフォーマンスを消費しますが、タイプセッティングに多様性をもたらします。すべての単語の幅、行の高さ、スタイルをピクセルレベルで処理できるのが、H5 の優れた点です。

出典: Witt のブログ投稿、オリジナル リンク。

元のタイトル: 純粋な HTML5 アプリとネイティブ アプリの違いは何ですか?

キーワード: HTML