前端性能优化之JS懒加载与预加载

JS懒加载
意义
懒加载（LazyLoad）是前端优化的一种有效方式，能极大的提升用户体验，图片加载是其重点，如果加载图片过多将大大增加http请求次数或大小，然而更多时候用户并不会浏览到全部加载进来的图片，这种代价是非常不值得的，所以当用户浏览到当前视口时再去加载相应的图片，无疑是两全其美的选择
原理
只有img标签中的src写入了图片的地址，加载页面时才会请求图片，所以使用懒加载时在src中并不写入任何地址，把图片的真实地址放到data-(标签内部属性可存数据)属性中，在js中绑定鼠标滚动事件，其回调中遍历所有图片并作出判断，将出现在视口中的图片的“data-”属性保存的地址放到“src”中
实现
实现方式：原生js
HTML

js懒加载

引入一堆图片src为空，地址写在data-original中，onerror表示当未加载图片时显示的临时加载页图片

JavaScript

window.onload = function () {
//获取当前浏览器的视口高度
var viewHeight = document.documentElement.clientHeight;

//鼠标滚动回调
function lazyload() {
    var img = document.getElementsByClassName('img'); //获取所有图片集合

    //遍历图片集合
    for (let item of img) {
        //获取图片距视口顶部的距离
        var imgHeight = item.getBoundingClientRect();
        //判断当图片出现在视口160px时把地址放到src中，显示出图片
        if (imgHeight.top < (viewHeight - 160)) {
            item.src = item.getAttribute("data-original")
        }
    }
}

lazyload();    //页面加载时把当前视口中的图片加载进来
document.addEventListener('scroll', lazyload);

}
js预加载
意义
与懒加载相反，有时我们需要实现例如快速快速切换页面、图片之类的功能时，能尽快的加载出我们所需的图片会极大提升用户体验，这时用预加载将图片先缓存到浏览器，用户使用需显示图片时无疑会顺畅很多

原理
在html中用img标签
使用JavaScript的Imgage对象
ajax请求图片
preload.js插件