モバイル設定でHTML5のパフォーマンスを最適化する方法は、まず次の原則を明確にする必要があります
。1、PC最適化方法はモバイル側にも適用できます。
2.モバイル側では、最初の画面インジケーターをレンダリングするために3秒を提案します。
3. 2番目のポイントに基づいて、最初の画面を3秒でロードするか、ロードを使用します。
4. Unicomの3Gネットワーク平均338KB /秒（2.71Mb /秒）に基づくため、最初の画面リソースは1014KBを超えないようにする必要があります。
5.携帯電話の設定により、読み込みに加えてレンダリング速度も最適化の焦点です。
6. 5番目のポイントに基づいて、レンダリングの損失を減らすためにコードを適切に処理する必要があります。
7. 2番目と5番目のポイントに基づいて、最初の画面のロードとレンダリングに影響を与えるすべてのコードを処理ロジックに配置する必要があります。
8.ユーザーがロード後にインタラクティブに使用するときのパフォーマンスに注意してください。
これらの代表的なソリューションのいくつかについて説明します。
読み込みの最適化モバイルWebページの場合、読み込みプロセスは最も時間がかかるプロセスであり、合計時間の80％を占める可能性があるため、最適化の焦点となります。ステーションの他のフロントエンド要素の最適化は無視できません。
1. HTTPリクエストを減らします。モバイルブラウザーは4つのリクエストに同時に応答するため（Androidの場合は4、iOS 5の場合は6）、ページリクエストの数を最小限に抑える必要があります。最初のロードの同時リクエストの数は4を超えることはできません。推奨される最適化ポイントは次の2つのポイントです
。1. CSSとJavaを
マージする2.小さな画像をマージし、スプライトイメージを使用する
3、キャッシュを
使用することでサーバーへのリクエスト数を減らし、読み込み時間を節約できるため、すべての静的リソースをサーバー側で設定する必要があるキャッシュして、長いキャッシュの使用を試みます（長時間のキャッシュリソースの更新ではタイムスタンプを使用できます）。
1.キャッシュ可能なすべてのリソースをキャッシュする
2.長いキャッシュを使用する（タイムスタンプを使用してキャッシュを更新する）
3.外部参照CSS、Javaを使用する
3. HTML、CSS、Javaを圧縮してリソースのサイズを小さくすると、Webページの表示速度が速くなるため、HTML、CSS、Javaなどのコード圧縮を行い、サーバー側でGZipを設定します。
1.圧縮（たとえば、余分なスペース、改行、インデント）
2. GZipを有効にする
4.
HTMLヘッダーに記述されたブロックなしのJava（非同期ではない）、およびHTMLタグに記述されたスタイルはページのレンダリングをブロックし、したがって、CSSはページの先頭に配置され、リンクモードで導入されてHTMLタグでのスタイルの書き込みを回避します。Javaはページの最後に配置されるか、非同期に読み込まれます
。5 . 最初の画面を使用して最初の画面
のクイック表示を読み込みます。これにより、ページでのユーザーの速度が大幅に向上します。知覚、それは最初の画面の高速表示のために最適化されるべきです。
6.オンデマンド読み込み
最初の画面に影響を与えないリソースと現在の画面リソースで使用されていないリソースをユーザーのニーズに合わせて読み込んでから読み込み、重要なリソースの表示速度を大幅に向上させ、全体的なトラフィックを削減できます。
1. LazyLoad
2. ローリング画面の読み込み
3.メディアクエリによる読み込み
さらに、すべての人に注意してください。オンデマンドで読み込むと、再描画が大量に発生し、レンダリングパフォーマンスに影響します。
7.
読み込みを追加する方法は、大きな重いリソースページ（ゲームなど）を事前に読み込むために使用できます。ページは、リソースの読み込みが完了した後に表示されますが、読み込み時間が長すぎるため、ユーザーが失われます。
1.知覚可能な読み込み（スペースゲームへの読み込みなど）
2 .知覚できない読み込み（事前に次のページを読み込むなど）
3.ユーザーの動作を分析し、現在のページのリソースの次のページを読み込んで速度を上げることができます。
8.画像を圧縮する
画像は最もトラフィックを集中的に使用するリソースであるため、できるだけ使用しないでください。コードでSrcsetを使用する場合は、使用時に最も適切な形式（要件を達成することを前提として、サイズで判断）、適切なサイズを選択し、Zhitu圧縮を使用します。オンデマンドで表示します。
1.スマートマップを
使用する2.写真の代わりに他の方法を使用する（CSS3を使用する; SVGを使用する; IconFontを使用する）
3. Srcsetを使用する
4.適切な画像を選択する（webPはJPGよりも優れている; PNG8はGIFよりも優れている）
5.適切なサイズを選択する（最初のロードは1014KB以下です;携帯電話の画面に基づいて、一般的な幅は640以下です）
すべての人に思い出してください：画像サイズを過度に圧縮すると画像表示効果に影響します。
9. Cookieを減らし、リダイレクトを回避し、サードパーティのリソース
Cookieの非同期読み込みが読み込み速度に影響するため、静的リソースドメイン名はCookieを使用しません。さらに、リダイレクトは読み込み速度に影響するため、リダイレクトを回避するためのサーバーの正しい設定。さらに、制御できないサードパーティのリソースは、ページのロードと表示に影響を与えるため、サードパーティのリソースは非同期でロードする必要があります。
スクリプト実行最適化
スクリプトの不適切な処理により、ページのロードとレンダリングがブロックされるため、使用する際には次の点に注意する必要があり
ます。1. CSSはヘッドに記述され、Javaはテールまたは非同期に記述されます。
2.画像やiFrameなどの空のSrcを避ける空のSrcは現在のページを再読み込みし、速度と効率に影響します。
3.画像サイズのリセットは避けてください。画像サイズをリセットすると、ページ、CSS、Javaなどで画像サイズが複数回リセットされます。画像サイズを複数回リセットすると、画像が何度も再描画され、パフォーマンスに影響します。
4.画像にDataURLを使用しないようにしてください。DataURL画像は、画像の圧縮アルゴリズムを使用しない場合は大きくなり、レンダリング前にデコードされます
。CSS最適化の読み込みに時間がかかります
。
2. CSS式の回避CSS式の実行は、CSSツリーのレンダリングからジャンプする必要があるため、CSS式は回避してください。
3.空のCSSルールを削除する空のCSSルールはCSSファイルのサイズを増やし、CSSツリーの実行に影響を与えるため、空のCSSルールを削除する必要があります。
4. Displayのプロパティを正しく使用します。Displayプロパティはページのレンダリングに影響します。Webマスターが合理的に使用することをお勧めします。
（1）、幅、高さ、マージン、パディング、フロート
は表示後に使用しないでください：インライン（2）、フロートは表示後に使用しないでください：インラインブロック
（3）、垂直- 表示後に使用しないでください：ブロックalign
（4）、display：table- *マージンまたはフロート
5を使用しないでください。Floatを乱用しないでください。フロート計算はレンダリング時に比較的大きくなるため、使用を減らしてください。
6. Webフォントを乱用しないでください使用を最小限に抑えるには、Webフォントをダウンロードして解析し、現在のページを再描画する必要があります。
7.フォントサイズをあまり多く宣言しないでください。フォントサイズが多すぎると、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.タッチイベントの最適化。クリックの代わりにtouchstartとtouchendを使用します。速度は速度に速く影響するためですが、タッチ応答は速すぎるため、誤動作を引き起こしやすいことに注意してください。
レンダリング最適化
HTMLドキュメントは、ドキュメントエンコーディング情報を含むデータストリームによってネットワーク間で送信されます。ページのエンコード情報は、通常、HTTP応答のヘッダー情報またはドキュメントのHTMLマークアップに示されています。クライアントブラウザーは、ページのエンコードを決定した後でのみページを正しくレンダリングできるため、ページを描画するとき、またはJavaコードを実行するとき以前は、ほとんどのブラウザー（ie6、ie7、ie8を除く）は、特定のバイトのデータをバッファーに入れて、それらからエンコード情報を見つけていました。プリバッファーのバイト数は、ブラウザーによって異なります。
1.ビュー
ポートを使用するHTMLビューポートはページのレンダリングを高速化できます。次のコードを使用してください：
2、Domノードの数を減らすDomノード
はページのレンダリングに影響を与えすぎます。Domノードの数を減らすようにしてください。
3.アニメーションの最適化
（1）、CSS3アニメーションを使用してみます。
（2）setTimeoutの代わりにrequestAnimationFrameアニメーションを合理的に使用してください。
（3）CSSアニメーションを使用して5つの要素内でCanvasアニメーションを適切に使用し、Canvasアニメーションを使用して5つを超える（iOS8はwebGLを使用できます）
4.高頻度のイベント最適化TouchmoveおよびScrollイベントは、複数のレンダリングを引き起こす可能性があります。
（1）requestAnimationFrameを使用してフレームの変更を監視し、レンダリングが正しい時間に行われるようにします。
（2）応答変更の時間間隔を増やし、再描画の回数を減らします。
5. GPUアクセラレーション
CSS の次の属性（CSS3トランジション、CSS3 3Dトランスフォーム、不透明度、キャンバス、WebGL、ビデオ）は、GPUレンダリングをトリガーするために合理的に使用してください。（追記：暫定的に使用すると、電話の過剰な電力消費が増加します。）