Question

我正在开展一个项目，我想预先加载一些大型视频，以便我开始阅读timing in network performance和resource prioritization。

我发现当我在chrome dev工具中查看网络选项卡的Priority列时，根据浏览器，视频优先级为“低”。通常情况下这很好，但我们正在进行网络虚拟现实体验，因此视频（或至少第一个）是视图的基础。

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

<!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>

当我查看开发工具中的网络选项卡时，视频的优先级仍显示为“低”，但视频在加载“最高”优先级资源（css）的同时开始加载：

当我注释掉预载链接时，看起来好像视频的加载时间在CSS完成之前排队：

所以似乎就像preload工作一样，但是我不确定preload是否正常工作且chrome没有更新Priority值，或者加载时间是否不同因为没有预加载链接标记在视频标记之前引用css。

即。我做得对吗？！

Answer 1

<link rel="preload">不会改变Chrome的内部＆＃34;优先级＆＃34;要下载资产，它只是指示Chrome何时开始下载。

资源加载的优先级与原本相同，但现在浏览器会提前知道，允许下载更早开始。

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

请注意<link rel="preload">是强制性的指令浏览器;不像我们将讨论的其他资源提示，它是浏览器必须做的事情，而不仅仅是一个可选的提示。

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

链接预加载似乎不会更改下载优先级

1 个答案: