前端性能优化之原生JS实现图片懒加载

什么是前端性能优化

从用户开始访问我们的网站,到整个页面完整地展现出来的过程中通过各种优化策略和优化方法让页面加载的更快让用户的操作响应更及时,给用户更好的使用体验。

前端性能优化的方式有很多种，如减少HTTP请求，SSR服务端渲染，webpack实现工程化打包等。每个方法都可以衍生出很多个知识点，而图片懒加载就是通过避免一次性向服务器发出大量请求导致页面加载缓慢，而提升页面加载速度，提高用户体验的常见方法之一。

效果预览

图片懒加载实现原理

将图片地址保存在html5新特性data-*中，data-*是一个自定义属性，可以用来嵌入自定义数据，并通过js滚动监听，当图片出现在浏览器可视区域的时候，将图片地址存储在src属性中，达到懒加载的目的。

<img src="" data-original="./img/img_dog(1).jpg" alt="" class="img-style">

实现代码

首先我们拿到浏览器的可视高度

var viewHeight = document.documentElement.clientHeight;

通过下行代码，可以拿到每个节点元素的相对于视窗的集合

var rect = item.getBoundingClientRect();

而rect.top则表示元素上边到视窗上边的距离，通过这个我们判断可视区域外面的图片由于滚动是否进入可视区域。并通过一个自执行函数将图片地址储存到src上，核心实现代码：

function lazyLoad() {      
    var ele = document.querySelectorAll('.img-style')      
    Array.prototype.map.call(ele, (item) => {        
        var rect = item.getBoundingClientRect();        
        //如果出现在可视区内        
        if(rect.top < viewHeight && rect.bottom >= 0){          
            (function(){            
            var img = new Image()            
            img.src = item.dataset.original            
            // onload 事件在图片加载完成后立即执行。            
            img.onload = function(){              
            item.src = img.src            
        }            
        item.removeAttribute('data-original')          
        })()        
    }      
    })  
}

节流函数

当然，我们是通过监听scroll事件来触发函数执行的，但是scroll是不间断执行的，这也是非常消耗浏览器性能的，因此我们可以通过一个节流函数来继续优化。使其在固定的时刻间隔只执行一次。

var throttle = function(fn) {      
    var flag = true      return 
    function(...args) {        
        if(!flag){          
            return;        
        }        
        flag = false        
        setTimeout(() => {          
            fn.apply(this, args)          
            flag = true        
        }, 1000)      
    }}
document.addEventListener('scroll', throttle(lazyLoad))

函数节流通过一个flag判断上个定时器是否已经执行完毕，若未执行完毕则忽略执行请求，从而减少调用次数。

具体实现代码可以访问我的github:github.com/Beichenlove…