Chrome与Edge中<link rel=preload>使用as=document及移除as均触发警告问题

问题根因 #

Chrome和Edge目前不支持将document作为<link rel="preload">的as属性有效值，所以你用<link rel="preload" href="https://example.com" as="document">时会触发不支持的警告，浏览器也不会发起预加载请求；而移除as属性后，preload要求必须指定合法的资源类型，因此又会触发必填警告。

可行的替代方案 #

因为preload本身不支持预加载整个文档（iframe对应的资源），可以用以下两种方式实现类似效果：

• 提前创建隐藏iframe
  直接通过JS创建一个隐藏的iframe，让浏览器提前加载目标URL的内容，后续需要展示时再将其显示出来：

  // 创建预加载的隐藏iframe
  const preloadFrame = document.createElement('iframe');
  preloadFrame.src = 'https://example.com';
  preloadFrame.style.display = 'none';
  // 添加到页面，触发加载
  document.body.appendChild(preloadFrame);
  

• 用fetch预加载文档内容（需注意跨域）
  如果只是需要预加载文档的HTML内容，而非完整的iframe运行环境，可以使用fetch请求，但目标域名必须配置CORS允许你的站点访问：

  fetch('https://example.com', { credentials: 'include' })
    .then(res => res.text())
    .then(html => {
      // 后续可以将html插入到iframe或页面中
    });
  

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