link 预加载似乎没有改变下载优先级

Question

我正在做一个项目，我想预加载几个大视频，所以我开始阅读 timing in network performance and resource prioritization。

我发现，当我在 chrome 开发工具中查看网络选项卡的优先级列时，根据浏览器，视频优先级为 "low"。通常这会很好，但我们正在致力于网络 VR 体验，因此视频（或至少第一个）是视图的基础。

看来我可以使用 link 标签的 type="preload" 属性来提高第一个视频的优先级。我尝试将 link 标签添加到一个小的概念证明中，并引用了我们的一个视频：

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="preload" as="video" type="video/mp4" href="videos/cardboard.mp4" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <video src="videos/cardboard.mp4" autoplay width="200" style="border:1px solid green"></video>
    <p class="start-button">Start</p>
</body>

</html>

当我查看开发工具中的网络选项卡时，视频的优先级仍然显示为 "Low"，但视频开始加载的同时 "Highest" 优先级资源（css) 已加载：

当我注释掉预加载 link 时，视频的加载时间似乎排在 CSS 完成之后：

因此似乎预加载正在工作，但我不确定预加载是否正在工作并且 chrome 没有更新优先级值，或者如果加载时间不同，因为没有预加载 link 标签， css 在视频标签之前被引用。

即我做对了吗？！

Answer 1

<link rel="preload"> 不会更改 Chrome 用于下载资产的内部 "priority"，它只是指示 Chrome 何时开始下载。

The resource is loaded with the same priority as it would otherwise, but now the browser knows about it ahead of time, allowing for the download to start earlier.

A stylesheet or font will still be considered Highest priority，视频仍将被视为低优先级。但是 Chrome 会在遇到 <link rel="preload"> 标签时立即开始下载资产。

Note that <link rel="preload"> is a compulsory instruction to the browser; unlike the other resource hints we’ll be talking about, it’s something the browser must do, rather than merely an optional hint.

来源：https://developers.google.com/web/fundamentals/performance/resource-prioritization

link 预加载似乎没有改变下载优先级

link preload doesn't seem to change the download priority level

html

preload

preloading

html5-video