<link rel=preload> 可以在 <iframe> 中预加载资源吗？答案

【问题标题】：Can <link rel=preload> preload resources inside <iframe>s?<link rel=preload> 可以在 <iframe> 中预加载资源吗？
【发布时间】：2019-05-18 19:58:13
【问题描述】：

我有一个嵌入另一个页面的页面，我们称之为frame.html：

<iframe src="sub-page.html">

在sub-page.html 上，它会加载一些 CSS 和一张图片：

<link rel="stylesheet" href="sub-page.css">
<img src="sub-page.svg" alt="Sub-Page">

一开始我以为可以通过在frame.html上加<link rel=preload>来加快这些子子资源的加载速度：

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

...但是看看生成的瀑布图，这似乎没有帮助。

预加载链接的规范似乎强调它仅适用于当前页面的子资源，但是由于您可以预加载从样式表调用的字体文件，因此框架的资源可以也算。我是否遗漏了什么，例如正确使用 crossorigin 属性？

【问题讨论】：

你测试了哪些浏览器？
@rustyx 原来我正在查看一个过时的 CDN 缓存。这完全有效，我会回答我自己的问题。

标签： html performance preload

【解决方案1】：

是的。

原来我在尝试性能测试时正在查看一个旧的、未清除的页面版本。

<link rel=preload> 绝对可以预加载<iframe> 页面的子资源。。

【讨论】：

你确定这对你有用吗？我正在尝试做完全相同的事情，但它对我不起作用。我可以在浏览器的“网络”选项卡中看到两次请求。您有完整的工作示例吗？
当然：contrast-o-vision.ti.gt — 我可能应该指定这是一个 same-origin iframe，这不是典型的用法。
谢谢！不幸的是，据我所知，它至少在我的浏览器上不起作用？我正在使用 Microsoft Edge 93（基于 Chromium）。我收到以下消息：资源contrast-o-vision.ti.gt/css/intro.css 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as 值并且是有意预加载的。
看起来我在源代码中有，所以很明显当时我也不确定。未标记为“已回答”