使用preload预加载页面资源时注意事项_rel="preload资源-CSDN文库

31 浏览量 2020-11-21 10:51:06 上传评论收藏 1.16MB PDF 举报

资源详情

资源评论

资源推荐

使用使用preload预加载页面资源时注意事项预加载页面资源时注意事项

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

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

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

如何使用如何使用 preload

使用使用 link 标签创建标签创建

<link rel="preload" href="/path/to/style.css" rel="external nofollow" as="style">

<script>

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

link.rel = 'preload';

link.as = 'style';

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

document.head.appendChild(link);

</script>

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

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

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

如：

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

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

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

如何判断浏览器是否支持如何判断浏览器是否支持 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 会有一个警告：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论0

内容反馈

weixin_38728555

粉丝: 3
资源: 921

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip