Prefetch 和 preconnect-dns：挖掘解析速度
2023-10-02 08:34:54
用两双手迎接加速
对于网站而言，速度就是生命。用户渴望即时加载，排名也青睐更快的网站，而 PageSpeed Insights 就是您忠实的合作伙伴。如今，越来越多的浏览器采用了 Prefetch 和 Preconnect-dns 这两种技术，它们都能够提升解析速度，保障网站的流畅运行。
Prefetch：提前加载，快人一步
Prefetch 通过 HTML 文档中 HEAD 部分的 rel 属性来指示浏览器提前加载特定资源，加速首次渲染。它旨在让浏览器先下载资源，并在需要时调用它。支持它的资源包括 JavaScript 文件、CSS 样式表、图像甚至整个页面。它在网络请求开始之前就获取了必要的资源，用户访问网站时无需等待，从而提升网站响应速度。
Preconnect-dns：DNS 预解析，抢占先机
Preconnect-dns 与 Prefetch 相似，但专用于 DNS 预解析。它在浏览器访问网站的域名之前，就提前获取该域名的 IP 地址，减少了解析延迟。Preconnect-dns 在 HTTP/2 中被定义，并且被认为比 Prefetch 更加安全。
殊途同归，殊途同归？
Prefetch 和 Preconnect-dns 都旨在提升网站解析速度，然而它们的适用场景却截然不同。
-
Prefetch 的适用场景：
- 首次访问的资源文件，如 JavaScript、CSS 或图像，通常用于提前加载网站的主要资源文件。
- 重要资源文件，如 JavaScript 框架、库文件或经常需要加载的大型图像，这些资源文件对于网站功能至关重要，提前加载可以提高网站性能。
- 频繁访问的资源文件，如网站导航菜单或其他经常被访问的页面或文件，这些资源文件可能不是首次访问就需要，但由于它们经常被访问，因此提前加载可以提高性能。
-
Preconnect-dns 的适用场景：
- 首次访问的网站，因为浏览器在此之前从未访问过该网站，因此需要预先解析 DNS 记录。
- 跨域资源，当网站需要从其他域名加载资源时，预先解析 DNS 记录可以减少跨域请求的延迟。
- 重定向网站，当网站重定向到其他域名时，预先解析 DNS 记录可以减少重定向的延迟。
解析选择，各显神通
Preconnect-dns 的优点在于浏览器提前解析 DNS 记录，无需等待首次加载请求时才开始解析。它可以缩短 DNS 解析时间，并且与 Prefetch 相比，它不需要加载资源文件，因此对网络带宽影响较小。但是，它只适用于 DNS 解析，而 Prefetch 则可以提前加载资源文件。
Prefetch 的优点在于它可以提前加载资源文件，当用户首次访问网站时，浏览器已经将必要的资源文件加载完毕，因此可以立即显示网页内容。它可以提高网站的初始加载速度，并且与 Preconnect-dns 相比，它可以提前加载更广泛的资源类型。但是，它需要加载资源文件，因此对网络带宽的影响较大。
总体而言，如果您需要提前解析 DNS 记录，建议使用 Preconnect-dns。如果您需要提前加载资源文件，建议使用 Prefetch。两者结合使用，可以进一步优化网站性能。
优先级抉择，大道相通
如果一定要分个高低，浏览器在加载资源时的优先级顺序如下：
- DNS 预解析（Preconnect-dns）
- 提前预取（Prefetch）
- DNS 查询
- TCP 连接
- 发送 HTTP 请求
- 服务器处理请求
- 服务器返回响应
- 浏览器解析响应
- 渲染页面
网站管理员可以通过合理的资源管理和策略设置，充分利用 Prefetch 和 Preconnect-dns 的优势，显著提升网站的响应速度和用户体验，让网站在竞争激烈的数字海洋中脱颖而出。
