Question

我希望对我的Jquery库使用预加载并使用以下代码。

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script" integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous">

<script
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
  integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous"></script>

但是，这总是在chrome中生成以下警告。

找到了'https://code.jquery.com/jquery-3.4.0.slim.min.js'的预载，但由于完整性不匹配而未使用。
资源https://code.jquery.com/jquery-3.4.0.slim.min.js已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保它具有适当的as值，并且是有意预载的。

如果使用标准实现，下面的代码将可以正常工作。

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script">

<script>
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
</script>

所以我的问题是我是否可以预加载外部库并同时使用跨域和完整性（子资源完整性）？

谢谢

Answer 1

现在几个浏览器都支持。其他答案中提到的Chromium issue已关闭。 Firefox和Safari似乎也支持此功能。

Answer 2

挖掘这个主题以添加一些以前没有提到的当前行为。

目前，截至 2020 年底，对于需要 preload 和 integrity 属性的 crossorigin 资源，这两个属性必须在两个标签中指定 、<link> 和 <script> 或 <link>，并且必须匹配，以有效地preload。

当前使用 crossorigin 和 integrity 预加载的正确方法：

<link rel='preload' href='http://...' as='style' integrity='sha...' crossorigin='anonymous' />
<link rel='stylesheet' id='bootstrap_css-css'  href='http://...' type='text/css' integrity='sha...' crossorigin='anonymous' type='text/css' media='all' />

如果不这样做，控制台会发出警告：

<块引用>

资源 http://... 已使用链接预加载预加载但未使用在窗口加载事件的几秒钟内。请确保它有一个适当的“as”值，并且是有意预加载的。

Answer 3

简短的回答：您不能。

具有完整性属性的资源（暂时）无法重用预加载的资源，也可能导致两次提取。链接元素的integrity属性尚未实现，对此有一个开放规范issue。这意味着任何完整性元数据的存在当前都会丢弃预加载的资源。在野外，它还可能导致重复的请求，您必须在安全性和性能之间进行权衡。

如何使用完整性和跨域预加载脚本

3 个答案: