前端性能优化-图片懒加载（防抖、节流）

懒加载使用场景

在一些图片量比较大的场景（电商首页，小程序首页等），如果我们打开页面时就加载所有的图片，那势必会导致页面的卡顿以及白屏，给用户不好的体验，导致用户流失。

但是我们仔细想一下，用户真的需要我们显示所有图片一起展示吗？其实并不是，用户看到的只是浏览器可视区域的内容。所以从这个情况我们可以做一些优化，只显示用户可视区域内的图片，当用户触发滚动的瞬间再去请求显示给用户。

懒加载的思路

img 标签有自定义属性 data-src
首屏展示可视区域内的图片 src 值替换为 data-src
滚动出现在可视区域的图片即时展示（重复第二步）

懒加载的实现

<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    .containr {
        width: 100%;
        height: 100%;
        overflow-y: auto;

    }

    .img {
        width: 100%;
        height: 300px;
    }

    .pic {
        width: 100%;
        height: 300px;
    }
</style>

<div class="containr">
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/1.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/2.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/3.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/4.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/5.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/6.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/7.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/8.png">
        </div>
        <div class="img">
            <img class="pic" src="" alt="" data-src="./imgs/9.png">
        </div>

</div>
    
<script>
        // 获取所有图片的数组
        const imgs = document.querySelectorAll('.containr .pic')
        // 获取父元素
        const containr = document.querySelector('.containr')
        // 获取可视区域高度
        const viewHeight = window.innerHeight
        
        const load = lazyLoad()
        // 首屏渲染
        load()
        function lazyLoad() {
            // 运用闭包 count 进行计数 避免已显示的图片重复参与循环
            let count = 0
            return () => {
                for (let i = count; i < imgs.length; i++) {
                    // getBoundingClientRect()获取返回元素的大小及其相对于视口的位置
                    // 获取第i张图片是否在可视区域
                    let distance = viewHeight - imgs[i].getBoundingClientRect().top
                    if (distance >= 0) {
                        // 图片在可视区域时设置图片的src 为 当前元素 data-src
                        imgs[i].src = imgs[i].getAttribute('data-src')
                        // 图片已被显示，下次从count + 1 张开始检查是否在可视区域
                        count += 1
                    }
                }
            }
        }
        // 添加滚动事件触发加载
        containr.addEventListener('scroll', load, false)

</script>

至此我们已经初步完成了我们的懒加载，但是我们大家都知道，scroll这个事件实在太容易被触发了，用户一滚动鼠标就会触发很多次，如果一直滚势必会导致重复触发执行我们的事件，这也会导致我们的性能急剧下降，所以这就引出了我们的混合体 防抖节流 来优化我们的性能。

防抖 && 节流

防抖：在一定时间内，触发多次事件，只认第一次触发的，到了时间结束执行事件

 function debounce(fn, time) {
            let oldTime = 0;
            return () => {
                const nowTime = new Date()
                if (nowTime - oldTime >= time) {
                   fn()
                   oldTime = nowTime
                }
            }
        }

节流：在一定时间内，触发多次事件，只认最后一次触发的并且重置时间，到了时间结束执行事件

function throttle(fn, time) {
            let timer = null
            return () => {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn()
                }, time);
            }
        }

在这里throttle有一个严重的问题就是如果用户一直触发事件，用户会一直得不到响应，所以我们可以借助防抖的思路来优化节流。

 function debounce(fn, time) {
            let oldTime = 0,
                timer = null;
            return function () {
                const nowTime = new Date()
                 // 保留调用时的this上下文
                let context = this
                // 保留调用时传入的参数
                let args = arguments
                if (nowTime - oldTime < time) {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    timer = setTimeout(() => {
                        oldTime = nowTime
                        fn.apply(context, args)
                    }, time);
                } else {
                    // 用户重复触发，到达事件节点 还是会去执行事件 
                    oldTime = nowTime
                    fn.apply(context, args)
                }
            }
        }

所以最后我们监听事件可以修改为containr.addEventListener('scroll', debounce(load, 1000), false),这就完美达到了我们优化的目的。

欢迎大家进行指导留言，谢谢大家。