link preload prefetch

Posted 2022-02-22 飞翔的熊blabla

link rel属性 preload prefetch区别

使用

<link rel="preload" href="xxx" as="xxx">
<link rel="prefetch" href="xxx" as="xxx">

测试方式

借助 console.time() console.timEnd() 计时，计算时间

<script>
  console.time('a');
  console.time('b')
....
....
  window.onload = () => 
    console.timeEnd('a');
    console.timeEnd('b')
  
</script>

结果

两者都不会阻塞onload事件，prefetch 会在页面空闲时候再进行加载，是提前预加载之后可能要用到的资源，不一定是当前页面使用的，preload 预加载的是当前页面的资源，当 load 之后，还没有引用该资源，则会提示，同 js async defer 除了是预加载之外，就是不会阻塞onload 事件

作者：lxts
链接：https://www.jianshu.com/p/3ab0e0715e76
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。