dns-prefetch とは何ですか? フロントエンドの最適化: DNS の事前解決によりページ速度が向上します

背景

DNS 要求は帯域幅をほとんど消費しませんが、待ち時間が長くなります。これはモバイルネットワークではより顕著になります。 DNS事前解決技術は遅延を効果的に削減できる

Firefox で dns-prefetch を使用すると、DNS 事前解決はページの読み込みと並行して処理され、ページの読み込みのパフォーマンスには影響しません。

主に画像ベースのモバイルウェブサイトにアクセスする場合、DNS事前解決を使用するとページの読み込み時間が5％改善されます。

1. dns-prefetch とは何ですか?

DNS はドメイン名から IP へのマッピングを実現します。ドメイン名を通じてサイトにアクセスする場合、リクエストごとに DNS 解決が必要になります。現在、各 DNS 解決には通常 200 ミリ秒未満かかります。時間のかかる DNS 解決の問題に対処するために、一部のブラウザでは DNS プリフェッチを使用してアクセスのスムーズさを向上させています。
DNS プリフェッチは DNS 事前解決技術です。Web を閲覧する際、ブラウザは Web ページを読み込む際に Web ページ内のドメイン名を解決してキャッシュします。これにより、現在の Web ページ内のリンクをクリックするときに DNS 解決を実行する必要がなくなり、ユーザーの待ち時間が短縮され、ユーザーエクスペリエンスが向上します。

現在、各 DNS 解決には通常 200 ミリ秒未満かかります。時間のかかる DNS 解決の問題に対処するために、一部のブラウザでは DNS プリフェッチを使用してアクセスのスムーズさを向上させています。

現在、DNS プリフェッチをサポートしているブラウザは、Google Chrome と Firefox 3.5 です。

2. dns-prefetch を設定するにはどうすればいいですか?

ブラウザで特定のドメイン名を解決したい場合は、ページにリンクタグを追加できます。例えば：

<link rel="dns-prefetch" href="http://img.jb51.net" />

ブラウザがドメイン名を事前に解決するかどうかを制御する場合は、HTTP ヘッダーの x-dns-prefetch-control 属性を通じて制御できます。
残念ながら、現在上記のタグをサポートしているのは Google Chrome と Firefox 3.5 のみです。

一般的に言えば、この遅延の原因は相手側の Web サイトの帯域幅や負荷ではないのですが、この状況は一体何が原因で発生するのでしょうか? Zhanlan は推測し、DNS 解決速度がリソース遅延の最大の原因である可能性が高いため、DNS の問題であると想定しました。そこで、Zhanlan はページヘッダーに次のコードを追加しました (DNS 事前解決用)。

<meta http-equiv="x-dns-prefetch-control" content="オン" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />
<link rel="dns-prefetch" href="http://img.jb51.net" />

効果は非常に良好で（テストブラウザはIE8）、他のページを開いたときのBaidu共有ボタンの読み込み速度が大幅に向上しました。

<link rel="dns-prefetch" href="http://common.jb51.net" />

<link rel="dns-prefetch" href="//common.jb51.net" />

3. DNSプリフェッチ事前解決の実装原則と注意事項

1. <meta> 情報は、現在のページを DNS で事前に解決する必要があることをブラウザに伝えます。

<meta http-equiv="x-dns-prefetch-control" コンテンツ="オン" />

2.</head> <link> タグを使用して DNS 事前解決を強制します。

<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

3. dns-prefetch は注意して使用してください。複数のページの DNS 事前解決を繰り返すと、DNS クエリの繰り返し回数が増加します。

4. ブラウザによるウェブサイトのドメイン名の最初の DNS 解決プロセス:

ブラウザキャッシュ -> システムキャッシュ -> ルーターキャッシュ -> ISP -> DNS キャッシュ -> 再帰検索

5. 暗黙的なDNSプリフェッチを無効にしたい場合は、次のタグを使用できます。

<meta http-equiv="x-dns-prefetch-control" コンテンツ="オフ">

IV. 典型的なケース

