预加载提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行。提供的好处主要是
将加载和执行分离开,可不阻塞渲染和文档的> & lt; !——使用链接标签静态标记需要预加载的资源——比; & lt;链接rel="预加载" href=" https://www.yisu.com/path/to/style.css " rel="外部nofollow”=胺绺瘛北? & lt; !,或使用脚本动态创建一个链接标签后插入到头部头部——比; & lt; script> 常量链接=document.createElement(“链接”); 链接。rel=霸ぁ? 链接。=胺绺瘛? 链接。href=' https://www.yisu.com/path/to/style.css '; document.head.appendChild(链接); & lt;/script>
使用HTTP响应头的链接字段创建h5> 链接:& lt; https://example.com/other/styles.css>;rel=预加载;=风格
如我们常用到的antd会依赖一个CDN上的字体。js字体文件,我们可以设置为提前加载,以及有一些模块虽然是按需异步加载,但在某些场景下知道其必定会加载的,则可以设置预加载进行预加载,如:
如何判断浏览器是否支持预加载
目前我们支持的浏览器主要为高版本Chrome,所以可放心使用预加载技术。其他环境在caniuse.com网站上查到的支持情况如下:
在不支持预加载的浏览器环境中,会忽略对应的链接标签,而若需要做特征检测的话,则:
如何区分预加载和预取
预加载是告诉浏览器页面必定需要的资源,浏览器一定会加载这些资源;
预取是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源。
预加载是确认会加载指定资源,如在我们的场景中,x-report。js初始化后一定会加载PcCommon。js和TabsPc。js,则可以预先预加载这些资源;
预取是预测会加载指定资源,如在我们的场景中,我们在页面加载后会初始化首屏组件,当用户滚动页面时,会拉取第二屏的组件,若能预测用户行为,则可以预取下一屏的组件。
预加载将提升资源加载的优先级
使用预加载前,在遇到资源依赖时进行加载:
使用预加载后,不管资源是否使用都将提前加载:
可以看的到,预加载的资源加载顺序将被提前:
避免滥用预加载
使用预加载后,Chrome会有一个警告:
如上文所言,若不确定资源是必定会加载的,则不要错误使用预加载,以免本末倒置,给页面带来更沉重的负担。
当然,可以在电脑中使用预加载来刷新资源的缓存,但在移动端则需要特别慎重,因为可能会浪费用户的带宽。
避免混用预加载和预取
预加载和预取混用的话,并不会复用资源,而是会重复加载。
