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

首先 小学生在这里 祝大家 元旦快乐！！！！！

懒加载使用场景

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

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

懒加载的思路

• 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),这就完美达到了我们优化的目的。