高パフォーマンスなWEB開発なぜリクエスト数を減らす必要があるのかリクエスト数を減らすにはどうすればいいのか？-htmlチュートリアル-php.cn

高パフォーマンスなWEB開発なぜリクエスト数を減らす必要があるのかリクエスト数を減らすにはどうすればいいのか？

黄舟

リリース： 2016-12-16 15:36:59

オリジナル

942 人が閲覧しました

http リクエストヘッダーのデータ量

まずリクエストヘッダーを分析して、各リクエストにどのような追加データが含まれているかを確認しましょう。以下は監視対象の Google リクエストヘッダーです。

ホスト www.google.com.hk
ユーザーエージェント Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 GTBDFff GTB7.0
text/html、application/xhtml+xml、application/xml;q=0.9、*/*;q=0.8 を受け入れます
Accept-Language zh-cn,en-us;q=0.7,en;q=0.3
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
キープアライブ 115
プロキシ接続キープアライブ

レスポンスヘッドが返されました

日付土曜日、 17 Apr 2010 08:18:18 GMT
有効期限 -1
キャッシュ制御プライベート、max-age=0
Content-Type text/html; charset=UTF-8
Set-Cookie PREF=ID=b94a24e8e90a0f50:NW=1:TM=1271492298:LM=1271492298:S=JH7CxsIx48Zoo8Nn; 期限切れ = 2012 年 4 月 16 日月曜日 08:18:18 GMT パス =/; NID=33=EJVyLQBv2CSgpXQTq8DLIT2JQ4aCAE9YKkU2x-h4hVw_ATrGx7njA69UUBMbzVHVnkAOe_jlGGzOoXhQACSFDP1i53C8hWjRTJd0vYtRNWhGYGv491mwbngkT6LCYbvg; 期限切れ=2010 年 10 月 17 日日曜日 08:18:18 GMT パス=/.google.com.hk;
コンテンツエンコーディング gzip
サーバー gws

コンテンツ長 4344

ここで送信されるリクエストヘッダーのサイズは約420バイト、返されるリクエストヘッダーのサイズは約600バイトです。

各リクエストが送信用の追加情報をもたらすことがわかります (このリクエストには Cookie は含まれません)。リクエストされたリソースが非常に小さい場合 (1k 未満のアイコンなど)、リクエスト内のデータは実際のアイコンよりも大きくなりますが、データ量はまだ多くなります。

そのため、リクエストが増えると、ネットワーク上でより多くのデータが送信され、当然通信速度は遅くなります。

実際、リクエストによってもたらされるデータの量にはまだ小さな問題があります。結局のところ、リクエストによってもたらされるデータの量はまだ限られています。

http接続のオーバーヘッド

リクエストヘッダー内の追加データと比較して、http 接続のオーバーヘッドはより深刻です。まず、ユーザーが URL を入力してからコンテンツをクライアントにダウンロードするまでに必要な段階を見てみましょう。

1. ドメイン名解決
2. TCP 接続を開く
3. リクエストを送信する
4. 待機 (主にネットワーク遅延とサーバー処理時間を含む)
5. リソースのダウンロード

多くの人は、各リクエストのほとんどの時間がダウンロード段階に費やされると考えているかもしれません

高パフォーマンスなWEB開発なぜリクエスト数を減らす必要があるのかリクエスト数を減らすにはどうすればいいのか？

上の図を見ると驚くかもしれません。実際のダウンロード時間よりもはるかに長い時間がグラフからわかります:
1. 各リクエストに費やされる時間のほとんどは、リソースのダウンロード段階ではありません。
2. リソースがどんなに小さくても、他の段階では時間がかかりますが、ダウンロード段階は短くなります (上の図の 6 番目のリソースを参照、わずか 284 バイト)。

上記の 2 つの状況に直面して、どのように最適化すべきでしょうか?リクエストの数を減らすと、他のフェーズのコストが減り、ネットワーク上で転送されるデータ量が減ります。

リクエストの数を減らす方法

1. ファイルの結合
ファイルの結合とは、多数の JS ファイルを 1 つのファイルに結合することです。この方法は多くの人が使用するはずなので、ここでは詳しく紹介しません。
推奨されるマージツールは 1 つだけです: yuiCompressor このツールは yahoo によって提供されています。 http://developer.yahoo.com/yui/compressor/

2. 画像を結合します
これは CSS を使用していますスプライトは背景画像の位置を制御することでさまざまな画像を表示します。このテクノロジーは誰でも使用していますが、詳しくは紹介しません: http://csssprites.com/。

3. JS と CSS を 1 つのファイルに結合します。
上記の最初の方法は、複数の JS ファイルを 1 つの JS ファイルにマージし、複数の CSS ファイルを 1 つの CSS ファイルにマージする方法についてのみ説明しています。他の記事を参照してください。
http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html

4. イメージマップを使用する
イメージマップ複数の画像を 1 つの画像に結合し、HTML のタグを使用して画像を接続し、画像のさまざまな領域をクリックしてさまざまなアクションを実行します。ナビゲーションバーで地図が使いやすくなりました。
イメージマップの使用方法については、以下を参照してください。 http://www.w3.org/TR/html401/struct/objects.html#h-13.6

5. データ埋め込み画像
この方法では、画像をエンコードして HTML に直接埋め込み、HTTP リクエストを減らすために使用しますが、これにより HTML ページのサイズが大きくなり、埋め込まれた画像をキャッシュすることができません。以下の図を参照してください。

上の画像は、画像をbase64エンコードしてから、data:を使用してHTMLに埋め込むコードは次のとおりです（以下は省略されており、ソースコードが表示されます）。
高パフォーマンスなWEB開発なぜリクエスト数を減らす必要があるのかリクエスト数を減らすにはどうすればいいのか？

Google のビデオ検索では、以下の図に示すように、検索されたビデオのサムネイルはすべて埋め込み画像を使用しています: 高パフォーマンスなWEB開発なぜリクエスト数を減らす必要があるのかリクエスト数を減らすにはどうすればいいのか？

高パフォーマンスなWEB開発なぜリクエスト数を減らす必要があるのかリクエスト数を減らすにはどうすればいいのか？

上記の方法にはすべて長所と短所があります。たとえば、データを使用して画像を埋め込むと、リクエストの数が減りますが、ページサイズが増加します。

つまり、Microsoft の Bing 検索は、ユーザーが最初にアクセスしたときにデータを使用して画像を埋め込み、その後バックグラウンドで実際の画像を遅延ロードすることで、データを使用せずにキャッシュされた画像を直接使用します。

上記は、高パフォーマンスの WEB 開発についてです。なぜリクエストの数を減らす必要があるのでしょうか? リクエストの数を減らす方法については、PHP 中国語 Web サイト (www.php.cn) を参照してください。！