- 正确答案：按需加载（Lazy Loading）是一种优化策略，指在真正需要时才加载资源（如组件、模块、图片、路由、数据等），而非初始时全部加载。常见实现方式包括：ES6动态import()语法实现代码分割与异步模块加载；React.lazy + Suspense 实现组件级懒加载；IntersectionObserver API 或 getBoundingClientRect 实现图片/列表项的可视区懒加载；Vue 的 defineAsyncComponent 或路由级 import() 实现路由懒加载；Webpack / Vite 等构建工具自动识别动态 import 并生成独立 chunk。 - 解答思路：首先明确“按需”的触发条件——是用户交互（如点击）、路由跳转、还是进入视口？然后选择对应技术手段：对 JS 模块，用动态 import() 触发异步加载并返回 Promise；对 React 组件，用 lazy 包装异步工厂函数，配合 Suspense 处理加载状态；对图片或长列表，监听滚动/视口变化，仅当元素即将可见时才设置真实 src 或发起请求；最后需考虑加载中状态、错误边界、缓存策略及预加载提示（如骨架屏）以保障体验。 - 深度知识讲解： 1. 动态 import() 是 ECMAScript 标准（Stage 4），本质是运行时调用模块加载器，返回 Promise。它打破静态模块依赖图，使 Webpack/Vite 能在构建时将其识别为“分割点”，生成独立的 chunk 文件（如 123.chunk.js），并支持魔法注释（如 /* webpackChunkName: "user" */）控制 chunk 命名与预取策略（preload/prefetch）。 2. 浏览器原生支持 import()，但不支持直接 import() 一个组件 JSX（需配合框架封装）。React.lazy 内部正是调用 import() 并将结果转换为可渲染的 LazyComponent，其底层依赖 React 的 reconciler 对 Suspense 的特殊处理：当子树中某个 Promise pending 时，reconciler 会暂停该子树的渲染，并向上查找最近的 Suspense 边界，显示 fallback 内容。 3. 视口检测方面，传统方案用 scroll + getBoundingClientRect 效率低且易触发高频重绘；现代推荐使用 IntersectionObserver API，它由浏览器异步回调驱动，性能极高，可精准监听目标元素与根容器（默认 viewport）的交叉状态，且支持 rootMargin、threshold 等精细配置。 4. 加载失败需兜底：动态 import 可能因网络、404、CSP 等失败，必须 catch；Suspense 不捕获错误，需配合 ErrorBoundary；图片懒加载应设置 onerror 回调回退为占位图或重试逻辑。 5. 进阶优化：结合优先级调度（如 requestIdleCallback）、预加载（link rel="preload" 或 prefetch）、服务端渲染（SSR）下的 hydrate 时机控制（避免客户端重复加载）、以及 HTTP/2 Server Push（已逐步淘汰）或 HTTP/3 QPACK 等传输层协同。 - 伪代码与关键代码示例： // 1. 动态 import + Webpack 分割 const loadUserModule = () => import(/* webpackChunkName: "user-module" */ './UserModule'); // 2. React 组件懒加载 const UserProfile = React.lazy(() => import('./UserProfile')); function App() { return ( }> ); } // 3. 图片懒加载（IntersectionObserver） function initLazyLoad(images) { const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); observer.unobserve(img); } }); }, { threshold: 0.1, rootMargin: '50px' } ); images.forEach(img => observer.observe(img)); } // 使用：

initLazyLoad(document.querySelectorAll('img.lazy')); // 4. 路由懒加载（React Router v6 + lazy） const router = createBrowserRouter([ { path: "/dashboard", element: , children: [ { index: true, element: }, { path: "users", element: }>, lazy: () => import('./routes/Users').then(module => ({ Component: module.default })) } ] } ]); // 5. 手动实现简易 lazy 函数（理解原理） function createLazyComponent(factory) { let _component = null; let _promise = null; return function LazyComponent(props) { if (_component) { return React.createElement(_component, props); } if (!_promise) { _promise = factory().then(mod => { _component = mod.default || mod; return _component; }); } throw _promise; // 这行是 Suspense 捕获的关键：抛出 Promise 即触发 suspend }; }

字节 一面凉经（中国广告）

全站热榜

创作者周榜

字节一面凉经（中国广告）