#资源预加载

preload、prefetch、dns-prefetch 有什么区别？如何优化资源加载？

#核心区别

#1. Preload (预加载)

告诉浏览器：“这个资源马上就要用了，别排队了，赶紧去下载！”。如果不加上 as 属性，浏览器可能不知道如何处理优先级，甚至重复加载。

<!-- 预加载关键字体 (必须加 crossorigin) -->
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预加载首屏大图 (LCP 优化) -->
<link rel="preload" href="/hero-banner.jpg" as="image">

注意：滥用 preload 会阻塞关键渲染路径。只 preload 首屏必须的资源。

#2. Prefetch (预取)

告诉浏览器：“等你有空的时候，帮我把这个下载下来，下一页可能会用。”

<!-- 预取下一个路由的 JS chunk -->
<link rel="prefetch" href="/js/about-page.chunk.js">

#3. DNS Prefetch & Preconnect

<!-- 仅 DNS 解析 (成本低) -->
<link rel="dns-prefetch" href="//example-api.com">

<!-- TCP + TLS 握手 (成本高，慎用) -->
<link rel="preconnect" href="//fonts.googleapis.com" crossorigin>

#面试避坑

1. crossorigin: 加载跨域资源（尤其是字体）时，必须加上 crossorigin，否则会引发二次下载或 CORS 错误。
2. LCP 优化: Preload 页面主要图片（Hero Image）是提升 LCP (Largest Contentful Paint) 的常见手段。
3. Webpack 魔法注释: 在 import() 时可以使用 /* webpackPrefetch: true */ 自动生成 link标签。