页面跳转耗时高通常源于路由方案和资源加载方式，而非HTML5本身；全量刷新与SPA跳转性能差异明显，React/Vue Router卡顿多因组件嵌套深、懒加载缺失、路由守卫阻塞或服务端fallback未配置。
页面跳转耗时高，通常不是 HTML5 本身的问题
HTML5 本身不处理“跳转耗时”，真正影响体验的是你用的路由方案和资源加载方式。纯 location.href 或 跳转，本质是浏览器全量刷新，和 HTML5 无关；而用 history.pushState() 的单页应用（SPA）跳转快，但容易因 JS 打包过大、组件懒加载没配好、服务端渲染缺失等原因变慢。
React Router / Vue Router 跳转卡顿的常见原因
这类前端路由库依赖 JavaScript 运行时解析路径、匹配组件、触发渲染，卡顿往往来自以下环节：
-
Route组件嵌套过深或使用了未 memo 化的高开销渲染逻辑 - 目标页面组件未做
React.lazy()+Suspense，导致首屏加载全部 JS 包 - 路由守卫（如
beforeEach或useEffect中的鉴权请求）阻塞了导航，且没加 loading 状态或超时控制 - 开发环境下开启了
React.StrictMode或 Vue 的性能检测插件，放大了可感知延迟
history.pushState() 后页面白屏或响应慢？检查这些点
手动调用 history.pushState() 不会自动更新视图，必须配合状态管理或重新渲染逻辑。常见疏漏：
- 没监听
popstate事件，导致浏览器前进/后退按钮失效 - 在
pushState后直接修改 DOM，但没触发框架的 re-render 周期（例如 React 中没改 state） - 新 URL 对应的资源（JS/CSS）未预加载，
fetch()或import()触发时机太晚 - 服务端未配置 fallback（如 Nginx 返回 404 而非
index.html），导致刷新页面失败，用户误以为“卡住”
轻量级优化建议：不用框架也能提速
如果你只是想让锚点跳转或简单页面切换更顺滑，不需要引入完整路由库：
立即学习“前端免费学习笔记（深入）”；
// 预加载关键页面资源（兼容性较好）
const link = document.createElement('link');
link.rel = 'prefetch';
link.href = '/next-page.js';
document.head.appendChild(link);
// 使用 IntersectionObserver 提前加载可视区外的路由模块（需搭配动态 import）
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
import('./pages/NextPage.js');
}
});
});
}
注意：prefetch 是提示浏览器“可能需要”，不保证执行；preload 则强制加载，但只适用于已知即将使用的资源，滥用会挤占主页面带宽。
真实项目里，跳转快不快，八成取决于你有没有把路由拆分、资源预加载、服务端 fallback 这三件事做对。细节不到位，再新的 API 也救不了体验。
