拒绝白屏焦虑：深入 JS 懒加载的实战策略与细节把控

想象一下，当你点进一个充满干货的博客或电商首页，屏幕却先是一片空白，图片像蜗牛一样逐个显现，这种体验简直让人抓狂。用户等待的每一秒，流失率都在攀升。这时候，JS 懒加载就不再是一个可选项，而是保障用户体验的必修课。

很多人听到懒加载，第一反应就是“等滚动了再加载”。这没错，但只做到了皮毛。真正的性能优化，需要区分场景，选择最合适的“触发机制”。

告别低效的滚动监听

早些年，绑定 scroll 事件是主流做法。虽然直观，但它是个重量级选手。用户每滚动一像素，浏览器都要计算一次位置，频繁触发回调极易造成页面卡顿。除非兼容旧版本浏览器，否则现在更推荐直接使用 IntersectionObserver API。

这个原生 API 专为观察元素可见性而生，它把判断可见性的工作交给了主线程之外，性能表现吊打手写节流函数。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 进入视口区域才执行加载
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; 
      // 加载完成立即停止观察
      observer.unobserve(img); 
    }
  });
}, { rootMargin: '50px' }); // 提前 50px 开始加载，避免白边

注意代码中的 rootMargin 参数。设置这个缓冲区很重要，它能确保图片在完全滑入视线前就已经开始下载，用户视觉上几乎感觉不到等待。加载完成后务必调用 unobserve，否则 DOM 节点残留会导致内存泄漏。

不仅仅是图片：代码层面的拆分

如果说图片懒加载是视觉上的优化，那么代码层面的动态导入则是减轻首屏负担的关键。

很多项目初期为了方便，把所有模块都打包进了一个巨大的 bundle.js。哪怕用户只看首页，浏览器也要下载整个应用的逻辑。使用 ES6 的动态 import() 语法，可以实现按需加载。

// 点击按钮时才去拉取该模块的代码
button.addEventListener('click', () => {
  import('./heavyModule.js').then(module => {
    module.init();
  });
});

在 Vue 或 React 项目中，配合路由懒加载使用效果更佳。这意味着用户只有走到某个页面时，对应的脚本才会被网络请求拉取。对于大型应用，这一招能显著减少初始包的体积，让首屏渲染快上几个身位。

那些容易被忽视的“坑”

方案选对了，细节不到位照样翻车。

布局偏移（CLS）是常见的副作用。 当图片被懒加载时，如果容器没有预设宽高，内容插入瞬间会挤压下方布局，导致页面跳动，严重影响体验。解决思路很简单：在 CSS 中为懒加载元素预留固定宽高或 aspect-ratio。

其次是错误处理。网络环境复杂，图片请求失败很常见。简单的 <img> 标签一旦报错就彻底空白了。建议在 JS 层面增加 onerror 回调，替换为备用占位图，或者提供重试图标，别让一张坏图毁了整个板块的美感。

还有一个隐形风险是资源竞争。如果长列表中有成百上千个元素同时触发加载，服务器压力会瞬间激增。合理限制并发数量，或者对非关键路径的资源降低优先级，才能让服务器喘口气。

写在最后

技术方案的优劣，最终都要由用户体验来投票。JS 懒加载的核心不在于“不加载”，而在于“在合适的时候加载”。

不要为了优化而优化。如果一个页面本身就很短，用户一眼就能看到所有内容，强行引入复杂的懒加载逻辑反而是画蛇添足。评估业务场景，权衡开发成本与收益，选择最简单有效的那个方案，才是工程师该有的务实态度。毕竟，流畅的交互背后，是每一行代码对性能的精算。