SuperAPI AI 工具集

lazy-loading

通用与其它

查看项目

更新于 10-16 01:15

技能介绍

用途:这是一份编码实践指南,主题是懒加载(Lazy Loading),核心原则是“数据在真正需要之前绝不加载”,用于解决首屏一次性加载全部数据导致的加载慢、资源浪费问题。

主要能力:给出识别“急切加载”坏味道的方法,例如页面加载时用 Promise.all 发起 5 个以上请求、为折叠或隐藏区域取数、加载完整列表而不分页、首屏加载超过 1-2 秒等。同时提供正确模式:首屏只加载立即可见的关键数据,其余按需加载。

使用方式:文档列出多种懒加载技术,包括按交互加载(用户点击标签页时再取数)、按滚动加载(Intersection Observer)、按路由加载(React lazy 配合 Suspense)、以及分页或无限滚动。示例使用 React 的 useLazyQuery、useState、useRef、useEffect 等,代码保持原样。

适用场景:仪表盘、含隐藏标签页的页面、折叠区域、首屏以下内容、大型列表等。

限制:文档未提供具体安装命令、依赖版本、框架适配范围或性能基准数据,这些事实暂未提供;示例以 React 为主,其他技术栈需自行迁移。