モバイル HTML5 パフォーマンスの最適化

モバイルでの HTML5 パフォーマンスの最適化
[はじめに] スマートフォンの人気とあらゆる分野での Internet+ の動きのおかげで、モバイル端末の市場シェアは大幅に拡大しました。 2016年1月に発表された2015年の電子商取引データによると、2015年の中国のモバイルオンラインショッピング取引額は前年比123.2％増と急増し、初めてオンラインショッピング総取引額の55％を占め、中国を上回った。パソコン側。
技術的には、HTML5 は非常に人気があります:
1: データによると、2015 年の時点で、アプリの 80% が完全または部分的に HTML5 に基づいています。
2: Google Chrome は 9 月 1 日より Flash の自動再生をサポートしなくなります。
3: Amazon のウェブサイト (Amazon.com ポータルを含む) 上のすべての広告で Flash が使用されなくなります。近い将来、Flash 広告は HTML5 広告に置き換えられるでしょう。
モバイル端末 + HTML5、この組み合わせはフロントエンド エンジニアにとって大きな課題です。開発されたページのエクスペリエンスを向上させるにはどうすればよいでしょうか?これが今日私たちが議論するトピック、モバイル HTML5 ページのフロントエンドのパフォーマンスの最適化です。
PHP 中国語 Web サイトの HTML5 トレーニング、モバイル設定で HTML5 のパフォーマンスを最適化する方法は、まず次の原則を明確にする必要があります:
1. PC の最適化方法はモバイル側にも適用できます。
2. モバイル側では、最初の画面に 3 秒間のレンダリング完了インジケーターを提案します。
3. 2 番目の点に基づいて、最初の画面は 3 秒以内にロードされるか、Loading を使用する必要があります。
4. チャイナユニコムの 3G ネットワークの平均 338KB/s (2.71Mb/s) に基づくと、最初の画面リソースは 1014KB を超えてはなりません。
5. モバイル側では、携帯電話の構成により、読み込みに加えてレンダリング速度も最適化の焦点となります。
6. 5 番目の点に基づいて、レンダリング損失を減らすためにコードを合理的に処理する必要があります。
7. 2 番目と 5 番目の点に基づいて、最初の画面の読み込みとレンダリングに影響するすべてのコードを処理ロジックの後ろに配置する必要があります。
8. 読み込みが完了した後、ユーザーは対話的に使用する際のパフォーマンスにも注意を払う必要があります。
いくつかの代表的なソリューションについて説明します。
読み込みの最適化
モバイル Web ページの場合、読み込みプロセスは最も時間がかかるプロセスであり、合計時間の 80% を占める可能性があるため、もちろん最適化の焦点となります。モバイル サイトの他のフロントエンド要素の最適化も無視できません。
1. HTTP リクエストを減らす モバイルブラウザは同時に 4 つのリクエストに応答するため (Android は 4 つをサポートしますが、iOS 5 は 6 つをサポートできます)、ページに対するリクエストの数を最小限に抑える必要があります。 4 つを超える場合は、次の最適化ポイントを推奨します:
1. CSS と Java を結合する
2. 小さな画像を結合し、スプライト画像を使用する

2. キャッシュを使用すると、したがって、すべての静的リソースをサーバー側でキャッシュし、長いキャッシュを使用するようにしてください (長いキャッシュ リソースを更新するためにタイムスタンプを使用できます)。 1. キャッシュ可能なリソースをすべてキャッシュします 2. 長いキャッシュを使用します (キャッシュを更新するためにタイムスタンプを使用します)
3. HTML、CSS、Java を圧縮します

リソース サイズを削減すると Web ページが高速化されます表示速度が遅いため、HTML、CSS、Javaなどでコード圧縮を行い、サーバー側でGZipを設定する必要があります。
1. 圧縮 (余分なスペース、改行、インデントなど)
2. GZip を有効にする HTML ヘッダーに記述された Java (非同期なし)、および HTML タグに記述されたスタイルはブロックされます。ページのレンダリングに影響するため、CSS をページの先頭に配置し、Link メソッドを使用して Java をページの最後に配置するか、非同期で読み込むようにします。最初の画面の読み込みを使用する

