浅谈lazyload、prefetch、preload

1.lazyload（懒加载）

懒加载，也可以说成是按需加载，常见的有图片懒加载，前端的路由懒加载。
1）图片的懒加载，原理主要通过判断img标签有没有进入视口来确定是否给予其正确的src属性从而来加载资源，这样做的好处主要是减少http请求，节省网络资源，提高在视口内的图片的加载速度。

2）前端路由的懒加载，原理主要是在前端的项目构建打包阶段，把不同路由对应的组件分割成不同的代码块，然后当路由访问的时候才加载对应的组件，这样做的好处是按需加载和解析代码，提高首屏渲染速度。因为大家想一想，如果所有JS代码都打包后都放在一个bundle里面，首先，引用这个bundle时，请求这个bundle的网络时延会变长；其次，这个budle的解析运行时间肯定也会变长，而JS与页面的渲染又是互斥的，用户就会出现卡顿的现象。

3）在webpack打包时，JS文件中的模块引用使用import()语法就可以实现对依赖模块的懒加载了

document.getElementById('btn').onclick = () => {
  // 使用import会实现code split
  // 懒加载 当文件需要使用时才加载
  import(/* webpackChunkName:'test' */'./test')
    .then(({ mul }) => {
      console.log(mul(4, 5));
    })
}

Vue的路由懒加载

2.prefetch（在浏览器网络资源空闲的时候进行预加载）

1）概念解释
预加载，而且是在网络资源空闲的时候进行的预加载，这说明这个prefetch技术的应用对象应当是加载和解析优先级比较低的对象。

2）优点
它类似于懒加载，也可以应用到路由当中，但跟懒加载不同的一点就是，它不是在等到用户滑到某个图片或者去访问某个路由的时候才去加载图片或组件，而是在网络资源空闲时就进行资源预加载。等到真正访问的时候，资源已经加载完毕，这样显然是可以提高用户的访问页面的速度的。

3）缺点
但是它有一个缺点，就是可能造成用户带宽的浪费，如果资源已经预加载了，但是用户却没有访问这些预加载的资源，那就可能白白地浪费了流量，因此在手机端一定要慎用，最好是在用户打开wifi的情况下，再使用prefetch预加载这个技术。

4）使用link标签实现对脚本和样式的prefetch

<link rel="prefetch" as="script" href="./1.js">
<link rel="prefetch" as="style" href="./1.css">

注意，这样只是获取了资源，如果要使用这些资源，还得引用一次

<link rel="styleSheet" href="./1.css">

<script src="./1.js"></script>

5）在webpack中打包构建过程中实现的prefetch预加载，只需要加上webpackPrefetch:true这样的注释

document.getElementById('btn').onclick = () => {
  // 使用import会实现code split
  // 预加载 prefetch：会在使用之前，提前加载JS文件，等其他资源加载完毕，浏览器空闲了，再偷偷加载资源，就是兼容性不太好
  import(/* webpackChunkName:'test', webpackPrefetch:true */'./test')
    .then(({ mul }) => {
      console.log(mul(4, 5));
    })
}

3.preload（不用等待网络资源空闲，直接预加载）

1）概念解释
直接加载文件，并且保存内存缓存中，一般来讲没什么用，除非下一个页面用到了通过preload加载的样式资源或者脚本，那么下一个页面就可以直接读到内存缓存的相应资源，从而加快用户打开下一个页面的速度。

2）使用link标签实现对脚本和样式的preload

  <link rel="preload" as="script" href="./1.js">
  <link rel="preload" as="style" href="./1.css">

如果使用了preload加载资源，但是浏览器检测到你在preload之后没有使用这些资源，那么浏览器会报出警告：

因为preload是一种立即式的加载，占用了网络带宽下载下来的资源又不用，这是及其可恶且浪费资源的，因此浏览器就会向开发者发出一个警告。
和用link标签实现prefetch一样，preload出来的资源也要再引用一次才会生效。

<link rel="styleSheet" href="./1.css">

<script src="./1.js"></script>