测试反馈一个线上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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。