prefetch vs preload vs prerender vs preconnect All In One
前端性能优化
prefetch
预获取
https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch
DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。
为什么要使用 dns-prefetch?
当浏览器从（第三方）服务器请求资源时，必须先将该跨域域名解析为 IP地址，然后浏览器才能发出请求。
此过程称为 DNS解析。
DNS 缓存可以帮助减少此延迟，而 DNS解析可以导致请求增加明显的延迟。
对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。
dns-prefetch 可帮助开发人员掩盖 DNS解析延迟。
HTML 元素 通过 dns-prefetch的 rel 属性值提供此功能。然后在 href属性中指要跨域的域名：
<html>
<head>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
<!-- and all other head elements -->
</head>
<body>
<!-- your page content -->
</body>
</html>
crossorigin & preconnect
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
每当站点引用跨域域上的资源时，都应在 元素中放置 dns-prefetch提示，但是要记住一些注意事项。
最佳实践
请记住以下三点：
-
首先，dns-prefetch 仅对跨域域上的 DNS查找有效，因此请避免使用它来指向您的站点或域。
这是因为，到浏览器看到提示时，您站点域背后的IP已经被解析。 -
其次，还可以通过使用 HTTP链接字段将 dns-prefetch（以及其他资源提示）指定为 HTTP标头：
Link: <https://fonts.gstatic.com/>; rel=dns-prefetch
- 第三，考虑将 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 提示最好仅用于最关键的连接。
对于其他的，只需使用 即可节省第一步的时间-DNS查找。
配对这些提示的逻辑是因为对dns-prefetch的支持比对预连接的支持要好。
不支持预连接的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。
由于这是HTML功能，因此非常容错。如果不支持的浏览器遇到dns-prefetch提示（或任何其他资源提示），则您的网站不会中断。
您只是不会获得它提供的好处。
一些资源（如字体）以匿名模式加载。
在这种情况下，应使用预连接提示设置 crossorigin 属性。
如果您省略它，则浏览器将仅执行DNS查找。
preconnect
预连接
https://developer.mozilla.org/zh-CN/docs/Web/Performance/preconnect ???
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
preload
预加载
https://alligator.io/html/preload-prefetch/#preloading-javascript
https://www.digitalocean.com/community/tutorials/html-preload-prefetch
prerender
预渲染
dns-prefetch
DNS 预获取
<html>
<head>
<link rel="dns-prefetch" href="https://fonts.google.com/specimen/Lobster">
<!-- and all other head elements -->
</head>
<body>
<!-- your page content -->
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
refs
https://www.cnblogs.com/xgqfrms/p/8984852.html
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！