前端性能优化

2024-07-15 15:48| 来源: 网络整理| 查看: 265

懒加载使用场景

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

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

懒加载的思路 img 标签有自定义属性 data-src首屏展示可视区域内的图片 src 值替换为 data-src滚动出现在可视区域的图片即时展示（重复第二步）懒加载的实现 html, body { width: 100%; height: 100%; } .containr { width: 100%; height: 100%; overflow-y: auto; } .img { width: 100%; height: 300px; } .pic { width: 100%; height: 300px; } // 获取所有图片的数组 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)

至此我们已经初步完成了我们的懒加载，但是我们大家都知道，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),这就完美达到了我们优化的目的。

【本文地址】

公司简介

联系我们