location变更后JavaScript执行机制及终止时机的技术疑问

这个问题涉及浏览器的JS执行机制和导航流程，我来一步步拆解清楚：

一、两种场景下都打印'test'的原因 #

JavaScript是单线程执行的，浏览器的任务处理有明确的优先级顺序，这是核心原因：

• 同步代码场景：当你执行location.href = 'https://google.com'时，只是给浏览器发了一个「要导航到新页面」的指令，但这个指令不会立刻中断当前正在运行的同步代码。浏览器会等当前同步执行栈里的代码全部跑完（也就是先执行完console.log('test')），才会去处理导航请求、切换页面上下文。
• 异步代码场景：setTimeout(() => console.log('test'))是一个0延迟的宏任务，它会被加入到浏览器的宏任务队列里。同步代码执行完后，浏览器会先清空所有待处理的微任务，然后才会检查是否有导航请求。如果新页面的加载没有快到立刻销毁当前上下文，这个宏任务就会被执行。简单说：导航的准备需要时间，在这个间隙里，已排队的宏任务就有机会跑起来。

二、如何判定JS上下文终止前的最后执行位置 #

要准确把握当前页面JS在卸载前的执行边界，可以从这几个角度入手：

• 优先用同步代码或微任务：同步代码会在导航触发前完整执行；微任务（比如Promise.then、MutationObserver回调）的优先级高于宏任务，也高于浏览器的导航处理，所以只要是在导航请求发起前加入微任务队列的代码，一定会在卸载前执行。
• 利用页面卸载事件：
  • beforeunload事件：这是页面即将卸载时最早触发的事件之一，你可以在这里执行收尾逻辑（比如记录关键日志），它的回调会在导航真正开始前执行。
  • pagehide事件：这个事件在页面被隐藏时触发，比beforeunload更靠后，是页面上下文能执行代码的最后时机之一。
• 避免依赖宏任务的执行：像setTimeout、setInterval这类宏任务的执行时机不确定，完全取决于新页面的加载速度，所以不要把必须执行的卸载逻辑放在这类回调里。

三、这个过程是确定的还是随机的？ #

这个过程不是完全随机的，有明确的规则，但会受新站点加载速度影响：

• 同步代码和微任务的执行是完全确定的：只要代码已经进入执行栈或者微任务队列，浏览器一定会在处理导航前把它们执行完，这是浏览器事件循环的强制规则。
• 宏任务的执行是不确定的：如果新页面加载速度极快，浏览器可能在宏任务轮到执行前就销毁了当前页面上下文；如果加载较慢，宏任务就会有机会执行。所以宏任务的执行结果取决于新站点的加载速度，无法100%保证。

内容的提问来源于stack exchange，提问作者setec