DNS Prefetch/preconnect/prefetch/prerender/Preload

1. dns-prefetch

DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件,也可能是用户尝试打开的链接目标。

每当站点引用跨域域上的资源时,都应在 元素中放置 dns-prefetch提示,但是要记住一些注意事项。

  • dns-prefetch 仅对跨域域上的 DNS查找有效,因此请避免使用它来指向您的站点或域
  • 考虑将 dns-prefetch 与 preconnect(预连接)提示配对。尽管 dns-prefetch 仅执行 DNS查找,但preconnect 会建立与服务器的连接。如果站点是通过HTTPS服务的,则此过程包括DNS解析,建立TCP连接以及执行TLS握手。


Note: 如果页面需要建立与许多第三方域的连接,则将它们预先连接会适得其反。 preconnect 提示最好仅用于最关键的连接。对于其他的,只需使用 即可节省第一步的时间-DNS查找。
  • 因为对dns-prefetch的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。如果不支持的浏览器遇到dns-prefetch提示(或任何其他资源提示),则您的网站不会中断。您只是不会获得它提供的好处。

一些资源(如字体)以匿名模式加载。在这种情况下,应使用预连接提示设置 crossorigin 属性。如果您省略它,则浏览器将仅执行DNS查找。

2. preload

元素属性的preload值允许您在 HTML 中声明 fetch 请求,指定您的页面将很快需要的资源,您希望在页面生命周期的早期、浏览器的主要渲染机制启动之前开始加载这些资源。这确保它们是更早可用并且不太可能阻止页面的渲染,从而提高性能。rel
查看MDN文档

  • href属性中资源的路径。
  • as属性中的资源类型。

audio:音频文件,通常用于