<link rel=preload> 必须具有有效的 `as` 值。

Question

我正在尝试使用link标签的预加载关系值，根据MDN的预加载文档来预加载视频。

在我的index.html文件中，我将以下内容添加到头部：

<link rel="preload" as="video" type="video/mp4" href="video/2_1.mp4" />

在Chrome中，这可以正常工作并且预加载文件没有问题。

当我在桌面或iPhone上的Safari 11.3中打开页面时，我会收到控制台错误信息：

必须具有有效的as值

根据文档中包含的有效值列表的“哪些类型的内容可以预加载”部分，我肯定正在使用正确的video类型。

我检查了移动Safari链接标签上的预加载选项的MDN文档，它显示了一个“兼容性未知”的问号。我还在caniuse上进行了检查，它似乎表明只要我的移动Safari版本为11.3，我就应该能够使用它。

手机和桌面电脑都是Safari 11.3，所以我不确定为什么会出现这个错误。

有任何想法/见解吗？

- Chris Schmitz

---

你的文档是否有有效的Doctype？ - Utkarsh Bais

也许你可以通过推特或电子邮件联系Yoav Weiss https://webkit.org/status/#specification-preload。 - James T

@UtkarshBais 检查中 - Chris Schmitz

很有趣，@JamesT。如果doctype不是问题，我会给Yoav发一条消息。谢谢你们两个 :) - Chris Schmitz

啊，是的，我们有HTML5 doctype，所以不是那个问题。 - Chris Schmitz

这不是链接标签，但你可能想看看这个 https://dev59.com/1WIj5IYBdhLWcg3wWj-d - Utkarsh Bais

Answer 1

看起来 Webkit 禁用了视频和音频文件的预加载。

if (RuntimeEnabledFeatures::sharedFeatures().mediaPreloadingEnabled() && (equalLettersIgnoringASCIICase(as, "video") || equalLettersIgnoringASCIICase(as, "audio")))
    return CachedResource::MediaResource;
if (equalLettersIgnoringASCIICase(as, "font"))
    return CachedResource::FontResource;
#if ENABLE(VIDEO_TRACK)
if (equalLettersIgnoringASCIICase(as, "track"))
    return CachedResource::TextTrackResource;
#endif
return std::nullopt;

https://github.com/WebKit/webkit/blob/master/Source/WebCore/loader/LinkLoader.cpp#L125

auto type = LinkLoader::resourceTypeFromAsAttribute(as);
if (!type) {
    document.addConsoleMessage(MessageSource::Other, MessageLevel::Error, String("<link rel=preload> must have a valid `as` value"));
    return nullptr;
}

我不确定是否可以通过更改某些配置在Safari上启用mediaPreloadingEnabled。有关详细信息，请参阅以下链接：https://github.com/WebKit/webkit/blob/master/Source/WebCore/loader/LinkLoader.cpp#L239-L243。

- jun

Answer 2

as="video|audio|document" 在Chrome上不受支持。

没有在浏览器官方网站上找到任何正式的帖子/错误，但我在chromium存储库中找到了这个: https://github.com/chromium/chromium/blob/99314be8152e688bafbbf9a615536bdbb289ea87/third_party/blink/web_tests/fast/dom/HTMLLinkElement/link-preload-unsupported-destination.html

<link rel=preload href="resources/empty.html">
<link rel=preload href="resources/empty.html" as="document">
<link rel=preload href="../../../media/content/test.mp4" as="audio">
<link rel=preload href="../../../media/content/test.wav" as="video">
<!--This test verifies that specific warnings are shown when preload
   resources use unsupported (but valid) destinations. -->

基本上这是一个测试，用于验证使用那些不支持 'as' 属性的链接时，Chrome 是否会发出警告。

- Eylon Sultan

---

在最新的Chrome中，使用 as="image/svg+xml" 也会得到这个错误。 - thdoan