cover

了解 标签上 Rel=prexxx 的作用

在 HTML 中 标签指定了当前文档与外部资源之间的关系
本文说明 标签的 rel 属性分别设置 dns-prefetch,preconnect,prefetch,preload,prerender 的时候有说明作用

dns-prefetch:向浏览器提示需要资源,允许浏览器在用户单击链接之前进行 DNS 查找和协议握手

preconnect:向浏览器提供提示,建议它提前打开与链接网站的连接,而不泄露任何私人信息或下载任何内容,以便在遵循链接时可以更快地获取链接的内容

prefetch:建议浏览器提前获取链接资源,因为它可能是用户请求的。 从 Firefox 44 开始,将考虑 crossorigin 属性的值,从而可以进行匿名预取

preload:告诉浏览器下载资源,因为稍后在当前导航期间将需要此资源

prerender:建议浏览器提前获取链接资源,并且它还在屏幕外渲染预取内容,以便在需要时可以快速呈现给用户

参考

link_types

preconnect-vs-dns-prefetch-resource-hints

Buy Me A Coffee
← 让 Hugo 博客支持 PWA 浏览器请求耗时阶段解释 →