深层dom树拖慢路由切换，因重排需递归计算样式布局，嵌套超12层即引发低端设备明显延迟；须用devtools查深度、documentfragment批量插入、display:contents绕过冗余计算。
深层DOM树直接拖慢路由切换渲染
路由切换时卡顿，八成不是JS逻辑慢，而是新渲染的DOM节点嵌套太深——浏览器每次重排（reflow）都要从根节点递归计算样式和布局，DOM层级每深一层，计算量就指数级增长。SPA里常见的折叠面板、表格行内编辑、动态插入内容区域，一旦嵌套超过12层，低端设备上就会出现肉眼可见的延迟。
实操建议：
- 用Chrome DevTools → Elements面板右键节点 → “Show DOM tree depth”（需手动启用实验功能），快速定位深度超标的区域
- 折叠面板展开时，避免直接innerHTML插入整块带多层嵌套的HTML；改用document.createDocumentFragment()预建轻量结构，再批量append
- 表格行内编辑区不要用
display: contents的容器，让子元素“透出”到table-row层级，绕过冗余布局计算hashchange监听不完整导致首次路由失效
手写HashHistory时，只写window.addEventListener('hashchange', handler)却忘了首次加载——location.hash已有值，但hashchange事件不会自动触发，结果首屏白屏或错显默认页。
常见错误现象：
- 手动刷新页面后显示404或空内容
- 点击浏览器后退按钮才突然跳转到正确页面
- location.hash是#/user/123，但路由函数根本没执行
必须补一手：
- 初始化时立即调用一次路由处理函数，例如router(location.hash.slice(1) || '/')
- 不要用window.onhashchange = handler，它会被后续赋值覆盖，监听器丢失
- 匹配路径时别直接location.hash === '#/user'，要先slice(1)取路径段再比对，否则#/user/和#/user判为不同
pushState混用hash路由引发状态错乱
在纯hash路由项目里调用history.pushState()，等于把两套路由机制拧在一起：hash变化走hashchange，而pushState修改的是URL路径部分，既不触发hashchange，也不更新location.hash——结果就是地址栏变了，页面不动，或者跳转后历史栈断裂。
典型症状：
- 点击链接后URL变成https://site.com/user（无#），整页刷新
- 后退按钮失效，或回退到上一个hash状态而非pushState记录
- location.hash始终为空字符串，但location.pathname在变
解决方式很干脆：
- 全项目统一机制：选hash就只用location.hash = '#/xxx'，彻底删掉所有pushState/replaceState调用
- 如果必须用BrowserHistory，就弃用hash，服务端配置fallback，并确保所有导航都走router.push()或history.pushState()
- Markdown渲染器输出的<a href="/xxx"></a>要全局拦截，用document.addEventListener('click', e => { if (e.target.matches('a[href^="/"]')) { e.preventDefault(); location.hash = '#' + e.target.href.slice(origin.length); } })
组件卸载不干净引发内存泄漏与重绘堆积
每次路由切换，旧组件DOM节点没清干净，或事件监听器没移除，积累几次后就会触发大量强制重排——不是新页面慢，是老页面还在后台偷偷占着主线程。
容易被忽略的点：
- window.addEventListener('scroll', handler)写了，但没在组件卸载时调用window.removeEventListener('scroll', handler)
- 使用IntersectionObserver监听元素进入视口，但没保存observer实例，无法.disconnect()
- 动态插入的<style></style>标签没随组件销毁，导致CSS规则越积越多，匹配耗时飙升
验证方法：
- Chrome DevTools → Memory → “Take heap snapshot”，切换两次路由后对比，筛选Detached DOM tree，看是否有大量残留div、canvas或textNode
- 在路由守卫里加performance.mark('route-start')和performance.mark('route-end')，用performance.measure()确认耗时是否随切换次数线性增长
- 检查document.querySelectorAll('*')返回节点数是否持续上涨
路由切换卡顿真正难缠的地方，往往不在“怎么跳”，而在“旧东西有没有真扔掉”——DOM节点、事件监听器、Observer、动态样式，漏掉任何一个，都会在第三次、第五次切换时突然爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
