preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行。提供的好处主要是
将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件
提前加载指定资源,不再出现依赖的 font 字体隔了一段时间才刷出
如何使用 preload
使用 link 标签创建
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
使用 HTTP 响应头的 Link 字段创建
Link: ; rel=preload; as=style
如我们常用到的 antd 会依赖一个 CDN 上的 font.js 字体文件,我们可以设置为提前加载,以及有一些模块虽然是按需异步加载,但在某些场景下知道其必定会加载的,则可以设置 preload 进行预加载,如:
如何判断浏览器是否支持 preload
目前我们支持的浏览器主要为高版本 Chrome,所以可放心使用 preload 技术。 其他环境在 caniuse.com 上查到的支持情况如下:
在不支持 preload 的浏览器环境中,会忽略对应的 link 标签,而若需要做特征检测的话,则:
const isPreloadSupported = () => {
const link = document.createElement('link');
const relList = link.relList;
if (!relList || !relList.supports) {
return false;
}
return relList.supports('preload');
};
如何区分 preload 和 prefetch
preload 是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源;
prefetch 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源。
preload 是确认会加载指定资源,如在我们的场景中,x-report.js 初始化后一定会加载 PcCommon.js 和 TabsPc.js, 则可以预先 preload 这些资源;
prefetch 是预测会加载指定资源,如在我们的场景中,我们在页面加载后会初始化首屏组件,当用户滚动页面时,会拉取第二屏的组件,若能预测用户行为,则可以 prefetch 下一屏的组件。
preload 将提升资源加载的优先级
使用 preload 前,在遇到资源依赖时进行加载:
使用 preload 后,不管资源是否使用都将提前加载:
可以看到,preload 的资源加载顺序将被提前:
避免滥用 preload
使用 preload 后,Chrome 会有一个警告: