スマートフォンの普及とあらゆる階層におけるインターネット + の動きのおかげで、モバイル端末の市場シェアは大幅に拡大しました。

iResearch が 2016 年 1 月に発表した 2015 年の電子商取引データによると、2015 年の中国のモバイルオンラインショッピングの取扱高は前年比 123.2% 増加し、初めてオンラインショッピング全体の中でトップとなった。 PCを上回る取引量は55%に達しました。

技術的には、HTML5 は非常に人気があります:

1: データによると、2015 年の時点で、アプリの 80% が完全または部分的に HTML5 に基づいています。

2: Google Chrome は 9 月 1 日以降、Flash の自動再生をサポートしなくなります。

3: Amazon の Web サイト (Amazon.com ポータルを含む) 上のすべての広告で Flash が使用されなくなります。近い将来、Flash 広告は HTML5 広告に置き換えられるでしょう。

モバイル + HTML5、この組み合わせはフロントエンドエンジニアにとって大きな課題です。開発されたページのエクスペリエンスを向上させるにはどうすればよいでしょうか?これが今日私たちが議論するトピックです:モバイル 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 を超えることはできず、ページリクエストの数を最小限に抑える必要があります。最適化ポイントは次の 2 点であることが推奨されます:

1 . CSS、Java を結合

2. 小さな画像を結合、スプライトを使用

2、キャッシュ

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

1. キャッシュ可能なリソースをすべてキャッシュします

2. ロングキャッシュを使用します (タイムスタンプを使用してキャッシュを更新します)

3. CSS および Java への外部参照を使用します

3、HTML、CSS、Java を圧縮します

リソースサイズを削減すると Web ページの表示速度が向上するため、HTML、CSS、Java などをコーディングします。圧縮して設定します。サーバー側の GZip。

1. 圧縮 (余分なスペース、改行、インデントなど)

2. GZip を有効にする

4、ブロックスタッフィングなし

HTMLのhead内に記述されたJava(非同期ではない)やHTMLタグ内に記述されたStyleはページのレンダリングを阻害するため、CSSをページの先頭に配置し、Linkを使用して導入することで回避しています。 HTML タグに Style を記述し、ページの最後に Java を置くか、非同期読み込み

5 を使用し、最初の画面読み込み

を最初に使用します画面の高速表示により、ユーザーのページ速度の認識が大幅に向上するため、最初の画面の高速表示の最適化を試みる必要があります。

6、オンデマンド読み込み

最初の画面に影響を与えないリソースと、それまで現在の画面で使用されないリソースを読み込みます。ユーザーがそれらを必要とするため、重要なリソースの表示速度が大幅に向上し、全体のトラフィックが削減されます。

1. LazyLoad

2. スクロール読み込み

3. メディアクエリによる読み込み

さらに、皆さんに注意していただきたいこと:読み込みにより大量の再読み込みが発生し、レンダリングのパフォーマンスに影響します。

7、プリロード

大規模なリソースの多いページ (ゲームなど) は、Loading を追加して表示する方法を使用できます。リソースが読み込まれた後のページですが、読み込み時間が長すぎるため、ユーザーが失われる可能性があります。

1. 知覚可能な読み込み (宇宙ゲームへの読み込みなど)

2. 目に見えない読み込み (次のページの事前読み込みなど)

3.分析すると、現在のページに次のページのリソースをロードして速度を向上させることができます。

8、圧縮画像

画像は最もトラフィックを占めるリソースであるため、使用を避け、最も適切な画像を選択するようにしてください。使用する場合はフォーマットを変更し（要件を実現することを前提として、サイズで判断します）、適切なサイズを使用し、Zhituを使用して圧縮し、コード内でSrcsetを使用してオンデマンドで表示します。

1. スマートピクチャーを使用します

2. 他の方法を使用して画像を置き換えます (CSS3 を使用、SVG を使用、IconFont を使用)

3. Srcset を使用します

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 画像はファイルが大きくなり、レンダリング前にデコードする必要があるため、読み込みに時間がかかります。

CSS の最適化

1. HTML タグに Style 属性を記述しないようにします。

2. CSS 式を避ける CSS 式の実行は CSS ツリーのレンダリングから飛び出す必要があるため、CSS 式は避けてください。

3. 空の CSS ルールを削除すると、CSS ファイルのサイズが増加し、CSS ツリーの実行に影響を与えるため、空の CSS ルールを削除する必要があります。

4. Display 属性はページのレンダリングに影響しますので、適切に使用することをお勧めします。

(1)。display:inline の後には幅、高さ、マージン、パディング、および float を使用しないでください。

(2)。

(3)、表示後に垂直位置合わせを使用しないでください: ブロック

(4)、マージンまたはフロートを表示後に使用しないでください: table-*

5. Float を乱用しないでください。Float はレンダリング中に大量の計算を必要とするため、できるだけ使用しないでください。

6. Web フォントを乱用しないでください。Web フォントは、現在のページでダウンロード、解析、再描画する必要があるため、使用は最小限に抑えてください。

7. Font-size を宣言しすぎると、CSS ツリーの効率が低下するため、宣言しないでください。

8. 値が 0 の場合、単位は必要ありません。ブラウザの互換性とパフォーマンスを考慮して、値が 0 の場合は単位は必要ありません。

9. 各種ブラウザのプレフィックスを標準化する

(1) プレフィックスを最後に配置しないでください。

(2). CSS アニメーションは 2 種類 (接頭辞なしの -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 イベントの最適化。インパクトが速いため、クリックの代わりに touchstart、touchend を使用します。ただし、タッチの応答が速すぎるため、誤操作が発生しやすいことに注意してください。

レンダリングの最適化

HTML ドキュメントは、ドキュメントのエンコード情報を含むデータストリームでネットワーク間で送信されます。通常、ページのエンコード情報は、ページのヘッダー情報に含まれます。または、クライアントブラウザがページのエンコードを決定した後でのみページを正しくレンダリングできることがドキュメント内の 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) 変更に応答する間隔を長くし、再描画の回数を減らします。