淘宝網:

<link ref="dns-prefetch" href="//tce.taobao.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link rel="dns-prefetch" href="//tui.taobao.com" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />

Alipay、NetEaseなど

知らせ;

DNS プリフェッチを使用するとページの解決が速くなりますが、DNS プリフェッチを無効にすると 1 か月あたり 100 億件の DNS クエリを節約できると指摘する開発者もいるため、乱用すべきではありません。

5. DNSプリフェッチプロセス

ブラウザが URL を要求すると、Firebug を通じて、ブロック、ドメイン名の解決、接続の確立、要求の送信、応答の待機、データの受信などのプロセスが実行されることがわかります。最後の 4 つは、ユーザーのネットワーク状態とサーバーの処理速度に関係します。この記事では、最初の 2 つに焦点を当てます。

1. ブロッキング: 解決策 - ブラウザの同時接続数を増やす

ブロッキング: ブラウザによって、単一のドメイン名に対する同時接続の最大数に一定の制限があり、HTTP/1.0 と HTTP/1.1 も異なります。たとえば、HTTP/1.1 プロトコルでは IE6 の同時接続数は 2 に制限されていますが、HTTP/1.0 では IE6 の同時接続数は 4 までになります。他のブラウザにも同様の制限があり、通常は 4 ～ 8 です。このとき、ブラウザがドメイン名に対して同時に複数のリクエストを開始した場合、制限を超えると待機状態が発生し、ブロックされます。

ブロック問題を解決するには、特定の URL のドメイン名を分散させることができます。たとえば、画像のドメイン名は通常、img.guoweiwei.com に似ています。ページに 20 枚以上の画像が含まれている場合、少なくとも 10 件のリクエストがブロックされます。img0.guoweiwei.com/img1.guoweiwei.com/img2.guoweiwei.com/… などの異なるドメイン名に分散すると、少なくともこれらの 20 件の画像リクエストが同時に実行され、Web サイトの起動速度が大幅に向上します。同様に、一部の CSS/JS ドメイン名にも同じ処理を適用できます。

2. ドメイン名解決: 解決策 - DNS事前解決

ドメイン名解決: ドメイン名から IP を照会するプロセス。このプロセスは一般に非常に高速ですが、遅延が発生することもあります。通常、ブラウザは解決結果を適切にキャッシュし、ページに表示される新しいドメイン名を事前に解決しますが、すべてのブラウザがこれを行うわけではありません。他のブラウザが特定のドメイン名を事前に解決できるようにするには、次のように、ページの HTML タグに dns-prefetch を追加して、ブラウザに指定されたドメイン名を事前に解決するように指示します。

<link rel="dns-prefetch" href="//domain.com">

注意深く見てみると、Taobao の Web サイトでこの 2 つの現象が見つかります。Taobao には、img0.tbcdn.cn のようなドメイン名が多数あります。

もう一つの最適化ポイント:

3. クッキーの分離

では、なぜドメイン名 img0.taobao.com ではなく img0.tbcdn.cn を使用するのでしょうか?これはクッキーから始めなければなりません。Taobao のクッキーはすでに非常に大きく、1K に近いと言われています。最後にドメイン名を使用すると、各画像リクエストに長いクッキーが含まれます。結果は明らかです。ネットワークリクエストが遅くなるだけでなく、帯域幅も浪費されます。Taobao の画像サーバーにはこれらのクッキーは必要ありません。これをクッキー汚染と呼び、この問題を解決するには別のドメイン名が必要になります。

ハイライトは次のとおりです。

4. DNS事前解決ソリューション

DNS 事前解決とは、ユーザーがリンクにアクセスする前にブラウザがドメイン名を解決しようとすることです。これは、コンピューターの通常の DNS 解決メカニズムです。

ドメイン名が解決された後、ユーザーが実際にドメイン名にアクセスすると、DNS 解決時間に遅延は発生しません。

