H5フロントエンドパフォーマンステストの概要

Httpリクエストの数


  • 同じドメイン名で、異なるブラウザコアと異なるバージョンのブラウザを使用する場合、同時リクエストのほとんどは6です。

  • 最適化:

    a。スプライト画像:CSSスプライトとも呼ばれるCSSスプライトは、CSS画像マージテクノロジーです。この方法では、小さなアイコンと背景画像を1つの画像にマージし、CSS背景配置を使用して表示する必要のある画像を表示します。セクション。

    b。ピクチャーマップ:小さな写真と大きな写真をマージするパラダイムです。スプライトに似ています。違いは実現原理のみです。スプライトはCSSを介して画像の特定の部分のみを表示しますが、画像マップはhtmlコードから表示領域を制御します。

    c。JS&CSSマージ:複数の小さなjs、CSSを1つの大きなjs、CSSファイルにマージし、http要求を減らすという目的を間接的に達成します。

コンポーネントが圧縮されているかどうか


  • 圧縮方法:受信した圧縮方法をhttpリクエストに設定し、サーバー側で応答リソースを圧縮してからブラウザに送信します。通常、GZIPを使用してコンテンツエンコーディングフィールドを設定します

  • 圧縮オブジェクト:画像音楽を圧縮する必要はありません。Js、CSSは、スペースとキャリッジリターンを削除して圧縮し、GZIPで圧縮します。

画像のフォーマットとサイズが適切かどうか


  • 画像形式:JPGが最も費用効果が高いです。

  • 画像サイズ:一般的な仕様は480×800、600×1024、720×1280、800×1280などです。コードで画像を拡大または縮小する代わりに、元の画像を取得します。

  • 画像の圧縮:TinyPNG、Smush.itなどの圧縮ツールを使用すると、圧縮率が向上し、画質は変わりません。

上にCSS


  • CSSは、htmlコードの先頭にあるheadタグの末尾の前に配置する必要があります。CSSを下部に配置すると、「フラッシュ画面」のエクスペリエンスが低下する可能性があります。

下部のJS


  • jsをダウンロードすると、並列ダウンロードメカニズムが失敗します。レンダリングエンジンは、jsのダウンロードが完了するのを待ってからレンダリングを開始し、最後にjsをロードしてページの読み込み時間を短縮します。

JSとCSSの圧縮


  • 次のような圧縮方法:

    // CCの圧縮サンプルコード関数echo(stringA、stringB){var hello = "你好"; alert( "hello world");}

    最初のステップ:「単純化」し、jsのスペース、改行、コメントを削除して、セマンティクスを失うことなくjsコードをコンパクトにします。といった:

    function echo(stringA、stringB){var hello = "你好"; alert( "hello world")};

    2番目のステップ:「混乱」、メソッド名と変数名は、変数を1文字で表現できるなど、より短い方法で表現されます。といった:

    function echo(c、b){var a = "你好"、alert( "helloworld")};

    最後に、圧縮されたスクリプトファイルは、サーバー側で設定されたGZIP圧縮アルゴリズムを使用して圧縮されます。

キャッシュを追加するかどうか


  • セットの有効期限とHTTPMETAによるキャッシュ制御。

200以外の戻り値は避けてください


  • httpリクエストが200以外のステータスコードを返す場合、このリクエストは無意味であり、ネットワークリソースをほとんど占有しないと考えられるため、200以外のリターンステータスコードは避ける必要があります。

CDNを使用する


  • 時間関連:最初の画面時間、最初のリソースのダウンロード時間、合計リソースのダウンロード時間、ユーザー操作時間。

  • WebView関連:メモリ:ページのロード前後でメモリが変更されます。これは、ドームの数や画像のサイズなど、H5のリソースの数とサイズを間接的に反映できます。

    CPU:ページのリソーススタイルが複雑で視覚効果が強調されている場合、H5の描画品質を反映するようにCPU使用率を観察できます。CPUが長期間高い占有率である場合は、計算の複雑さやその他の手段による視覚的な影響を減らすことを検討してください。

    FPS:特にビデオとアニメーション効果のあるH5では、深刻な紙詰まりが流出しないようにフレームレートに注意を払う必要があります。

//フロントエンドの学習トレーニング、ビデオチュートリアル、学習ルートについては、プレステージを追加してください:kaixin666haoyun}


おすすめ

転載: blog.51cto.com/14895198/2549615