<link rel=preload> 必须有一个有效的 `as` 值答案

【问题标题】：<link rel=preload> must have a valid `as` value<link rel=preload> 必须有一个有效的 `as` 值
【发布时间】：2018-11-08 14:58:56
【问题描述】：

我正在尝试使用 link 标签的预加载 rel 值（每个 mdn's documentation on preload）预加载视频。

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

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

在 chrome 中，这可以正常工作，并且可以毫无问题地预加载文件。

当我在 safari 11.3 中打开我的桌面或 iPhone 上的页面时，我收到一条控制台错误消息：

必须有一个有效的as 值

根据包含有效值列表的文档的"what types of content can be preloaded" 部分，我肯定使用了正确的video 类型。

我检查了链接标签上的mdn documentation for mobile safari preload 选项，它显示了一个“兼容性未知”问号。我还检查了caniuse，它似乎表明只要我的移动 safari 版本为 11.3，我就应该能够使用它。

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

有什么想法/见解？？

【问题讨论】：

您的文档有有效的 Doctype 吗？
也许你可以发推文或发送电子邮件给 Yoav Weiss webkit.org/status/#specification-preload。
@UtkarshBais 检查
很有趣，@JamesT。如果文档类型不是问题，我会向 Yoav 发送一条消息。谢谢你们两个:)
啊，是的，我们有 HTML5 文档类型，所以不是这样。

标签： html preload

【解决方案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;
}

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

我不确定我们是否可以通过更改一些配置在 safari 上启用 mediaPreloadingEnabled。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
根据评论包含了答案的基本部分。

【解决方案2】：

Chrome 不支持`as="video|audio|document"`。

在浏览器站点上没有发现任何官方帖子/错误，但我确实在 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. -->

基本上这是一个测试，验证 Chrome 在使用那些链接不受支持的“as”属性时会引发警告

【讨论】：

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

Chrome 不支持`as="video|audio|document"`。