link preload prefetch

link rel attribute preloadprefetch difference

Use

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

Test method

With the help of console.time()console.timEnd() timing , computing time

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

result

Neither of them will block onload event ,prefetch It will be loaded when the page is idle , It is the resources that may be used after preloading in advance , Not necessarily what the current page uses ,preload Preloading is the resources of the current page , When load after , This resource has not been referenced , Will prompt , Same as js async defer In addition to preloading , It just won't block onload event

author ：lxts
link ：https://www.jianshu.com/p/3ab0e0715e76
source ： Simple books
The copyright belongs to the author . Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .