知识篇：（二十四）前端性能优化之道：Lazy Loading 与图片懒加载实战

知识篇：（二十四）前端性能优化之道：Lazy Loading 与图片懒加载实战

目录

1. 前言
2. 为什么需要 Lazy Loading？
3. Lazy Loading 基础概念
   • 3.1 什么是 Lazy Loading？
   • 3.2 如何判断内容是否需要懒加载
4. 图片懒加载：核心原理与实现方式
   • 4.1 原生实现方法
   • 4.2 使用 Intersection Observer 实现图片懒加载
   • 4.3 Vue、React 中的实现方案
5. 资源懒加载：代码拆分与按需加载
   • 5.1 代码拆分的原理
   • 5.2 动态 import 与按需加载
   • 5.3 在 Vue、React 项目中的实践
6. 实战案例：开发一个懒加载图片库组件
7. 性能优化中的注意事项和最佳实践
8. 总结

---

1. 前言

Lazy Loading（懒加载）是现代前端性能优化的关键策略之一，特别是对图片和资源文件的优化。当页面首次加载时，我们只加载首屏内容和必要资源，等到用户滚动到下方或需要时，再动态加载其余内容。这种策略显著减少了页面加载时间，提升了用户体验，尤其是在移动端和低网速环境下。

---

2. 为什么需要 Lazy Loading？

现代 Web 应用通常包含大量的资源，如图片、脚本、视频等，这些资源的加载可能会严重拖慢首屏的加载速度。Lazy Loading 的主要优势在于：

• 提高首屏加载速度：减少页面初次加载的资源请求量，加快页面响应。
• 节省带宽和流量：避免加载用户未必需要的资源，特别适合移动端。
• 提升 SEO：谷歌等搜索引擎支持懒加载处理，能够更好地抓取页面内容。

---

3. Lazy Loading 基础概念

3.1 什么是 Lazy Loading？

Lazy Loading 是指仅在用户需求的情况下加载资源。通常应用于图片、视频、iframe、长列表或分页加载的大量数据。

3.2 如何判断内容是否需要懒加载？

适合 Lazy Loading 的资源：

• 非首屏的图片和视频内容。
• 动态数据和异步请求的内容。
• 用户未必访问的长列表内容。

适用场景：

• 图文密集的网站，如电商、社交平台等。
• 视频流、媒体内容等大流量应用。
• 单页应用（SPA）中非必要的首屏加载资源。

---

4. 图片懒加载：核心原理与实现方式

图片懒加载的核心在于在页面首次加载时，延迟加载用户暂时不可见的图片资源，等到用户滚动到图片位置时再加载该图片内容。这里介绍几种常用的图片懒加载实现方式：

4.1 原生实现方法

现代浏览器支持原生的懒加载属性 loading="lazy"，可以直接应用于 <img> 标签。

示例代码：

<img src="example.jpg" loading="lazy" alt="Lazy Loaded Image">

优点：实现简单，无需引入额外的 JavaScript。
缺点：不支持所有浏览器（如 Safari 旧版本），仅适用于图片和 iframe。

4.2 使用 Intersection Observer 实现图片懒加载

Intersection Observer 是一种用于观察元素可见性的 API，非常适合懒加载。可以用它来判断图片是否出现在视口中，再动态加载图片。

示例代码：

const lazyLoadImages = () => {
   
  const images = document