什么是懒加载
懒加载
定义：按需加载资源，仅当用户需要时才动态加载，避免一次性加载全部内容。
核心场景：
- 图片懒加载：滚动到图片位置时才加载真实图片（如淘宝商品列表）。
- 组件/JS懒加载：SPA路由切换时加载对应页面JS（如React的
React.lazy）。 - 数据懒加载：分页加载表格数据（如微博下拉加载更多）。
实现方式：
- 传统：通过
IntersectionObserver监听元素是否进入视口。 - 现代：HTML原生属性
loading="lazy"（Chrome 76+支持）。
优点：
- 提升首屏加载速度（减少初始资源请求）。
- 节省用户流量（仅加载可见内容）。
- 降低服务器压力。
缺点：
- 实现不当可能导致图片“闪现”（占位图与真实图尺寸不一致）。
- 弱网环境下滚动时可能出现加载延迟。
对比场景：
- 适合图片多、内容长的页面（如电商、新闻网站）。
- 不适合需要立即展示全部内容的场景（如登录页）。
面试话术：
“懒加载是前端性能优化的常用策略，核心是‘按需加载’。比如在电商APP中，商品列表的图片不会全部一次性加载，而是当用户滚动到某个位置时，才动态加载对应图片。实现上可以用IntersectionObserver监听元素与视口的交叉状态，也可以直接用HTML的loading=lazy属性。它能显著提升首屏加载速度，减少不必要的流量消耗。”
查看18道真题和解析
美团一面2247人在聊
