HTML路由本身不拖慢SPA，但错误实现会加剧首屏延迟、白屏与内存开销：需在跳转触发瞬间预取数据而非等待pushState；避免popstate中同步重渲染或未节流请求；守卫逻辑须异步可中断；动态导入须确保静态路径以实现有效代码分割；切换时务必清理定时器等资源防止内存泄漏。
HTML 路由本身不会拖慢单页应用（SPA），但错误的实现方式会显著放大首屏延迟、白屏时间与内存开销。
history.pushState 与 replaceState 的调用时机不当
很多开发者在路由跳转后才开始加载组件或数据，导致用户点击后界面卡顿、无反馈。关键不是 pushState 慢，而是它被当成了“加载完成”的信号，而非“导航发起”的信号。
- 应在用户触发跳转（如点击）的瞬间就启动数据预取或组件懒加载，
pushState只负责同步 URL，不承担等待逻辑 - 避免在
popstate事件回调里同步执行 heavy render 或未加节流的 API 请求 - 若使用 React Router v6+，
useNavigate内部已封装pushState，但需配合loader或defer控制资源加载节奏
路由守卫中执行同步阻塞操作
比如在 beforeEach（Vue Router）或 createRouter 的 scrollBehavior 里直接调用未包装的 localStorage.getItem 或同步 DOM 查询，会中断渲染帧。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有守卫逻辑应为纯函数或异步可中断：权限校验走
async/await+ token 缓存，而非同步读取过期 token 后再发请求 - 避免在守卫中调用
document.querySelector或修改document.title等强制重排操作；改用requestIdleCallback或setTimeout(..., 0)延后 - Vue Router 的
navigation guards支持返回 Promise，但若 resolve 前做了大量计算，仍会阻塞 JS 主线程
嵌套路由 + 动态导入未做 code-splitting 边界控制
看似用了 import()，但若父路由组件内直接 import('./pages/User.vue')，Webpack/Vite 仍可能把整个子模块 chunk 打包进主包，失去按需加载意义。
立即学习“前端免费学习笔记（深入）”；
- 确保动态导入路径是静态字符串（如
import(`./pages/${page}.vue`)不合法，会全量打包） - 在 Vite 中检查
dist/assets下是否生成了独立user.*.js文件；在 Webpack 中查看stats.json的chunks字段 - 对高频访问的子路由（如 Dashboard、Profile），可加
webpackPrefetch: true或import(/* webpackPrefetch: true */ './...')提前加载
最常被忽略的是：路由切换时未清理定时器、EventSource 或 IntersectionObserver 实例，导致内存持续增长 —— 这类泄漏不会立刻暴露，但连续切换 20+ 次后页面就会明显变卡。记得在组件卸载或 onBeforeRouteLeave 里显式销毁。