最初の画面の読み込みが速いと、ユーザーのページ速度の認識が大幅に向上するため、最初の画面の高速表示を最適化するように努めてください。

6. オンデマンド読み込み 最初の画面に影響を与えないリソースと、ユーザーが必要とするまで現在の画面で使用されないリソースを読み込むと、重要なリソースの表示速度が大幅に向上し、全体のトラフィックが削減されます。 1. LazyLoad
2. スクロール読み込み
3. メディア クエリによる読み込み さらに、オンデマンド読み込みでは大量の再描画が発生し、レンダリングのパフォーマンスに影響を与えることを皆さんに思い出していただきたいと思います。
7. プリロード
大規模なリソースの多いページ (ゲームなど) では、リソースのロード後にページが表示されます。ただし、ロード時間が長すぎる場合は、ロードが追加されます。ユーザーの損失を引き起こします。 1. 知覚可能なロード (宇宙ゲームへのロードなど)
2. 目に見えないロード (次のページを事前にロードするなど)
3. ユーザーの行動分析に基づいて、リソースの次のページを現在のページにロードできます。速度を上げるために。

8. 圧縮された画像

画像は最もトラフィックを占めるリソースであるため、使用を避けるようにしてください。使用する場合は、最適な形式 (ニーズを満たすことを前提としてサイズで判断) を選択してください。適切なサイズに設定し、 Zhitu Compression を使用し、コード内で Srcset を使用してオンデマンドで表示します。 1. スマートな画像を使用します 2. 他の方法を使用して画像を置き換えます (CSS3 を使用します。SVG を使用します。IconFont を使用します)
4. 適切な画像を選択します (JPG よりも WebP が優れています。GIF よりも PNG8 が優れています)。5. 適切なサイズを選択します (最初の読み込みは 1014 KB を超えてはなりません。携帯電話の画面に基づくと、幅は通常 640 を超えてはなりません)
皆さんに注意してください: 画像サイズを過度に圧縮すると、画像の表示効果に影響します。
9. Cookie を削減し、サードパーティ リソースのリダイレクトと非同期読み込みを回避します。
Cookie は読み込み速度に影響するため、静的リソースのドメイン名では Cookie を使用しません。さらに、リダイレクトは読み込み速度に影響するため、リダイレクトを回避するためにサーバー上で正しく設定してください。また、制御できないサードパーティのリソースはページの読み込みと表示に影響を与えるため、サードパーティのリソースは非同期で読み込む必要があります。
スクリプト実行の最適化
スクリプトを不適切に処理すると、ページの読み込みとレンダリングがブロックされるため、使用する場合は次の点に注意する必要があります:
1. CSS は先頭に記述され、Java は末尾に記述されます。非同期的に。
2. 画像や iFrame などに空の Src を使用しないでください。空の Src は現在のページを再読み込みし、速度と効率に影響します。
3. 画像のサイズ変更は避けてください。画像のサイズ変更とは、ページ、CSS、Java などで画像のサイズを複数回変更することを指します。画像のサイズを複数回変更すると、画像が複数回再描画され、パフォーマンスに影響します。
4. 画像に DataURL を使用しないようにしてください。DataURL 画像が画像圧縮アルゴリズムを使用しない場合、ファイルが大きくなり、レンダリングする前にデコードする必要があるため、読み込みが遅くなり、時間がかかります。
CSS の最適化
1. HTML タグ内に Style 属性を記述しないようにしてください。
2. CSS 式を避ける CSS 式の実行は CSS ツリーのレンダリングから飛び出す必要があるため、CSS 式を避けてください。
3. 空の CSS ルールを削除します。空の CSS ルールは CSS ファイルのサイズを増加させ、CSS ツリーの実行に影響を与えるため、空の CSS ルールを削除する必要があります。
4. Display 属性はページのレンダリングに影響しますので、適切に使用することをお勧めします。
(1)、width、height、margin、padding、float は、display:inline の後に使用しないでください。
(2)、float は、display:inline-block の後に使用しないでください。
(3)、display:block は使用しないでください。マージンやフロートは、vertical-align
(4) と display:table-*
5 を使用した後に使用しないでください。 Float はレンダリング中に大量の計算を必要とするため、できるだけ使用しないでください。
6. Web フォントを乱用しないでください。Web フォントのダウンロード、解析、再描画はできるだけ少なくしてください。
7. フォントサイズを宣言しすぎると、CSS ツリーの効率が低下します。
8. 値が 0 の場合、ブラウザーの互換性とパフォーマンスのために単位は必要ありません。
9. さまざまなブラウザーのプレフィックスを標準化します
(1)、末尾にプレフィックスを置くべきではありません。
(2)、2 種類の CSS アニメーション (接頭辞なしの -webkit-) のみを使用します。
(3)、他の接頭辞は「-webkit- -moz- -ms-no prefix」です (-o-Opera ブラウザは代わりに点滅カーネルを使用するため、これは削除されます)。
10. セレクターを正規表現のように見せないようにします。
高度なセレクターは実行に時間がかかり、読みにくいため、使用を避けてください。
Java 実行の最適化
1. 再描画とリフローを減らす
(1)、不必要な Dom 操作を避ける
(2)、Style の代わりに Class を変更するようにする、className の代わりに classList を使用する
(3)、document.write の使用を避ける
( 4)drawImage を減らす
2. Dom の選択と計算をキャッシュする Dom が選択されるたびに、計算してキャッシュする必要があります。
3. キャッシュ リスト .length、.length は毎回計算し、変数を使用してこの値を保存する必要があります。
4. イベントのバッチバインディングを避けるために、イベントプロキシを使用してみてください。
5. ID セレクターを使用してみてください。ID セレクターが最も速いです。
6. TOUCH イベントの最適化。インパクトが速いため、クリックの代わりにタッチスタート、タッチエンドを使用しますが、タッチの応答が速すぎるため、誤操作が発生しやすいことに注意してください。
レンダリングの最適化
HTML ドキュメントは、ドキュメントのエンコード情報を含むデータ ストリームでネットワーク間で送信されます。ページのエンコード情報は、通常、HTTP 応答のヘッダー情報またはドキュメント内の HTML マークアップでのみ指定されます。ページのエンコードが決定された後でのみ、ページを正しくレンダリングできます。そのため、ほとんどのブラウザー (ie6、ie7、ie8 を除く) は、エンコード情報を見つけるために、ページを描画する前、または Java コードを実行する前に、一定のバイト数のデータをバッファーします。異なる プリバッファリングされるバイト数はブラウザによって異なります。
1. HTML はビューポートを使用します
ビューポートはページのレンダリングを高速化できます。次のコードを使用してください:
2. Dom ノードを減らす
Dom ノードが多すぎるとページのレンダリングに影響するため、次のように Dom ノードを減らすようにしてください。できるだけ。
3. アニメーションの最適化
(1) CSS3アニメーションを使ってみます。
(2) setTimeout の代わりに requestAnimationFrame アニメーションを合理的に使用します。
(3). Canvas アニメーションを適切に使用します。 5 要素以内は CSS アニメーションを使用し、5 要素を超える場合は Canvas アニメーションを使用します (iOS8 では webGL を使用できます)。
4. 高頻度イベントの最適化
Touchmove および Scroll イベントにより複数のレンダリングが発生する可能性があります。
(1). requestAnimationFrame を使用してフレームの変化を監視し、正しいタイミングでレンダリングを実行できるようにします。
(2). 変更に応答する時間間隔を増やし、再描画の回数を減らします。
5. GPU アクセラレーション

CSS の次のプロパティ (CSS3 トランジション、CSS3 3Dtransforms、Opacity、Canvas、WebGL、Video) は GPU レンダリングをトリガーします。適切に使用してください。 (PS: 過度の使用は、携帯電話の過度のバッテリー消費を引き起こします。)

関連記事:

モバイル HTML5 ページの入力ボックスの白い背景と境界線を削除する (Android および iOS と互換性があります)

その方法モバイル HTML5 開発に興味がありますか? PC版との違いは何ですか？

モバイル HTML5 アプリケーション、ユーザーは本当にそれを必要としていますか?もしそうなら、需要シナリオは何ですか?