用css或javascript实现预加载_用 preload 预加载页面资源

(给前端大学加星标，提升前端技能.)

作者：felix

https://github.com/ProtoTeam/blog/blob/master/201802/1.md

本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。

preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是

• 将加载和执行分离开，可不阻塞渲染和 document 的 onload 事件

• 提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出

如何使用 preload

使用 link 标签创建

rel="preload" href="/path/to/style.css" as="style">

const link = document.createElement('link');

link.rel = 'preload';

link.as = 'style';

link.href = '/path/to/style.css';

document.head.appendChild(link);

使用 HTTP 响应头的 Link 字段创建

Link: <https://example.com/other/styles.css>; rel=preload; as=style

如我们常用到的 antd 会依赖一个 CDN 上的 font.js 字体文件，我们可以设置为提前加载，以及有一些模块虽然是按需异步加载，但在某些场景下知道其必定会加载的，则可以设置 preload 进行预加载，如：

rel="preload" as="font" href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">

rel="preload" as="script" href="https://a.xxx.com/xxx/PcCommon.js">

rel="preload" as="script" href="https://a.xxx.com/xxx/TabsPc.js">

如何判断浏览器是否支持 preload

目前我们支持的浏览器主要为高版本 Chrome，所以可放心使用 preload 技术。其他环境在 caniuse.com 上查到的支持情况如下：