能否通过<link rel=preload>预加载<iframe>内的资源？

你遇到的这个问题，核心在于preload的作用范围是绑定到当前文档上下文的，而iframe是一个完全独立的浏览上下文——简单说，父页面frame.html里的preload资源，和子页面sub-page.html的资源请求，属于两个不同的“资源环境”，浏览器不会把父页面预加载的资源直接复用给iframe。

先理清楚几个关键概念： #

• preload的本质：它是为当前文档的资源依赖链服务的，目的是让浏览器提前加载当前页面马上要用的资源，比如当前页面的CSS、脚本、字体等。这些预加载的资源会被标记为“当前文档所需”，只会在当前上下文里被取用。
• 为什么预加载字体有效？：因为你预加载的字体是当前页面（父页面）的CSS所引用的，属于父页面的资源依赖，自然能被父页面复用。而iframe的CSS和图片是子页面自己的依赖，不在父页面的依赖链里，所以父页面的preload对它无效。

关于你提到的crossorigin属性 #

如果你的资源是跨域的，preload确实需要正确设置crossorigin（比如字体资源即使同域也需要加crossorigin="anonymous"），但在这个场景下，就算你加了正确的跨域属性，也解决不了上下文隔离的问题——同域下的iframe虽然和父页面共享域，但依然是独立的文档上下文，父页面的preload资源不会自动“传递”给它。

可行的解决方案 #

• 在子页面内部添加preload：最直接有效的方式，就是在sub-page.html的<head>里添加对应的preload标签：

  <link rel="preload" href="sub-page.css" as="style">
  <link rel="preload" href="sub-page.svg" as="image">
  

  这样preload是针对子页面自己的上下文，能真正加速它的资源加载。
• 用prefetch代替preload：如果你一定要在父页面提前加载这些资源，可以使用<link rel="prefetch">。prefetch的作用是将资源预获取到浏览器缓存中，供未来的页面（包括iframe）使用。它的优先级比preload低，但适合这种跨上下文的场景：

  <link rel="prefetch" href="sub-page.css">
  <link rel="prefetch" href="sub-page.svg">
  

  不过要注意，prefetch是“提示性”的，浏览器可能会根据网络情况决定是否执行，而且资源会存在缓存中，iframe请求时如果缓存策略允许，就会直接取用缓存。
• Service Worker缓存（进阶）：如果需要更精准的控制，可以用Service Worker提前缓存这些资源，当iframe发起请求时，直接从Service Worker的缓存中读取，不过这个方案复杂度较高，适合对性能有极致要求的场景。

内容的提问来源于stack exchange，提问作者Tigt