フロントエンドのパフォーマンスを最適化するにはどうすればよいですか?

フロントエンドのパフォーマンスを最適化するにはどうすればよいですか?

コンテンツの側面

1. HTTP リクエストを削減します: ファイル、CSS スプライト、インライン画像を結合します

2. DNS クエリを削減します: DNS クエリが完了するまで、ブラウザはこのホストからファイルをダウンロードできません。メソッド: DNS キャッシュ、適切な数のホスト名へのリソースの分散、並列ダウンロードと DNS クエリのバランス

3、リダイレクトの回避: 冗長な中間アクセス

4、Ajax をキャッシュ可能にする

5、必須ではないコンポーネント

6、将来必要になるコンポーネントのプリロード

7、DOM要素の数を削減

8、リソースを異なるドメインに配置: ブラウザは1つのドメインから同時にダウンロードしますリソースの数は限られており、ドメインを増やすと並列ダウンロードの数が増える可能性があります

9、iframe の数を減らす

10、404 はやめてください

サーバーアスペクト

1、CDN を使用します

2. Expires または Cache-Control 応答ヘッダーを追加します

4. ETag を設定します

。早めにバッファリング

6. Ajax はリクエストに GET を使用します 7. 空の src img タグを避ける

css アスペクト

1、スタイルシートをページの上部に配置します

2、使用しないでくださいCSS 式

3、@import なしで @import を使用します

4、IE フィルターを使用しない

Javascript アスペクト

1、スクリプトをページ

2、外部からJavaScriptとCSSを導入

3、JavaScriptとCSSを圧縮

4. 不要なスクリプトを削除

5. DOMアクセスを減らす

6.合理的なデザイン。イベントリスナー

写真

1. 実際の色のニーズに応じて画像を最適化します。色深度、圧縮を選択します

2、CSS スプライトを最適化します

3、しないでください。ストレッチの画像HTML で

4、favicon.ico が小さくてキャッシュ可能であることを確認してください

mobile Aspects

1、コンポーネントが 25k 未満であることを確認してください

2、コンポーネントをパックするマルチパートドキュメント

上記は私がまとめたフロントエンドのパフォーマンス最適化ソリューションです。他に良いソリューションがある場合は、メッセージを残してください。

以上がフロントエンドのパフォーマンスを最適化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。