Я работаю над проектом, в котором я хотел бы предварительно загрузить пару больших видео, поэтому я начал читать о синхронизации производительности сети и приоритизации ресурсов .
Я обнаружил, что при просмотре столбца «Приоритет» на вкладке «Сеть» в инструментах разработчика Chrome уровни приоритета видео были «низкими» в зависимости от браузера.Обычно это было бы хорошо, но мы работаем над веб-VR, поэтому видео (или, по крайней мере, первое) является основой представления.
Казалось, что я могу использовать атрибут 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>
Когда я просматриваю вкладку сети в инструментах разработчика, уровень приоритета видео по-прежнему отображается как «Низкий», нозагрузка видео началась одновременно с загрузкой ресурса с наивысшим приоритетом (css):
Когда я закомментирую ссылку предварительной загрузкипохоже, что время загрузки видео ставится в очередь до окончания CSS:
Так что кажется как предварительная загрузкаработает, но я не уверен, что предварительная загрузка работает, и chrome не обновляет значение Priority, или время загрузки отличается, потому что без тега ссылки предварительной загрузки css упоминается перед тегом video.
т.е. правильно ли я делаю ?!