link preload未提升视频下载优先级？Web VR资源预加载疑问

Great question—let’s break down what’s happening here, and confirm whether your preload implementation is correct.

First off: Your use of the preload link tag is entirely correct. The syntax you’ve used follows all spec requirements perfectly:

• rel="preload" tells the browser to fetch the resource as early as possible, before it would otherwise be discovered
• as="video" explicitly defines the resource type (critical for the browser to handle caching and prioritization logic correctly)
• type="video/mp4" matches the video’s MIME type, helping the browser validate the resource upfront
• The href exactly matches the src of your <video> element, ensuring the preloaded resource is reused for the actual video playback

Now, let’s address the confusing "Low" priority label in Chrome’s Network panel:
Chrome’s priority labeling in DevTools doesn’t always update to reflect runtime adjustments caused by preload. While the label stays "Low", the browser is actually prioritizing the video request alongside high-priority resources like your CSS. Your observation that the video starts loading at the same time as the CSS is concrete proof the preload is working—without it, the browser would delay the video request until after rendering-blocking resources (like CSS) are fully loaded, which matches what you saw when you commented out the preload tag.

To confirm this further, you can check two things in the Network panel:

• Look at the Initiator column for the video request: with preload enabled, it should show "Preload" instead of "Parser" (which is what you’d see when the browser discovers the <video> tag during HTML parsing)
• Check the Timing tab for the video request: compare the "Request Start" time with and without preload—you’ll see it’s significantly earlier when preload is active

For your Web VR use case, since the first video is core to the experience, you might also want to try adding the fetchPriority="high" attribute to your preload tag (supported in Chrome and other modern browsers) to explicitly signal higher priority:

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

This can help reinforce the browser’s prioritization, though your current setup is already effectively getting the job done.

内容的提问来源于stack exchange，提问作者Chris Schmitz