DNS Prefetch/preconnect/prefetch/prerender/Preload
Posted lihaixing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DNS Prefetch/preconnect/prefetch/prerender/Preload相关的知识，希望对你有一定的参考价值。
1. dns-prefetch
DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。
<link rel="dns-prefetch" href="https://fonts.googleapis.com/">每当站点引用跨域域上的资源时，都应在 <head> 元素中放置 dns-prefetch提示，但是要记住一些注意事项。
- dns-prefetch 仅对跨域域上的 DNS查找有效，因此请避免使用它来指向您的站点或域
- 考虑将 dns-prefetch 与 preconnect(预连接)提示配对。尽管 dns-prefetch 仅执行 DNS查找，但preconnect 会建立与服务器的连接。如果站点是通过HTTPS服务的，则此过程包括DNS解析，建立TCP连接以及执行TLS握手。
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
Note: 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。 preconnect 提示最好仅用于最关键的连接。对于其他的，只需使用 <link rel="dns-prefetch"> 即可节省第一步的时间-DNS查找。
- 因为对dns-prefetch的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。如果不支持的浏览器遇到dns-prefetch提示（或任何其他资源提示），则您的网站不会中断。您只是不会获得它提供的好处。
一些资源（如字体）以匿名模式加载。在这种情况下，应使用预连接提示设置 crossorigin 属性。如果您省略它，则浏览器将仅执行DNS查找。
2. preload
元素属性的preload值允许您在 html 中声明 fetch 请求，指定您的页面将很快需要的资源，您希望在页面生命周期的早期、浏览器的主要渲染机制启动之前开始加载这些资源。这确保它们是更早可用并且不太可能阻止页面的渲染，从而提高性能。<link>rel<head>
查看MDN文档
- href属性中资源的路径。
- as属性中的资源类型。
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">audio：音频文件，通常用于<audio>.
document: 一个 HTML 文档，旨在由<frame>或嵌入<iframe>。
embed：要嵌入到<embed>元素中的资源。
fetch：要通过 fetch 或 XHR 请求访问的资源，例如 ArrayBuffer 或 JSON 文件。
font: 字体文件。
image： 图像文件。
object：要嵌入到<object>元素中的资源。
script: javascript 文件。
style: CSS 样式表。
track：WebVTT 文件。
worker：一个 JavaScript 网络工作者或共享工作者。
video：视频文件，通常用于<video>. 3. prefetch
预取是在后台下载内容时，这是基于内容可能会被请求的假设，使内容能够在用户请求时立即加载。内容被下载和缓存以备将来使用，而无需用户明确请求。
<link rel="prefetch" href="https://www.example.com/solutions" />
4. prerender
通过预渲染，内容被预取，然后由浏览器在后台渲染，就好像内容已被渲染到一个不可见的单独选项卡中一样。当用户导航到预渲染内容时，当前内容会立即被预渲染内容替换。
<link rel="prerender" href="https://example.com/content/to/prerender">5. preload和prefetch区别
preload特点（涉及到优先级）
preload加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞onload事件；
preload可以支持加载多种类型的资源，并且可以加载跨域资源；
preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载 相应的脚本代码，待到需要时自行调用；
prefetch特点
prefetch是一种利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制；通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度；
区别
preload主要用于预加载当前页面需要的资源；而prefetch主要用于加载将来页面肯能需 要的资源；
参考文档
以上是关于DNS Prefetch/preconnect/prefetch/prerender/Preload的主要内容，如果未能解决你的问题，请参考以下文章
DNS简介DNS工作原理DNS正反向解析的搭建DNS主从备份DNS子域创建