点一下链接,页面唰一下就跳走了——这是大家最熟悉的操作。但有时候,明明点了,却卡半秒才动;或者跳转前闪一下白屏;甚至弹个提示框再走……这些‘慢半拍’的感觉,就是链接跳转有延迟了。
延迟从哪儿来?
不是所有跳转都一样快。原生的 <a href="https://example.com"> 点击基本是毫秒级响应,浏览器直接发请求、加载新页。但很多“链接”其实是假的——它背后绑了 JavaScript 事件,比如:
document.getElementById("btn").addEventListener("click", function() {
if (confirm("确定要离开吗?")) {
window.location.href = "https://example.com";
}
});这段代码里,点击后先弹确认框,你点“确定”,才执行跳转。这个等待你点确认的时间,就是人为引入的延迟。
还有这些容易被忽略的‘拖后腿’操作
• 加了 target="_blank" 且没配 rel="noopener":老版本 Chrome 会等新标签页初始化完才释放原页面资源,偶尔卡顿;
• 跳转前调用 fetch() 上报用户行为(比如统计点击):如果网络差或接口慢,跳转就得干等着;
• 使用 window.location.replace() 替换当前页时,若前一页 JS 还在跑大量计算,也可能短暂卡住界面。
怎么判断是不是真延迟?
打开浏览器开发者工具(F12),切到 Network 标签,点链接。看两个时间点:
• “Start Time” 到 “Request Start”:说明 JS 执行花了时间;
• “Request Start” 到 “Response Start”:是网络请求耗时;
如果第一段明显长于 50ms,大概率是脚本逻辑拖了节奏。
日常用网页,遇到跳转慢,可以试试右键复制链接,新开标签粘贴访问——如果飞快打开,那问题八成出在原页面的 JS 上,不是网络也不是你电脑的事。