iOS微信中window.location.href跳转卡顿本质是WebView在跳转前强制渲染剩余内容并受JS执行阻塞，需清空定时器、监听器及raf回调，优先用location.replace()并预加载资源。
为什么 window.location.href 在 iOS 微信里跳转特别卡
本质不是跳转慢，而是 WebView 在触发跳转前会先尝试渲染当前页剩余内容（比如未完成的 CSS 动画、未 resolve 的 Promise、滚动监听里的重绘逻辑），尤其在低端安卓机或微信内置 X5 内核下更明显。iOS 微信还会对 window.location.href 做额外拦截检测，若页面还在执行 JS 或存在未关闭的 setTimeout，就会延迟导航。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 跳转前强制清空所有待执行任务：
setTimeout(() => { window.location.href = '/next'; }, 0)改为setTimeout(() => { window.location.href = '/next'; }, 4)（避开微任务队列） - 移除可能阻塞的监听器：
window.removeEventListener('scroll', handler)、document.body.style.overflow = 'auto' - 避免在跳转前调用
console.log或alert—— X5 内核下这些会同步阻塞导航线程
用 location.replace() 替代 location.href 能快多少
快在「不压入历史栈」，省去浏览器维护 history.state 的开销，尤其在单页应用中反复跳转时差异明显。但要注意：它会让用户无法点返回回到上一页，所以只适合「确定性跳转」场景，比如登录成功后跳首页、表单提交后跳结果页。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 表单提交后跳转统一用
location.replace('/success')，避免用户狂点返回重复提交 - 不要在 Vue/React 的
beforeRouteLeave或useEffect清理函数里调用replace，可能触发竞态导致白屏 - 如果需要保留返回能力，改用
history.pushState()+location.replace()组合，先推空状态再跳转，兼容性更好
首屏白屏时间长，其实是资源加载卡住了跳转
很多所谓“跳转慢”，实际是目标页 HTML 已加载，但关键 CSS/JS 还没解析完，WebView 一直等渲染树构建完成才显示。特别是用了 Webpack SplitChunks + 异步路由的项目，import('./page.js') 可能被卡在 DNS 查询或 TLS 握手阶段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
加上as="script"和crossorigin（尤其 CDN 资源） - 把跳转目标页的入口 JS 提前放到首页
里预加载： - 禁用 X5 内核的「预加载」干扰：在跳转 URL 后加时间戳参数（如
?t=1712345678），避免其缓存旧资源
微信内嵌页跳转到外部 H5，为什么总要等 2 秒才动
这是微信 SDK 的安全策略：从非白名单域名跳转到外部链接时，会插入一个中间页做风险提示，且该页默认有 2s 最小展示时长（不可绕过）。唯一解法是让目标页域名加入公众号 JS-SDK 安全域名列表，或使用微信官方提供的 openLocation / chooseImage 等接口唤起原生能力替代跳转。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查公众号后台「公众号设置 → 功能设置 → JS 接口安全域名」是否已添加目标页域名
- 若必须跳外域，改用
location.href = 'https://weixin110.qq.com/security/readtemplate?t=weixin_h5_jump&url=' + encodeURIComponent(target)（微信官方跳转中转页，体验略好于裸跳） - 别依赖
navigator.userAgent判断微信环境后再跳——部分安卓微信 UA 会被伪装，应以typeof WeixinJSBridge !== 'undefined'为准
最易被忽略的是：跳转前未清空 requestAnimationFrame 回调。哪怕只留一个 raf，某些安卓 WebView 就会持续等待下一帧，导致跳转延迟高达 16ms 以上。记得在跳转前调用 cancelAnimationFrame(id)。
