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

懒加载使用场景

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

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

懒加载的思路

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

懒加载的实现

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

防抖 && 节流

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

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

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

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

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

 function debounce(fn, time) {
            let oldTime = 0,
                timer = null;
            return () => {
                const nowTime = new Date()
                if (nowTime - oldTime < time) {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    timer = setTimeout(() => {
                        oldTime = nowTime
                        fn()
                    }, time);
                } else {
                    // 用户重复触发，到达事件节点 还是会去执行事件 
                    oldTime = nowTime
                    fn()
                }
            }
        }

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