引言

我们上次讲到网页APP与普通基于各种框架的软件前端都能用到的加载页,但是对于网页程序,我们无法像本地APP一样只在加载页停留片刻,往往需要大量的时间加载页面.

这时候我们就可以引出一个相较于页面压缩等方案,直接从根源降低带宽压力,同时优化用户首屏时间的方法 - 懒加载

Note

如果你错过了我们上期博客,可以点击此处访问我们上期内容

什么是懒加载?

懒加载,顾名思义,是”延迟加载”资源(图片、脚本、样式、路由文件等)的一种前端优化策略.

它在网页首屏内容渲染完成后再去加载非首屏所需资源,从而让用户第一时间看到真正需要的内容,同时显著降低首屏加载时间和带宽压力.

懒加载最大的特点就是”按需加载”,一个页面上大量的内容并不是所有都是用户想要看到的,懒加载只会在用户可视范围内加载内容.

懒加载能帮我解决什么问题?

正如上面说到的,懒加载可以降低首屏时间,优化页面无效请求.

与原生APP不同,网页的加载过程完全依赖于网络,页面资源越庞大,加载时间越长.以下是一些常见懒加载可以解决的问题:

问题	懒加载的解决方式
页面加载慢	仅加载首屏内容，其余延迟加载
内容太多，用户只看前一部分	仅加载用户当前需要的部分内容
带宽压力大，服务器负载高	减少一次性下载的数据量
首屏体验差	通过快速渲染首屏提升体验
SEO友好性	合理处懒加载+占位符

懒加载还能优化SEO?

是的懒加载可以提高蜘蛛的抓取效率,不提供无效信息给蜘蛛.还能提高网页速度权杖,加快收录进程.

如何实现懒加载

懒加载不是什么高等技术,对于大多是现代浏览器都支持通过一个简单的标签实现.

对于图片文件只需要添加loading="lazy"标签即可

1	<img src="img.jpg" loading="lazy" alt="示例图片">

比如当前页面上的这张图片

你对其右键就可以看到懒加载的标签

对于js文件,你可以选择添加 defer(延迟加载) 或是 async(异步加载)

1
2
3

<script src="myScript.js" defer></script>

<script src="myScript.js" async></script>

这两种加载方式都不会阻塞当前页面的继续运行,区别在于一个是按顺序加载后执行,一个是立刻执行.

这种方式也能够做到优化首屏,但是如果想在JS、CSS、页面内容上实现类似图片的懒加载效果,你需要使用注入的方式实现.

JS懒加载

function loadScript(src, callback) {
  const script = document.createElement('script');
  script.src = src;
  script.onload = callback;
  script.onerror = () => console.error(`加载 ${src} 失败`);
  document.head.appendChild(script);
}

window.addEventListener('scroll', () => {
  if (window.scrollY > 500) { // 需要用到这个js的位置
    loadScript('/js/extra-functionality.js', () => {
      console.log('脚本加载完成');
      window.removeEventListener('scroll', arguments.callee); // 移除监听防止重复加载
    });
  }
});

CSS懒加载

function loadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  link.media = 'print';
  link.onload = () => {
    link.media = 'all';
  };
  document.head.appendChild(link);
}

window.addEventListener('scroll', () => {
  if (window.scrollY > 500) { // 需要用到这个css的位置
    loadCSS('/css/lazy-loaded-section.css');
    window.removeEventListener('scroll', arguments.callee); // 移除监听防止重复加载
  }
});

页面懒加载

const lazySections = document.querySelectorAll('.lazy-section'); // 组件加载的位置
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 动态加载内容
      const section = entry.target;
      section.innerHTML = '<div>懒加载的组件内容</div>';
      observer.unobserve(section);
    }
  });
}, { rootMargin: '0px 0px -200px 0px' });
lazySections.forEach(observer.observe);

现代化的框架(如Vue、React等)都提供了更加简单的方式实现JS、CSS、页面内容的懒加载方式,详细的框架方案可以在网上搜索到.

那我可以整个页面都使用懒加载吗

当然不!可!以!

并非所有组件使用懒加载都会带来正向效果,如果过度滥用懒加载会导致页面浏览滞后,蜘蛛抓取失败等问题.

实现懒加载建议

建议	说明
控制 chunk 大小	一个懒加载模块不要太大，避免加载时间太长
添加 loading 状态	提供加载提示(如 Skeleton、loading 文字等)
提前预加载	滚动到接近目标前就预先加载，避免体验空白
处理错误状态	加载失败时提供 fallback(如重新加载按钮)
避免过度懒加载	不应将所有内容懒加载，尤其是首屏强依赖内容

懒加载模块的请求需要一定时间,而用户期待的更多是接近原生的”点击即响应”体验.

对于页面核心组件、基础框架都不建议使用懒加载.

我们还可以使用预加载机制提前开始加载下一个内容.

搜索引擎的蜘蛛一般不执行 JavaScript,所以无法抓取到懒加载页面内容.

针对这个问题我们可以在Meta信息里面完善关键内容,防止懒加载导致的SEO下降.

结语

随着 Web 技术的发展,网页早已不再只是信息堆砌的载体,而更像是一个个功能完善的Web 应用.用户对网页体验的要求也日益提高,首屏加载速度、响应流畅性、带宽优化等维度,直接影响着用户留存与使用体验.

懒加载作为一种经典的”按需加载”策略,已经成为前端优化中不可或缺的一部分.它不仅能提升首屏速度、优化资源使用,还能在合理使用下兼顾用户体验与搜索引擎友好性.

但与此同时,我们也必须认识到:

懒加载不是万能钥匙。过度使用或不合理使用懒加载,可能会带来副作用.

所以,在实践懒加载时让我们:

合理的”懒“,”懒“出更高效、更优雅、更用户友好的前端应用

MoGuQAQ's blog

前端优化: 懒加载如何懒出效率

引言