这里我主要介绍两种方法分别为：preload和prefetch
preload:提前加载
preload顾名思义就是一种预加载的方式，它通过向浏览器声明一个需要提交加载的资源，当资源正真被使用的时候立即执行，就无需等待网络的消耗。
使用方法：
link模式
当浏览器解析到这行代码就会去加载href中对应的资源但不执行，等到真正使用到的时候再执行
HTTP响应头模式
link:example.com/other/style…;rel=preload;as=style
这种方式比通过link方式加载资源方式更快，请求在返回还没到解析页面的时候就开始预加载资源了。
对于preload兼容性方面：IE和Firefox都是不支持的，兼容性覆盖面达到73％.
prefetch：预判加载
prefetch与preload不同，它的作用就是告诉浏览器未来可能会使用到的某个资源，浏览器就会在闲暇时去加载对应的资源，若能预测到用户的行为，比如懒加载，点击到其它页面等，则是相当于提前加载了需要的资源。它的用法和preload是一样的：
link模式
HTTP响应头模式
link:example.com/other/style…;rel=prefetch;as=style
prefetch比preload的兼容性更好，覆盖面可以达到将近80％
对于两种方法的总结：
当一个资源被preload或者prefetch获取后，它将被放在内存缓存中等待被使用，如果资源未存在有效的缓存机制中，那么它将被存在HTTP缓存中可以被不同页面所使用，当页面使用到这个资源的时候，preload资源还没下载完，这时候就不会造成二次下载，会等待第一次下载并执行脚本。
对于preload来说，一旦页面关闭了，它就会立即停止preload获取资源，而对于prefetch资源，即使关闭页面，prefetch发起的请求仍会进行不会中断。不要将preload和prefetch进行混用，它们分别适用不同的场景，对于同一个资源同时使用preload和prefetch会造成二次的下载
最后也是最重要的：
preload是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源，而prefetch是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。所以建议：对于当前页面很有必要的资源使用preload，对于可能在将来页面中使用的资源使用prefetch。
使用preload和prefetch的情况下，如果资源不能被缓存，那么都用可能浪费一部分宽带，在移动端慎用，原因是你可能为了改善性能使用preload来缓存一定的资源，但是如果没有用到，你就做了无用功。在手机上，这相当于浪费了用户的流量，所以明确你要preload的对象。
使用例子：
一、提前加载文字字体。由于字体文件必须等到CSSOM树构建完成并且作用到页面元素了才会开始加载，会导致页面字体样式闪动，所以要使用preload显示告诉浏览器提前加载。假如字体文件在CSS生效之前下载完成，则可以完全消灭页面闪动效果。
二、使用preload预加载第二屏的内容，在网页开发中，对于非首屏部分采用懒加载是我们页面常用的优化手段，所以我们在页面onload之后可以通过preload来加载次屏所需要的资源，在用户浏览完首屏内容滚动时能够更快地看到次屏的内容。
三、在页面加载完成之后，可以分析页面上所有的链接，判断用户可能会点击的页面，分析提取下一跳页面上所有的资源使用prefetch进行加载(这里不使用 preload，因为不一定会点击)，浏览器会在空闲地时候进行加载，当用户点击链接命中了缓存，这可以有效地提升下一页面的首屏渲染时间。
四、对于商品列表页面，在用户鼠标停留在某个商品的时候，可以去分析商品详情页所需要的资源并提前开启preload加载，跟第三点类似，都是用来预测用户的行为并且做出一些预加载的手段，区别在于当用户停留在商品上时，点击命中率更高，preload可以立即加载资源，有效提升缓存命中率。
