懒加载

懒加载是什么？

即延迟加载、按需加载

比如随着滚动屏幕渐进式加载图片，而不是一次性加载完所有图片
又比如vue构建项目时，对第三方库(如Element-UI)按需加载相应组件
再比如前端项目打包时，避免单文件过大，进行代码分割

为什么要使用懒加载？它解决了哪些问题？

根据懒加载定义可知，其作用就是延迟加载资源或者按需加载资源，所以它具有以下特点：

1.减少无用资源的加载，减轻了服务器的压力和流量

2.提升用户体验，按需加载图片，可以避免长时间等待所有图片的加载

懒加载的实现原理？

图片的加载是由img标签的src属性引起的。

所以可以先将src属性设置为空，再添加一个自定义属性存储需加载的图片地址。当图片需要加载时，将图片地址赋值给src属性，即可实现按需加载。(HTML5中自定义属性为data-xxx形式)

其实现重点在于确定图片什么时候需要加载？

图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop
//imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）
//window.innerHeight 是浏览器可视区的高度
//document.body.scrollTop || document.documentElement.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>
    let imgs = document.querySelectorAll('img');
    function lazyLoad(){
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        let winHeight= window.innerHeight;
        for(l i=0;i < imgs.length;i++){
            if(imgs[i].offsetTop < scrollTop + winHeight ){
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
    window.onscroll = lazyLoad();
</script>

//因为滚动条滚动也是一个高频事件，可以进行节流优化，此文不赘述，留给读者实现
复制代码

懒加载与预加载的区别？

懒加载就是延迟加载、按需加载，当用户需要时再去加载相应资源

预加载是将资源提前加载到本地，使用时从缓存中取资源

补充部分：

1.Element.getBoundingClientRect()

该方法返回元素的大小及其相对于视口的位置。它的top值表示元素左上角到视口顶部的距离

//懒加载的另一种判断条件形式
img.getBoundingClientRect().top < window.innerHeight
复制代码

2.获取屏幕可视窗口大小

//原生方法：
window.innerHeight 标准浏览器及IE9+ 
document.documentElement.clientHeight 标准浏览器及低版本IE标准模式
document.body.clientHeight  低版本混杂模式

//jQuery方法： 
$(window).height()
复制代码

3.获取滚动条滚动的距离

//原生方法：
window.pagYoffset 标准浏览器及IE9+
document.documentElement.scrollTop 兼容ie低版本的标准模式
document.body.scrollTop 兼容混杂模式

//jQuery方法：
$(document).scrollTop()
复制代码

4.获取元素的尺寸

//jQuery：
$(document).offset().top元素距离文档顶的距离
$(document).offset().left元素距离文档左边缘的距离。
//原生方法：
.getoffsetTop()
复制代码

参考资料：

「2021」高频前端面试题汇总之前端性能优化篇 (juejin.cn)

懒加载和预加载 – 简书 (jianshu.com)