Preload, Prefetch And Priorities in Chrome

[pikou1995]

Preload, Prefetch And Priorities in Chrome

中文翻译: Preload，Prefetch 和它们在 Chrome 之中的优先级

这篇文章我看过好多遍，每次都有新的发现和收获，对浏览器资源的请求理解帮助很大

一些补充

preload 的支持度

毕竟是2017年写的，有些数据要更新：<link rel=”preload”> 支持度大概 ~90%

preload 的 as 属性

• 浏览器可以设置正确的资源加载优先级，这种方式可以确保资源根据其重要性依次加载， 所以，Preload既不会影响重要资源的加载，又不会让次要资源影响自身的加载。
• 浏览器可以确保请求是符合内容安全策略的，比如，如果我们的安全策略是 Content-Security-Policy: script-src 'self' ，只允许- 浏览器执行自家服务器的脚本，as 值为 script 的外部服务器资源就不会被加载。
• 浏览器能根据 as 的值发送适当的 Accept 头部信息。
• 浏览器通过 as 值能得知资源类型，因此当获取的资源相同时，浏览器能够判断前面获取的资源是否能重用。
• 忽略 as 属性，或者错误的 as 属性会使 preload 等同于 XHR 请求，但是依然不会影响 window.onload 执行。

preload 加载字体必须要带 crossorigin 属性

因为必须采用匿名模式来获取字体资源，否则请求的资源不可用，导致重复请求

preload onload 事件

可实现css的异步加载:

<link rel="preload" as="style" href="asyncstyle.css" οnlοad="this.rel='stylesheet'">

preload media 属性

利用 media 属性，浏览器只会加载需要的资源。

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

参考资料： 通过rel="preload"进行内容预加载 关于Preload，你应该知道些什么