Web ページのパフォーマンスを最適化する方法
フロントエンドは、HTML、CSS、JavaScript、画像、Flash、その他のさまざまなリソースを含む巨大なものです。フロントエンドの最適化は複雑で、リソースのあらゆる側面に対してさまざまな方法があります。では、フロントエンド最適化の目的は何でしょうか?
1. ユーザーの観点から見ると、最適化によりページの読み込みが速くなり、ユーザーの操作により迅速に応答し、ユーザーによりフレンドリーなエクスペリエンスを提供できます。
2. サービスプロバイダーの観点から見ると、最適化によりページリクエストの数が減ったり、リクエストが占有する帯域幅が減少したりするため、かなりのリソースを節約できます。
つまり、適切な最適化はサイトのユーザーエクスペリエンスを向上させるだけでなく、リソース使用率を大幅に節約することもできます。
フロントエンドを最適化する方法はたくさんありますが、粒度に応じて大きく 2 つのカテゴリに分けることができます。最初のカテゴリは、HTTP リクエストの数、スクリプトのノンブロッキング読み込み、位置などのページレベルの最適化です。インライン スクリプトなどの最適化。2 番目のカテゴリは、JavaScript での DOM 操作の最適化、CSS セレクターの最適化、画像の最適化、HTML 構造の最適化などのコード レベルの最適化です。また、後述する各種の最適化戦略は、入出力比の向上を目的として、入出力比が大きいものから小さいものの順に大まかに整理されています。
1. ページレベルの最適化
1. HTTP リクエストの数を減らす
この戦略は基本的にすべてのフロントエンド担当者に知られており、最も重要かつ効果的でもあります。 HTTP リクエストは減らすべきだと言われていますが、リクエストが多すぎるとどうなるでしょうか? まず、各リクエストには時間コストとリソース コストの両方を含むコストがかかります。完全なリクエストには、DNS アドレス指定、サーバーとの接続の確立、データの送信、サーバーの応答の待機、データの受信という「長く」複雑なプロセスが必要です。時間のコストは、リソース上の各リクエストにデータを送信する必要があるため、ユーザーがリソースを確認または「感じる」ためにプロセスが終了するまで待たなければならないことです。また、ブラウザが同時に実行できるリクエスト数には上限があるため（詳細はこちら）、リクエスト数が増加すると、ブラウザはリクエストをまとめて実行する必要があり、ユーザーの待ち時間が長くなります。ユーザーの Web サイトに問題が発生すると、ユーザーに表示される最初の画面上のすべてのリソースが要求された場合でも、ブラウザーのプログレス バーが常に存在するという印象を受けます。
HTTP リクエストの数を減らす主な方法は次のとおりです:
(1) ページを設計および実装レベルから簡素化する
ページが Baidu のホームページと同じくらい単純であれば、以下のルールは基本的に不要です。ページをシンプルにしてリソースの使用量を減らすのが最も簡単です。そうでなく、ページにゴージャスなスキンが必要な場合は、以下を読み続けてください。
(2). HTTP キャッシュを適切に設定する
キャッシュの力は強力で、適切なキャッシュ設定により HTTP リクエストを大幅に削減できます。 Youa のホームページを例にとると、ブラウザがキャッシュしていない場合、合計 78 件のリクエストが発行され、合計 600K を超えるデータが含まれます (図 1.1 に示すように)。キャッシュされている場合、リクエストは 10 件のみで、データの合計は 20K を超えます (図 1.2)。 (ここで、F5 キーでページを直接更新すると、効果が異なることに注意してください。この場合、リクエストの数は同じですが、キャッシュされたリソースに対するリクエスト サーバーは 304 応答です。 header には body がないため、帯域幅を節約できます)
合理的な設定とは何ですか? 原理は非常に単純で、キャッシュできる時間が長ければ長いほど良いのです。たとえば、めったに変更されない画像リソースは、HTTP ヘッダーの Expires を使用して長い有効期限ヘッダーを直接設定できます。また、めったに変更されないが変更される可能性のあるリソースは、リクエストの検証に Last-Modifed を使用できます。リソースをできるだけ長くキャッシュに保持します。 HTTP キャッシュの具体的な設定と原則については、ここでは詳しく説明しません。興味のある方は、次の記事を参照してください:
HTTP1.1 プロトコルのキャッシュ戦略の説明
Fiddler HTTP パフォーマンスのキャッシュの概要
(3). リソースのマージと圧縮
可能であれば、外部のスクリプトとスタイルを可能な限りマージし、複数を 1 つにマージします。さらに、CSS、JavaScript、および画像はすべて、対応するツールを使用して圧縮でき、圧縮後に多くのスペースを節約できます。
(4). CSS スプライト
CSS 画像を結合することもリクエストの数を減らす良い方法です。
(5). インライン画像
使用データ：
リソース管理の問題を考慮しない場合は、URL スキームを使用してページまたは CSS に画像を埋め込むのが良い方法です。ページ内に埋め込むとページサイズが大きくなり、ブラウザのキャッシュが使用できなくなります。 CSS で使用される画像の方が理想的です。
(6). 画像の遅延読み込み（このセクションの内容がまだ理解できません）
この戦略では実際には HTTP リクエストの数が減らない可能性がありますが、特定の条件下またはページが読み込まれたばかりの場合には HTTP リクエストの数を減らすことができます。画像の場合、ページが最初に読み込まれるときは最初の画面のみを読み込むことができ、ユーザーがスクロールバックを続けるときに後続の画像のみを読み込むことができます。このようにして、ユーザーが最初の画面のコンテンツだけに興味がある場合、残りの画像リクエストは保存されます。
はいホームページ
以前のアプローチは、読み込み時に Textarea タグの最初の画面の後の画像アドレスをキャッシュし、ユーザーが下にスクロールしたときにそれらを「遅延」して読み込むことでした。
2. 外部スクリプトを一番下に置きます（ページ情報コンテンツがロードされた後にスクリプトコンテンツをロードします）
前述したように、ブラウザはこの機能によりリソースをより速くロードできます。たとえば、スクリプトが読み込まれる前に、その背後にある画像、スタイル、その他のスクリプトがブロックされ、スクリプトが読み込まれるまで読み込みが開始されません。スクリプトが比較的高い位置に配置されると、ページ全体の読み込み速度に影響し、ユーザー エクスペリエンスに影響を与えます。この問題を解決するには多くの方法があります。
詳しい紹介はこちら
（こちらがその訳です、
より詳細な例
)、最も簡単で信頼性の高い方法は、スクリプトをできるだけ後ろに移動して、同時ダウンロードへの影響を軽減することです。
3. インラインスクリプトの非同期実行 (実際、原理は上記と同じで、ページコンテンツの後にスクリプトが確実に読み込まれるようにします。)
インラインスクリプトがパフォーマンスに与える影響は、外部スクリプトの影響よりもさらに悪いです。ホーム ページでは、外部スクリプトと同様に、インライン スクリプトも実行時に同時リクエストをブロックします。また、ブラウザはページ処理においてシングルスレッドであるため、ページがレンダリングされる前にインライン スクリプトが実行されると、ページのレンダリング作業が延期されます。 。つまり、インライン スクリプトが実行されると、ページは空白になります。上記 2 つの理由を考慮すると、実行に時間がかかるインライン スクリプトは非同期で実行することをお勧めします。非同期の方法としては、script 要素の defer 属性を使用する方法などがあります (互換性の問題やその他の問題があります)。 document.write は使用できないため)、setTimeout を使用します
、さらに HTML5 で導入されました
Web Workersの仕組みはまさにそんな問題を解決してくれるのです。
4. Lazy Load Javascript (ロードする必要がある場合にのみロードされ、通常の状況では情報コンテンツはロードされません。)
Javascript フレームワークの人気に伴い、フレームワークを使用するサイトも増えています。ただし、フレームワークには多くの機能実装が含まれていることが多く、これらの機能はすべてのページで必要になるわけではありません。不要なスクリプトをダウンロードすると、帯域幅と実行時間の両方が無駄になります。現在、2 つのアプローチがあり、1 つは特にトラフィックの多いページ用にフレームワークの専用のミニ バージョンをカスタマイズする方法で、もう 1 つは Lazy Load です。 YUI は 2 番目の方法を使用します。YUI の実装では、コア モジュールのみが最初にロードされ、他のモジュールは必要になるまで待機できます。
5. CSSをHEADに配置します
BODYなど他の場所にCSSを配置すると、CSSをダウンロードして解析する前にブラウザがページのレンダリングを開始し、ページがCSSなしの状態からジャンプしてしまう可能性があります。 CSS の状態が悪化すると、ユーザー エクスペリエンスが低下します。さらに、一部のブラウザでは、CSS がダウンロードされた後にのみページのレンダリングが開始されます。CSS が低い位置に配置されていると、ブラウザのレンダリング時間が遅くなります。
6. 非同期リクエストコールバック（つまり、いくつかの動作スタイルを抽出し、情報コンテンツをゆっくりとロードします）
一部のページでは、データを非同期にリクエストするためにスクリプトタグを使用する必要があるような要件がある場合があります。類似:
JavaScript:
/*Callback function*/
function myCallback(info){
//do something here
}
HTML:
cb:
myCallback('Hello world!'); によって返されるコンテンツ
上記の方法でページに直接
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7529
15
1378
52
82
11
21
76
PHP 配列キー値の反転: さまざまな方法のパフォーマンス比較分析
May 03, 2024 pm 09:03 PM
PHP の配列キー値の反転メソッドのパフォーマンスを比較すると、array_flip() 関数は、大規模な配列 (100 万要素以上) では for ループよりもパフォーマンスが良く、所要時間が短いことがわかります。キー値を手動で反転する for ループ方式は、比較的長い時間がかかります。
さまざまな Java フレームワークのパフォーマンスの比較
Jun 05, 2024 pm 07:14 PM
さまざまな Java フレームワークのパフォーマンス比較: REST API リクエスト処理: Vert.x が最高で、リクエスト レートは SpringBoot の 2 倍、Dropwizard の 3 倍です。データベース クエリ: SpringBoot の HibernateORM は Vert.x や Dropwizard の ORM よりも優れています。キャッシュ操作: Vert.x の Hazelcast クライアントは、SpringBoot や Dropwizard のキャッシュ メカニズムよりも優れています。適切なフレームワーク: アプリケーションの要件に応じて選択します。Vert.x は高パフォーマンスの Web サービスに適しており、SpringBoot はデータ集約型のアプリケーションに適しており、Dropwizard はマイクロサービス アーキテクチャに適しています。
C++ プログラムの最適化: 時間の複雑さを軽減する手法
Jun 01, 2024 am 11:19 AM
時間計算量は、入力のサイズに対するアルゴリズムの実行時間を測定します。 C++ プログラムの時間の複雑さを軽減するためのヒントには、適切なコンテナー (ベクター、リストなど) を選択して、データのストレージと管理を最適化することが含まれます。クイックソートなどの効率的なアルゴリズムを利用して計算時間を短縮します。複数の操作を排除して二重カウントを削減します。条件分岐を使用して、不必要な計算を回避します。二分探索などのより高速なアルゴリズムを使用して線形探索を最適化します。
C++ でマルチスレッド プログラムのパフォーマンスを最適化するにはどうすればよいですか?
Jun 05, 2024 pm 02:04 PM
C++ マルチスレッドのパフォーマンスを最適化するための効果的な手法には、リソースの競合を避けるためにスレッドの数を制限することが含まれます。競合を軽減するには、軽量のミューテックス ロックを使用します。ロックの範囲を最適化し、待ち時間を最小限に抑えます。ロックフリーのデータ構造を使用して同時実行性を向上させます。ビジー待機を回避し、イベントを通じてリソースの可用性をスレッドに通知します。
ベンチマークを使用して Java 関数のパフォーマンスを評価するにはどうすればよいですか?
Apr 19, 2024 pm 10:18 PM
Java 関数のパフォーマンスをベンチマークする方法は、Java Microbenchmark Suite (JMH) を使用することです。具体的な手順は次のとおりです。 JMH 依存関係をプロジェクトに追加します。新しい Java クラスを作成し、ベンチマーク メソッドを表す @State アノテーションを付けます。クラス内にベンチマーク メソッドを記述し、 @Benchmark アノテーションを付けます。 JMH コマンド ライン ツールを使用してベンチマークを実行します。
PHP 配列をオブジェクトに変換すると、パフォーマンスにどのような影響がありますか?
Apr 30, 2024 am 08:39 AM
PHP では、配列からオブジェクトへの変換はパフォーマンスに影響を与え、主に配列のサイズ、複雑さ、オブジェクト クラスなどの要因によって影響を受けます。パフォーマンスを最適化するには、カスタム反復子の使用、不必要な変換の回避、配列のバッチ変換などの手法を検討してください。
C++ と他の言語のパフォーマンスの比較
Jun 01, 2024 pm 10:04 PM
高パフォーマンスのアプリケーションを開発する場合、C++ は、特にマイクロベンチマークで他の言語よりも優れたパフォーマンスを発揮します。マクロベンチマークでは、Java や C# などの他の言語の利便性と最適化メカニズムの方がパフォーマンスが優れている場合があります。実際のケースでは、C++ は画像処理、数値計算、ゲーム開発で優れたパフォーマンスを発揮し、メモリ管理とハードウェア アクセスを直接制御することで明らかなパフォーマンス上の利点をもたらします。
Java フレームワークのパフォーマンス比較
Jun 04, 2024 pm 03:56 PM
ベンチマークによると、小規模で高性能なアプリケーションの場合、Quarkus (高速起動、低メモリ) または Micronaut (TechEmpower に優れた) が理想的な選択肢です。 SpringBoot は大規模なフルスタック アプリケーションに適していますが、起動時間とメモリ使用量が若干遅くなります。
