懒加载

图片懒加载：从 JS 到原生

早期图片懒加载靠监听 scroll 事件 + getBoundingClientRect 判断是否进入视口，性能差（主线程同步布局查询）。2016 年 IntersectionObserver API 出现，通过异步观察目标元素与视口的交叉状态，彻底解决性能问题，不占用主线程。2019 年 Chrome 76 起支持 原生懒加载，Safari 15.4（2022 年）跟进，至今成为图片懒加载的首选方案，零 JS、零依赖。[1]

代码分割与路由懒加载

JavaScript 的懒加载核心是动态 import()，返回 Promise。React 的 React.lazy + Suspense、Vue Router 的路由组件函数写法 () => import('./Page.vue') 都基于此。Webpack 在遇到动态 import 时会自动进行代码分割，生成独立 chunk 文件，只有访问对应路由时才下载。打包体积分析工具（webpack-bundle-analyzer、Rollup Plugin Visualizer）可以直观看出哪些模块被打进了哪些 chunk，找出可懒加载的优化点。