现在做项目不管是Vue还是原生图片基本都会加懒加载。大家都觉得这是个基础优化写上属性或者调个插件就完事不会出任何问题。但我线上踩过好几次诡异问题全是懒加载搞出来的。图片偶尔加载不出来、页面滚动空白、图片位置错乱、首次进入页面图片卡死不渲染排查半天想不到是懒加载逻辑的问题。最常见的就是页面布局变动导致的懒加载失效。很多页面不是固定结构顶部弹窗、banner、动态组件渲染、异步接口改高度都会让页面可视区域发生变化。懒加载一般是页面初始化时记录元素位置一旦布局后续变了监听位置就不准了。明明图片已经在屏幕里了还是判定为未进入一直不加载用户得手动滚动一下屏幕才出来。这个问题特别玄学刷新有时候好、有时候坏完全看组件渲染顺序。还有一个很多人忽略的点缓存图片的懒加载拦截。浏览器缓存过的图片加载速度极快DOM刚渲染完图片就已经加载完成。这时候懒加载的监听还没初始化导致逻辑直接失效。结果就是缓存里的图片偶尔空白需要二次滚动才刷新。本地开发因为资源一直是新的很难复现上线后用户频繁遇到。容器滚动场景的坑更深。普通页面滚动还好一旦遇到弹窗滚动、局部div滚动、内嵌列表很多通用懒加载组件不会识别父级滚动容器只监听window滚动。图片在局部容器里滚到底了监听事件完全不触发图片永远加载不出来直接空白占位。之前做后台弹窗列表死活找不到图片不加载的原因最后才发现是懒加载只监听了顶层窗口完全没监听弹窗内部滚动。另外就是图片地址动态替换的问题。很多列表会切换图片资源、切换分类、刷新列表数据src地址动态变。懒加载的监听实例不会同步更新还拿着旧的DOM地址监听。导致切换数据后新图片直接不触发加载页面看着空空的需要重新触发一次滚动才正常。还有个细节低端机、弱网环境特别容易翻车。设备性能差的时候页面渲染卡顿DOM加载延迟懒加载监听初始化时机错乱。有的图片被误判为视口外直接跳过加载页面大片空白。平时电脑开发完全感受不到一上用户手机就各种小问题。写多了真的发现前端很多小优化都不是无脑加就行。懒加载看着是最简单的性能优化实际上牵扯渲染时机、布局变化、滚动监听、缓存机制、动态DOM更新。不考虑边界场景直接用上线后全是断断续续的体验问题修起来还特别耗时间。现在我写懒加载都会主动处理动态dom刷新、容器监听重置、缓存图片兜底判断。不再盲目相信插件自带逻辑。很多看似稳定的前端功能只是平时没触发到它的隐性bug而已。