您真的了解脚本标记和链接标记吗？

prefetch

prefetch是一种浏览器机制，利用浏览器空闲时间来下载后续可能需要使用的资源。在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。

使用方式：

<link rel="prefetch" href="xxx" />

测试用例：

Chrome Network面板分析：

可以看到link prefetch出现了coffee.jpg的加载请求。后续通过img src再次请求coffee.jpg时，直接就通过prefetch cache获取了。所以验证了浏览器在空闲时间预先加载资源，真正使用时直接从浏览器缓存中快速获取。

preload

顾名思义，preload就是希望浏览器尽早的请求资源，且不阻塞正常的onload。

使用方式：

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

测试用例：

Chrome Network面板分析：

可以发现脚本的加载时机提前了，在浏览器开始解析html后很快就进行了加载。

注意：preload link必须设置as属性来声明资源的类型（font/image/style/script等)，否则浏览器可能无法正确加载资源。对于字体文件或者可以加载的跨域资源需要加上crossorigin属性。