性能优化——懒加载

一、什么是懒加载？

什么是懒加载呢？懒加载在我们的日常应用中非常常见。打开bilibili，首页会直接显示，我们一直往下滑动会发现下面的图片会有一个加载的过程，而不是直接出现的，这就是懒加载的效果。懒加载即延迟加载，也叫按需加载，对于一个很长的页面，优先加载可视区域的数据，可视区域之外的数据不会进行加载，其他部分等进入可视区域时再加载。毕竟如果图片很多，所有的图片都被加载出来，而用户只能看见可视区域的那一部分图片，这样就很浪费性能，使用懒加载会使得网页的加载速度很快，减少了服务器的负载，大大提高了用户体验。

二、懒加载的实现原理

图片的懒加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。

懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可是区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。

使用原生JavaScript实现懒加载

1. window.innerHeight 是浏览器可视区的高度

2. document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动过的距离

3. imgs.offsetTop是元素顶部距离文档顶部的高度（包括滚动条的距离）

4. 图片被加载的条件：imgs.offsetTop<window.innerHeight +document.body.scrollTop;

代码实现

<div class = "container>
    <img src = "loading.gif" data-src = "pic.png">
    <img src = "loading.gif" data-src = "pic.png">
    <img src = "loading.gif" data-src = "pic.png">
    <img src = "loading.gif" data-src = "pic.png">
    <img src = "loading.gif" data-src = "pic.png">
    <img src = "loading.gif" data-src = "pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
window.addEventListen('scroll',lazyload);
function lozyLoad(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var winHeight = window.innerHeight;
    for(int i = 0; i<imgs.length ; i++ ){
        if(imgs[i].offsetTop < scrollTop + winHeight){
           imgs[i].src = imgs[i].getAttribute('data-src');
          }
       }
  }
  window.onscroll = lozyLoad;
</script>

三、懒加载的特点

• 节约流量：有些用户并不会全部看完，全部加载会耗费大量流量，使用懒加载会节约流量

• 减少无用资源的加载：使用懒加载明显减少服务器的压力和流量，同时也减少了浏览器的负担

• 提升用户体验：如果同时加载大量图片，用户等待的时间可能过长，营销用户体验，使用懒加载能大大提升用户的体验

• 防止加载过多图片而影响其他资源文件的加载：会影响网站应用的正常使用

四、懒加载与预加载的区别

首先我们先了解一下什么是预加载

什么是预加载？

预加载：利用浏览器空闲时间来下载后预取用户在不久的将来可能访问的文档。网页向浏览器提供一种预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中，当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。

目前支持两种预加载

preload

<link href=/js/chunk-vendors.5e63c7cf.js rel=preload as=script>

当浏览器解析到preload会立即进行资源的请求，需要注意的是使用preload进行预加载时需要指定文件的类型

prefetch

<link href=/js/chunk-dca4e6ea.e4986a0a.js rel=prefetch>

当浏览器解析到prefetch时，不会立即请求资源，会等待浏览器空闲以后再进行资源的请求

综上：

preload 适用于加载当前页面需要用到的资源，prefetch适用于后续页面需要用到的资源。

懒加载与预加载的区别

这两种都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器的前端压力