跳转时避免白屏需在document.readyState==='interactive'阶段启动懒加载，SPA中应复用模块缓存，history.pushState后须手动重注册IntersectionObserver监听。
跳转时如何避免白屏并触发懒加载
HTML5 页面跳转本身不带懒加载能力，所谓“跳转结合懒加载”，本质是跳转后立即按需请求资源，而不是等 DOM 就绪后再统一拉取。关键在控制 document.readyState 阶段和资源注册时机。
常见错误是：用 window.onload 或 DOMContentLoaded 触发懒加载逻辑，结果首屏渲染完成才开始加载图片/组件，用户已看到空白或占位符。
- 推荐在
document.readyState === 'interactive'时启动懒加载监听器（如IntersectionObserver），此时 DOM 已解析但资源未全载入 - 对跳转目标页，把懒加载初始化逻辑提前到
中的内联脚本里，避开外部 JS 加载延迟 - 若用前端路由（如 Vue Router、React Router），在
beforeEach或loader钩子中预判页面所需模块，用import()动态导入，而非跳转后才useState+useEffect拉取
img 标签懒加载必须加 loading="lazy" 吗
不是必须，但它是 HTML5 原生最轻量、兼容性最好的方案。不加该属性时，浏览器会在解析 HTML 阶段就发起所有 <img alt="HTML5跳转结合懒加载提升速度怎么做_按需加载技巧【技巧】" > 请求，不管是否在视口内。
注意：loading="lazy" 仅对普通 <img alt="HTML5跳转结合懒加载提升速度怎么做_按需加载技巧【技巧】" > 和 <iframe></iframe> 生效，且有明确限制：
立即学习“前端免费学习笔记（深入）”；
- 仅在 Chrome 76+、Edge 79+、Firefox 75+ 支持；Safari 目前（2024）仍不支持该属性
- 对 CSS 背景图、
<picture></picture>内的<source></source>无效，需用 JS 方案兜底 - 若图片在首屏内（比如
margin-top: -100px拉上来的），部分浏览器仍会提前加载，不能完全依赖该属性保序
SPA 跳转后如何复用已加载的懒加载模块
单页应用跳转不刷新页面，但若每次路由都重新执行 import()，Webpack/Vite 默认会生成新 chunk 并重复 fetch —— 这不是懒加载，是“懒重复加载”。
真正按需的关键在于模块缓存与复用：
- 确保动态导入路径是静态字符串（如
import('./pages/Home.vue')），而非拼接变量，否则 Webpack 无法做 chunk 合并 - Vite 项目中，检查是否启用了
build.rollupOptions.output.manualChunks，避免相同依赖被多次打入不同 async chunk - 在 React 中，用
React.lazy+Suspense时，组件卸载后其模块不会自动从内存释放；如需强管控，可配合import.meta.hot?.dispose（HMR 场景）或自定义unmount清理逻辑
history.pushState 后懒加载失效怎么办
用 history.pushState 手动跳转时，DOM 更新了，但没触发框架的生命周期或自定义懒加载监听器重置，导致 IntersectionObserver 不再响应新插入的元素。
根本原因是观察器只对已存在的节点生效，新插入的 <img alt="HTML5跳转结合懒加载提升速度怎么做_按需加载技巧【技巧】" > 或组件容器需要手动调用 observer.observe()。
- 封装一个
observeOnce(node)工具函数，在每次插入新内容后遍历所有待懒加载节点并注册 - 监听
popstate和自定义的 pushState 后事件，在回调中调用该工具函数 - 更稳妥的做法是：不在 pushState 后直接操作 DOM，而是交由框架更新（如 React 的
setState、Vue 的ref变更），让响应式系统自动触发后续懒加载注册
最容易被忽略的是：懒加载逻辑常绑定在页面初始加载时，而 SPA 的后续跳转绕过了这个入口点。没有显式重触发机制，它就真的“懒”在那里不动了。
