フロントエンドのメモ - フロントエンドの最適化の簡単な概要_html/css_WEB-ITnose

他の人が書いた情報を参考にした、フロントエンドの最適化に関する個人的な簡単な概要

1. サーバーの側面:
   
   1. 自分のサーバーの品質、帯域幅などを改善します
   2. ブラウザのキャッシュを有効にして http リクエストを削減します
   3. gzip圧縮を有効にする
   4. コンテンツ配信ネットワークcdnを使用する
2. htmlインターフェース
   
   1. cssファイルはheadに配置され、jsファイルはhtmlの最後に配置されます。特定の JS をダウンロードすると、他のタスクが一時停止されます。他の JS をダウンロードする前に、この JS がダウンロードされて実行されるまで待つ必要があります
   2. インライン CSS は適用されません
   3. タグはできるだけ最小限にし、それ以上のタグは使用しないでください。たとえば、float にクリアを使用します: after
   4. js の遅延読み込み、非同期読み込み、defer タグを使用、async="true"
   5. DNS クエリを削減します。外部からのファイルが参照されるたびに、DNS クエリが発生します。これは通常、Web サイトへの最初のアクセスの速度に影響します
   6. 404 を回避してください。js をダウンロードするときに 404 に遭遇することは大きな問題です
   7. 回避してください空の src、例: src=""
   8. http リクエストを削減: 画像スプライト テクノロジーを CSS および JS コードと組み合わせて使用​​します
3. コード アスペクト
   
   1. プロジェクトの最後に圧縮ツールを使用して CSS と JS を圧縮します
   2. CSSのクラスは長すぎず、階層関係を明確にする必要があります
   3. jsでスタイルを操作する場合はクラスを使用し、html内でインラインcssとjsコードを使用しないでください
4. JS最適化
   
   1. 文字列のスプライシング: using += は効率が低いため、配列の join() メソッドを使用できます
   2. ループを使用する場合、特に for (in) は使用しないでください。 while は for (;;) よりも効率的です
   3. ローカル変数はグローバル変数よりも高速にアクセスされます。グローバル変数は可能な限り避けるべきです
   4. そうですね DOM 要素に対する各操作は負荷が高いので、できるだけ操作を少なくするようにしてください。例えば、forループ内で文字列の継ぎ合わせがあり、innerHTMLを使って操作する場合、innerHTMLをforループの外に配置する必要があります
   5. 特定のdomノードを操作する場合は、domノードをローカル変数に格納してください
   6. About文字列トラバース、最初に正規表現を使用します
   7. 変数型変換
      
   8. 数値を文字列に変換します (""+)>String()>.toString()>newString()
   9. 文字列を数値に変換します parseInt ()
   10. 浮動小数点型と整数型の変換 Math.floor() または Math.round()
   直接量を使用する var a = [] は var a = new Array() よりも高速です
   dom ノードを最も作成しない方が良いです文字列を直接書き込みますが、createElement() メソッドを呼び出します