前端页面加载的时候我们有时会用到一些非模块化的库都是用cdn引入的,如果体积很大的话会阻塞页面的加载,并且这个库可能只在特定页面调用,这样体验很不好
这里可以用dns-prefetch按需加载解决.
什么是dns-prefetch?
link指定rel=dns-prefetch后浏览器会在空闲时间预加载好资源但是不会执行,等真正请求的时候才执行,此时已经资源已经加载好了直接执行.
和rel=prefetch不一样的是,前者会提前解析好dns,等到请求资源时就会起到提速的作用
京东示例:
如何使用?
一般特定的sdk链接会配合一个函数进行按需加载,只需要在调用的时候加载库,使用方法:
第一步:引入link标签
为其动态加载资源增加链接类型为preload
的link
标签,其as
的值可根据后缀自动判断,也可显式声明
<link href="/xxx.js" rel="prefetch" as="script" />
第二步: 封装加载script的函数
function loadScript() {let flag = falsereturn () => {if (!flag) {const s = document.createElment('script')s.src="/xxx.js"}}}()
在调用库之前调用loadScript就可以按需加载了,link标签告诉浏览器提前加载好资源,我们script加载的时候就直接执行了
这样如果这个库很大的话就不会阻塞页面执行了
借助webpack进行管理
第三方插件
webpack官方插件
preload是什么?
preload也是浏览器的预加载政策,和prefetch一样,但是preload会占用请求数,优先级比较高,chrome http1.1 并发请求数限制了6个,因此如果页面需要的请求就已经有6个了,preload的资源比较大并且刚好比那6个页面需要的请求先加载,那么就会卡很久,导致页面需要的6个请求一直在waiting中,页面展示不出来
所以preload一般要慎用,也用的很少,prefetch在浏览器的网络栈中优先级比较低,它会在浏览器空闲的时候去加载,不会阻塞页面需要的请求加载执行,所以prefetch更友好.