問題タブ [preconnect]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
optimization - 元のページと同じドメインのリソースを使用したり、リソースを使用したりするメリットはありますか?
および を使用して重要なリソースをフェッチすることのパフォーマンス上の利点について調べてきましたが、リソースがそれらを要求しているページと同じドメインにある場合に、これらの手法が依然として利点を提供するかどうかはよくわかりません。
たとえば、abc.com のページを最適化しています。マークアップに<link rel="preconnect" href="abc.com">またはを追加する必要があり<link rel="preload" as="script" href="abc.com/main.js">ますか? それとも、現在のページがリンクの href 値と同じドメインにあるため、何の効果もありませんか?
performance - HTML ヘッドと http ヘッダーでの事前接続 - 互換性
参照: https://web.dev/preconnect-and-dns-prefetch/
preconnect ヒントを実装するには 2 つの方法があります。
- HTML ヘッド内
HTTP ヘッダー内 (例: htaccess Header add を使用)
web.dev から、ブラウザは html が解析されるのを待つ必要がないため、2 番目のタイプの実装の方がわずかに優れていることがわかります。タイプ 1 の実装をサポートするすべてのブラウザーは、タイプ 2 もサポートしますか? または、あるタイプを別のタイプよりもサポートしているブラウザが存在する可能性はありますか?
PS: 私の限られた分析に基づいて、多くの Web サイトがタイプ 1 とタイプ 2 を使用していることがわかります。
html - リソースヒントの後にブラウザ (Chrome) が続いているかどうかを確認するにはどうすればよいですか?
リソース ヒント (dns-prefetch、preconnect、prefetch、prerender) は、(名前が示すように) ブラウザーへのヒントです。ブラウザがアイドル状態で、優先度の高いリソースがない場合にのみ実行されます。したがって、ブラウザーがリソース ヒントを使用することは保証されません。
ただし、ブラウザー (私の場合は Chrome) が実際にリソースのヒントに従っているかどうかを確認するにはどうすればよいですか?
開発ツールでウォーターフォールを見て、以前にロードされているかどうかを確認できることは理解していますが、最終的にプログラムで実行できるより効率的な方法を探しています。
私が調べた別のアプローチは、Chrome の NetLog です。ただし、リソースのヒントに従っているかどうかはわかりませんでした。