最も明白な例は、検索結果ページなど、ページに多数のドメイン名が含まれている場合に DNS 事前解決が非常に効果的であるということです。 Web ページでハイパーリンクに遭遇すると、DNS プリフェッチによってそこからドメイン名が抽出され、IP アドレスに解決されます。この作業は、ユーザーが Web を閲覧している間、最小限の CPU とネットワークを使用してバックグラウンドで実行されます。ユーザーがこれらの事前に解決されたドメイン名をクリックすると、平均 200 ミリ秒の時間消費を削減できます (ユーザーが最近ドメイン名にアクセスしていないと仮定)。さらに重要なことは、ユーザーが DNS 解決の最悪のシナリオ (多くの場合 1 秒を超える) に遭遇しないことです。

DNS プリフェッチ、または DNS 事前取得は、フロントエンドの最適化の一部です。一般的に、フロントエンドの最適化において DNS に関連するポイントは 2 つあります。

1 つは DNS 要求の数を減らすことです。

もう 1 つは、DNS 事前取得を実行することです。

インターネットの基本プロトコルである DNS の解決速度は、Web サイトの最適化担当者によって簡単に見落とされてしまうようです。現在、ほとんどの新しいブラウザは DNS 解決に最適化されています。一般的な DNS 解決には 20 ～ 120 ミリ秒かかります。DNS 解決の時間と数を減らすことは、優れた最適化方法です。

DNS プリフェッチを使用すると、ユーザーがリンクをクリックすることなく、この属性を持つドメイン名をバックグラウンドで解決できます。ドメイン名の解決とコンテンツの読み込みはシリアルネットワーク操作であるため、この方法によりユーザーの待ち時間が短縮され、ユーザーエクスペリエンスが向上します。

ブラウザによるウェブサイトの最初のDNS解決検索プロセスは次のようになります: ブラウザキャッシュ - システムキャッシュ - ルーターキャッシュ - ISP DNSキャッシュ - 再帰検索

デフォルトでは、ブラウザは、現在のドメイン名 (閲覧中の Web ページのドメイン名) と同じドメインではないページ内のドメイン名をプリフェッチし、その結果をキャッシュします。これが暗黙的な DNS プリフェッチです。ページに表示されないドメインをプリフェッチする場合は、明示的な DNS プリフェッチを使用します。

現在、ほとんどのブラウザはすでにこのプロパティをサポートしています。サポートされているバージョンは次のとおりです。

•– サファリ: 5歳以上
•– Chrome: すべて
•– Firefox: 3.5以上
•– オペラ: 不明
•– IE: 9+ (blogs.msdn.com では「事前解決」と呼ばれています)

Chrome および Firefox 3.5 以降には DNS プリフェッチテクノロジーが組み込まれており、DNS 事前解決に対応する最適化設定が行われています。したがって、このプロパティを設定しなくても、Chrome および Firefox 3.5 以降ではバックグラウンドで事前解析が自動的に実行されます。

現在、多くの大規模サイトでもこの最適化が適用されています。たとえば、次のようになります。

タオバオ、アリペイ、ネットイース

DNS プリフェッチは、可能な限り Web ページの先頭に配置し、<meta charset="UTF-8"> の後に配置することをお勧めします。具体的な使い方は以下のとおりです。

<meta http-equiv="x-dns-prefetch-control" コンテンツ="オン">
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

事前解析の実装:

1. メタ情報を使用して、現在のページを DNS で事前に解決する必要があることをブラウザに通知します。<meta http-equiv="x-dns-prefetch-control" content="on" />

2. ページヘッダーのリンクタグを使用して、DNS 事前解決を強制します。<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

注意: dns-prefetch は注意して使用してください。複数のページの DNS 事前解決を繰り返すと、繰り返される DNS クエリの数が増えます。

DNS プリフェッチを使用するとページ解決が高速化しますが、DNS プリフェッチを無効にすると 1 か月あたり 100 億件の DNS クエリを節約できると指摘する開発者もいるため、これを乱用すべきではないことに注意してください。

暗黙的な DNS プリフェッチを無効にする必要がある場合は、次のタグを使用できます。