Lazy Load的实现

前言

在对前端性能优化实践的时候，图片的获取是需要http请求的。如果我们在首屏加载的时候，就将所有的图片请求回来，这样会很费性能，也没有必要。如果图片很多，会造成卡顿、白屏的现象。因此，使用lazy load是优化的方法之一，让暂时看不到的图片先不加载，当我们需要看到的时候才去请求，减轻了性能的压力，也不影响用户体验。当然现在有很多现场的组件库可以使用，jq和react都有。但是懒加载的原理是什么呢？自己如何实现的？我们可以实践一下。

代码实现

1、要给图片懒加载，我们首先要在页面上给要插入图片的位置占个位。

  
  
  
  
  


  

    

      // 注意我们并没有为它引入真实的src
      
    
    

      
    
    

      
    
    

      
    
    

      
    
     

      
    
   

这里，我们给img标签的自定义属性data-src设置真实的图片路径。

2、在懒加载的实现中，有两个关键的数值：一个是当前可视区域的高度，另一个是元素距离可视区域顶部的高度。 当前可视区域的高度， 在和现代浏览器及 IE9 以上的浏览器中，可以用 window.innerHeight 属性获取。在低版本 IE 的标准模式中，可以用 document.documentElement.clientHeight 获取，这里我们兼容两种情况：

const viewHeight = window.innerHeight || document.documentElement.clientHeight 

而元素距离可视区域顶部的高度，我们这里选用 getBoundingClientRect() 方法来获取返回元素的大小及其相对于视口的位置。对此 MDN 给出了非常清晰的解释：

该方法的返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合 。 DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

这里我们使用到的就是它的top属性。

3、具体实现：

 

由于这里不断触发scroll的方法，scroll方法里面又不断地获取元素距离可视区域的高度，会导致不断的回流，因此是十分费性能的，在此我们要考虑节流。

参考自掘金小册：前端性能优化原理与实践