懒加载
Lazy Loading
中级通用懒加载（Lazy Loading）是把暂时用不到的资源或数据，推迟到用户需要时再加载。它能减少初次打开页面的下载量和等待时间；比如用户进入「报表」标签页后，才加载图表代码与数据。
你可能会说：「这个后台首页打开太慢了，能不能先显示当前要看的内容，其他内容等我点开再加载？」
读之前建议先了解
动手看看打开报表标签页
1
用户打开产品首页，页面先呈现眼前要看的内容。报表还没用上，图表代码和报表数据都不急着加载。
要点懒加载是怎样把工作推迟的？
- 1
先找出暂时用不到的内容
你打开后台首页时，首屏数据和当前标签页的内容马上就要用；另一个标签页里的图表可能暂时用不到。懒加载先区分这两类内容，再决定哪些代码、图片或数据可以晚点取。
- 2
需要时才触发加载过程
触发时机可以是用户切换标签页，也可以是图片快进入可见区域。因为加载从首次打开页面移到了这些时刻，所以初次请求变少了，但用户到达那里时仍可能需要等一下。
- 3
给等待和失败留出位置
如果图表要等用户点开才请求，界面就要能表示正在加载、加载失败和重试。否则你虽然缩短了首页等待时间，却可能让用户点开标签页后只看到一块空白。
容易混淆的地方
懒加载改变的是「什么时候加载」。分页改变的是「一次给多少条」，用户翻页时再取下一页数据，两者可以一起用。虚拟列表改变的是「一次渲染多少条」：即使数据已经全部取回，也能只渲染可见部分；它本身不等于按需取数据。
什么时候用
适合用
- 后台有多个标签页，用户通常只看其中一个：先加载当前页，切换时再取其他页的数据。
- 文章页有很多图片：先加载附近会看到的图片，用户往下滚动时再加载后面的图片。
- AI 工具有一个较少打开的结果图表：进入图表视图时，再加载绘图代码和所需数据。
不适合用
- 登录后的欢迎页只有少量文字和一个入口，内容本来就很轻；直接加载，没必要增加等待状态。
- 用户点击「导出全部记录」后需要得到完整文件；改用后台任务生成文件，而不是靠页面滚动逐段加载。
- 首屏的标题、主要操作和关键数据一打开就要看见；优先加载这些内容，别把它们推迟到用户操作后。
练一练选一个答案，看看解释
你做的运营后台有「概览」和「报表」两个标签页。用户默认进入概览，但报表的图表代码和数据让首页打开变慢。你会怎么改？
让 AI 帮你做复制给 AI Agent 直接用
请为后台的「报表」标签页做懒加载：默认进入概览时不加载报表的图表代码和数据，用户打开报表后再加载；保留加载中、失败重试的界面状态，并检查切换标签页后功能是否正常。