前端性能优化:dns-prefetch和preload预加载资源

前端页面加载的时候我们有时会用到一些非模块化的库都是用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 = false
 return () => {
  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更友好.