unload和 settimeout 谁先被执行呢？

Question

onload和 settimeout 谁先被执行呢？

Answer 1

先贴结论：不确定。

先看下面这段代码，你觉得谁先执行？

<script>
      window.onload = function () {
          console.log("load");
      };
      setTimeout(() => {
          console.log("timeout");
     });
</script>

我经过测试以下几种情况，得出几种结果：

1. 新建一个本地HTML，没有任何外部资源加载和网络请求，就一个div和script。onload始终先执行，timeout后执行。
2. 通过vite启动本地服务，中间经历了vue的编译过程和与本地Node服务的交互，始终是timeout先执行，onload后执行。
3. 已经上线的单页应用，经历多个外部资源的加载和网络接口请求，始终是timeout先执行，onload后执行。

那么很明显，谁先执行取决于onload的触发时机。
onload的定义：MDN onload

当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件

onload会等依赖资源加载完成才会触发，也就是说，正常的线上环境和单页应用，必定会有很多外部资源和网络请求，这就决定了它会慢一点。

Answer 2

根据js的事件循环,onload是事件回调，setTimeout是异步事件，同步先行，异步滞后（微任务先行，宏任务滞后），所以onload会被优先执行，如果有其他同步代码，都会在setTimeout之前执行。