关于前端:性能优化页面滚动时卡顿

34次阅读

共计 582 个字符,预计需要花费 2 分钟才能阅读完成。

测试反馈一个线上 bug,有一个客户的网站在滚动时很卡。
(我做过半年这个我的项目,去年 10 月来到这个我的项目,去做其余我的项目了,还在 bug 反馈群里偶然帮他们改一些其他人搞不定的 bug。)
共事说没法复现,他的电脑上不是很卡,我教了他一下,怎么用 chrome 开发者工具的 Performance。
有很多报红的长工作,滚动的时候一段 js 要执行 100 多毫秒。不论页面看着卡不卡,优化到不报红,三四十毫秒内就 ok 了。

我看了一下函数调用栈和我的项目的代码,是因为在一个循环里初始化了很屡次 lazyload。
大略是这样写的:

window.addEventListener('scroll', () => {页面上所有的挂件.forEach(( 挂件) => {if ( 挂件在页面可视区域) {播放挂件动画 ()
            
            $('img').lazyload({// 一些 lazyload 的配置项})
        }
    })
})

我询问了一下共事加这段代码的目标,是因为在一些非凡的状况下如果挂件上加了动画,lazyload 就生效了,不能让图片显示进去。
让图片显示进去有独自的 api,lazyload 的初始化全局应该只有一个,
要改成这样:
$('# 挂件 id img').trigger('appear')

批改后,没有报红的长工作了

这段代码是 4 月份加的,到当初 8 月底才发现,在线上跑了 4 个月……
我在想要怎么躲避这样的问题
// 未完待续 TODO

正文完
 0