フロントエンドのパフォーマンスの最適化&&サイトのパフォーマンスの最適化

負荷の最適化:1、は、JavaScript CSSをマージ
     2は、小さな写真で、スプライトを使用
     3、キャッシュのすべてのキャッシュ可能なリソース
     4、長いキャッシュの使用
     5、使用したアウトリーチ型リファレンスCSS、JavaScriptの
     6、圧縮されたHTML、CSS、JavaScriptの
     7 gzipは圧縮コンテンツ使用して
     ロードされた最初の画面を使用して、8
     デマンドローディング使用し、9を
     スクロール負荷用いて、10の
     メディアクエリ負荷によって、11を
     ロードプログレスバー増加させるために12
     クッキー減らすために、13を
     リダイレクト回避するために、14を
     15に、非同期読み込み、サードパーティのリソース
画像最適化:1、チ図http://zhitu.tencent.com/
     2、使用CSS3、SVG、iconfont画像の代わりに
     3、srcset使用
     JPGよりも優れ4、WEBP
     GIFより良好5、PNG8
     6は、最初に負荷を超えません(平均リンク速度値に基づいて3秒に達することができる)1014キロバイト
     7、写真は640よりも幅広ではありません

CSSの最適化:1、頭、JavaScriptやの終わりに非同期書き込みで書かれたCSS
      2、リンク、スクリプト、IMG、IFRAMEおよびその他のラベルが空のsrcとのhref表示させてはいけない
      3を、リセット画像サイズ回避しようと
      、写真を使用して回避しようと4をdataUrl
      5は、書き込み属性を回避しようと
      CSSの表現避けるため、6
      空のCSS削除、7
      財産の適切な使用の表示を実行し、8を
      フロート乱用していない、9を
      ウェブフォント乱用していない、10
      文のサイズのフォントのあまりない11、
      12、値は任意の単位を必要としない場合0
      13を、様々なブラウザの標準化は、プレフィックス
      長いセレクタを避けるために、14

スクリプトの最適化:1、及び再描画軽減還流
     2、DOMキャッシュ選択演算
     イベントバインディングバルクを避けるために、イベントブローカーを利用するために、3を
     IDセレクタを利用するために、4を
     touchstart、クリックのtouchend場所を使用して、5
     6、スロットルの使用の合理化。そして、手ぶれ補正
     7、不要なジャンプ、合理的なキャンセル、ブラウザのデフォルトのイベント避けるため
     、8の404は避ける
     9コンフィギュレーションてETag
     10、以下のグローバル変数は、ローカル変数を使用しようとする
        11、変数や定数の連結文の数を

最適化レンダリング:ビューポート使用して1、HTMLを
        DOMノード削減、2を
        3に、CSS3アニメーションを使用してみてください
     4、代わりのsetTimeoutのrequestAnimationFrameのアニメーションの使用の合理化
     5、キャンバスのアニメーションの適切な使用
     6、Touchmoveを、スクロールイベントは、レンダリング、複数になることができ
     、CSS3トランジションを使用し、7 CSS3 3D変換、不透明度、キャンバス、 WebGLの、ビデオはGPUレンダリングをトリガーします

 

 

 

 

 

要約すると:

  正しいネストされた空のタグを避けるボックス、虚無は
  長いセレクタ避ける
  正規化された接頭辞さまざまなブラウザは
  、スプライトを使用するサーバー要求を減らす
  ラベル属性の使用を避けるために
  ベルトユニットをする必要がないときに値が0で
  リセットしないようにしよう画像サイズ
  のjpgよりWEBP良く、gif形式は、より良いPNG8
  絞られて画像安定化
  プリロードされたと遅延ロードを使用して、非同期読み込み、サードパーティのリソース
  圧縮ツールを使用すると、HTMLを圧縮し、CSS、JavaScriptの
  長い接続を使用して
  、クッキー減らすために
  使用イベントの委任
  回避をブラウザのデフォルトのイベントの必要かつ合理的な利用をジャンプキャンセル
  少ないグローバル変数、ローカル変数の使用を、変数や定数の数がステートメント組み合わせることができる
  代わりのsetTimeoutのrequestAnimationFrameのアニメーションの使用の合理化

おすすめ

転載: www.cnblogs.com/wuqilang/p/11204634.html