フロントエンドのパフォーマンス最適化--- DNS Prefetch

DNSの原則

DNS(ドメインネームシステム)。ドメイン名とIPアドレスが相互にマッピングされる分散データベースとして。ブラウザがドメイン名にアクセスするとき、対応するドメイン名のIPアドレスを取得するためにDNSを一度解決する必要があります。解決プロセス中、キャッシュはブラウザキャッシュ、システムキャッシュ、ルーターキャッシュ、ISP(オペレーター)DNSキャッシュ、ルートドメインネームサーバー、トップレベルドメインネームサーバー、プライマリドメインネームサーバーの順に、IPアドレスが取得されるまで徐々に読み取られます

DNSプリフェッチの原則

DNS Prefetchは、ブラウザによって定義されたルールに従って早期解決後に使用される可能性があるドメイン名です。これにより、解決結果がシステムキャッシュにキャッシュされ、DNS解決時間が短縮され、Webサイトへのアクセス速度が向上します。

DNS Prefetchの使用方法

自動解決Chromiumは、ハイパーリンクのhref属性を使用して、事前解決されるホスト名を見つけます。タグが検出されると、Chromiumはhref内のドメイン名をIPアドレスに自動的に解決します。この解決プロセスは、ユーザーがWebページを閲覧するのと並行して処理されます。しかし、セキュリティを確保するために、HTTPSでは

ページは自動的に解析されません。ページ上の次のマークアップを手動で解析します

<link rel="dns-prefetch" href="与当前不同域名的链接">

上記のリンクタグにより、Chromiumは「img.alicdn.com」の解析をプリフェッチします。

自動解決制御HTTPSページで自動解決機能を有効にしたい場合は、以下のマークを追加します

<meta http-equiv="x-dns-prefetch-control" content="on">

HTTPページの自動解析機能をオフにする場合は、次のマークを追加します

<meta http-equiv="x-dns-prefetch-control" content="off">

DNSプリロードを使用する必要がないのはいつですか?

すべてのリソースファイルが同じドメイン名の下にある場合。ユーザーがページをリクエストすると、ブラウザはすでにドメイン名を解決しており、ロードする必要のあるすべてのJS、CSS、および画像ファイルは同じドメイン名の下にあるため、独自のドメイン名をプリロードする必要はありません。プリロードを強制する必要がある場合は、ブラウザに別の解析を行わせることで、ページの読み込み時間と効率を向上させます。(注:dns-prefetchは注意して使用する必要があります。複数のページでDNSの事前解決を繰り返すと、DNSクエリの繰り返し数が増加します)

いつDNSプリロードを使用する必要がありますか?

ここで、さまざまな広告JS、フロントエンドフレームワークなど、サードパーティのプラグインやリソースが多数ある場合は、独自のドメインを介してロードする必要があります。
フロントエンドフレームワークの現在の人気に基づいて、多くのサードパーティリソースをロードすることが次第に一般的になりました。同時に、サードパーティのリソースをロードする場合、ブラウザは並列です。ブラウザはまず、ドメイン名がコード内で順番になっていないリソースを解析します。事前にロードする必要があるリソースによっては、DNSの解決が遅くなり、その後のコードのロードが失敗したり、スタイルが間違ったりする可能性があります。
したがって、DNSのプリロードにより、ページの読み込み速度を効果的に向上させ、ページの読み込み効果を期待どおりにすることができます。

元の14件の記事を公開 4のような 訪問者8816

おすすめ

転載: blog.csdn.net/weixin_41575159/article/details/95325872