了解 <link> 标签上 rel=prexxx 的作用

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

在 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

让 Hugo 博客支持 PWA
浏览器请求耗时阶段解释
Valaxy v1.0.0-rc.9 驱动|主题-Yunv1.0.0-rc.9
粤ICP备2026134562号
本站总访问量
本站访客数 人次
本站已运行0 天0 小时0 分0 秒