使用preload或者prefetch预加载页面资源

preload与prefetch的区别

• preload浏览器页面必定需要的资源，浏览器一定会加载这些资源
  适应场景：首页一些肯定会加载的资源
• prefetch浏览器页面可能需要的资源，浏览器不一定会加载这些资源。
  适应场景：例如滚动之后会加载的资源，滚动是可能触发，并不是一定触发

如何使用：用法几乎一致，以preload为例。

使用link标签创建

<link rel="preload" href="./common.css" as="style">

动态创建一个link标签后插入到head头部

const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style'
link.href = "./common.css"
document.appendChild(link);