什么是懒加载

1. 图片懒加载

对于多图的网站，只加载可视区内的图片，当页面向下滚动的时候，再加载后面的内容。

原理：

我们先不设置图片的 src 属性， 将图片的真实路径放在一个浏览器不认识的属性中（比如 data-src）， 然后我们去监听 scroll 事件。图片距页面顶端的距离 小于 可视区域的高度 时， 说明图片已经进入可视区域， 这时把 data-src 放到 src 中即可。

同时每个图片必须指定高度。

具体实现

HTML:

<img src="" class="image-item" lazyload="true" data-original="http:www.xxx.com/abc.png">

CSS:

.image-item {
  height:400px; //必须要设置高度，否则的话所有图片都会进入到可视区，都会被下载。
}

JS:

document.addEventListener('scroll', lazyLoad);

let viewHeight = document.documentElement.clientHeight;
function lazyLoad(){ 
  let elements = document.querySelectorAll('img[data-original][lazyload]');
  for(item of elemetns){
    if(!item.dataset.original){
      return;  
    }

    let rect = item.getBoundingClientRect();
    if(rect.botton >=0 && rect.top < viewHeight){
      (function(){
        let img = new Image();
        img.src = item.dataset.original;
        img.onload = function(){
          item.src = img.src;
        }
        item.removeAttribute('data-original');
        item.removeAttribute('lazyload');
      })()
    }
  }
}

2. js懒加载 打包时按路由打包，按路由加载。

const Route1 = lazy(() => import("../application/Route1/"));
const Route2 = lazy(() => import("../application/Route2/"));

https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules

##为什么要使用懒加载？

• 对于大多数用户，特别是移动端和网速比较差的用户，如果首屏加载过多的图片，页面将会加载得很慢而且浪费用户的流量；
• 如果加载的资源过多，达到同域名下最大并发数时，导致js加载延迟，可能会影响网页的正常使用；
• 能够节省流量和减轻服务器压力，进一步为公司减少成本。

预加载

图片，js资源在使用前提前加载。 资源使用时，能从缓存中加载，提升用户体验。

1. 图片预加载

预加载主要为了避免网络延迟、或者图片太大引起页面长时间留白的问题。

实现

• img 标签

<img src="http:www.xxx.com/abc.png" style="display:none"/>

• Image 对象

var image = new Image();
image.src = "http:www.xxx.com/abc.png";

• XMLHttpRequest

2. js预加载 https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules