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!'); によって返されるコンテンツ
上記の方法でページに直接

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル