前端性能优化教程——资源提示
内容提要
本文介绍了资源提示的概念和使用方法，包括preconnect、dns-prefetch、preload和prefetch。这些提示可以帮助优化页面加载速度。同时介绍了Fetch Priority API，通过fetchpriority属性来增加资源的加载优先级。
延伸解读
preconnect 与 dns-prefetch 的取舍
preconnect 会提前建立与跨域服务器的连接，但一次性建立多个连接可能不现实。dns-prefetch 成本更低，仅提前完成 DNS 查询，适合用户可能点击的链接。选择时需权衡：若页面有大量跨域关键资源，优先用 preconnect；若担心过度使用，可用 dns-prefetch 作为替代。
preload 的正确使用与常见陷阱
preload 用于提前请求渲染必需的资源，但需注意：跨源资源必须加 crossorigin 属性，否则会重复下载；必须包含 as 属性，否则资源会被下载两次；对于响应式图片，应使用 imagesrcset 并省略 src。此外，preload 会赋予高优先级，过度使用可能引发带宽竞争，反而拖慢加载。
prefetch 的预测性质与风险
prefetch 以低优先级获取未来可能用到的资源，基于用户行为预测。若用户未访问目标页面，下载的资源可能被浪费。因此，应依据用户行为分析决定是否使用，并可通过 Save-Data 提示为想节省流量的用户禁用 prefetch。
Fetch Priority API 优化 LCP
通过 fetchpriority 属性可调整资源加载优先级，适用于 link、img 和 script 元素。默认图片为低优先级，若在视口内则提升为高优先级。使用 fetchpriority="high" 可让 LCP 图像立即以高优先级下载，而其他缩略图保持低优先级，从而提升 LCP 性能。
Q&A
什么是资源提示？它有什么作用？
资源提示是让浏览器提前执行某些操作以提升加载效率的技术，比如进行早期的 DNS 查询、提前与服务器建立连接，甚至在浏览器正常流程发现资源之前就开始抓取资源。它可以帮助优化页面加载速度。
preconnect 和 dns-prefetch 有什么区别？分别适合什么场景？
preconnect 用于提前建立与关键资源的连接，适合大量跨域资源的网页；dns-prefetch 仅提前完成域名的 DNS 查询，成本更低，适合用户可能点击的链接。
使用 preload 时需要注意哪些问题？
preload 用于提前请求渲染页面时必须的资源，应专门用于较晚被发现但对渲染至关重要的资源。使用时需注意：跨源资源要加 crossorigin 属性，否则会重复下载；必须包含 as 属性，否则资源会被下载两次；对于响应式图片，要添加 imagesrcset 并省略 src 属性；避免过度使用，以免引发带宽竞争。
prefetch 和 preload 有什么不同？
prefetch 是低优先级的请求，用于获取将来浏览时可能用到的资源，基于预测；而 preload 用于提前请求渲染当前页面时必须的资源，优先级高。prefetch 的格式与 preload 相似，但 rel 属性为 prefetch。
Fetch Priority API 是什么？如何使用？
Fetch Priority API 通过 fetchpriority 属性来增加资源的加载优先级，可与 <link>、<img> 和 <script> 元素一同使用。例如，设置 fetchpriority="high" 可以提升 LCP 图像的加载优先级，从而改善 LCP 性能。
preconnect 使用时为什么要加 crossorigin 属性？
当预连接跨源资源（如字体文件）时，如果资源支持 CORS，必须添加 crossorigin 属性。否则浏览器在下载资源时会重新建立新连接，无法复用之前用 preconnect 建立的连接。
