Open pikou1995 opened 3 years ago
中文翻译: Preload,Prefetch 和它们在 Chrome 之中的优先级
这篇文章我看过好多遍,每次都有新的发现和收获,对浏览器资源的请求理解帮助很大
毕竟是2017年写的,有些数据要更新:<link rel=”preload”> 支持度大概 ~90%
<link rel=”preload”>
window.onload
因为必须采用匿名模式来获取字体资源,否则请求的资源不可用,导致重复请求
可实现css的异步加载:
<link rel="preload" as="style" href="asyncstyle.css" οnlοad="this.rel='stylesheet'">
利用 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,你应该知道些什么
Preload, Prefetch And Priorities in Chrome
这篇文章我看过好多遍,每次都有新的发现和收获,对浏览器资源的请求理解帮助很大
一些补充
preload 的支持度
毕竟是2017年写的,有些数据要更新:
<link rel=”preload”>
支持度大概 ~90%preload 的 as 属性
window.onload
执行。preload 加载字体必须要带 crossorigin 属性
因为必须采用匿名模式来获取字体资源,否则请求的资源不可用,导致重复请求
preload onload 事件
可实现css的异步加载:
preload media 属性
利用 media 属性,浏览器只会加载需要的资源。
参考资料: 通过rel="preload"进行内容预加载 关于Preload,你应该知道些什么