为何MediaSource的sourceopen事件监听器在脚本末尾执行？

嘿，我来帮你搞明白这个问题～

你遇到的这个日志顺序问题，核心在于MediaSource的sourceopen事件是异步触发的，而JavaScript的执行是基于单线程事件循环机制的，咱们一步步拆解：

为什么13行日志先输出？ #

假设你的代码流程大概是这样的（对应你提到的行号）：

// 第13行：同步代码，直接执行
console.log("第13行日志");

// 创建MediaSource实例
const mediaSource = new MediaSource();

// 第20行：绑定sourceopen事件监听（同步操作，但回调不会立刻执行）
mediaSource.addEventListener('sourceopen', () => {
  // 第21行：异步事件回调，要等时机成熟才会执行
  console.log("第21行日志");
  // 添加Source Buffer、追加数据的逻辑
});

// 关键步骤：把MediaSource关联到视频元素
video.srcObject = mediaSource;

当你把mediaSource赋值给视频元素的srcObject时，浏览器需要做一系列后台工作：验证MediaSource的兼容性、初始化媒体资源容器、确认可以接收Source Buffer数据——这些操作都是异步的，不会阻塞当前的同步代码执行。

而JavaScript的执行规则是：先把当前同步栈里的所有代码执行完，再去处理任务队列里的异步事件回调。所以第13行的同步日志会先被输出，等当前所有同步代码跑完，浏览器完成MediaSource的初始化工作后，才会把sourceopen的回调函数加入任务队列，最后执行它并输出第21行的日志。

更直观的验证例子 #

如果在你的代码里再加一行同步日志，你会看到明确的执行顺序：

console.log("第13行日志"); // 1. 第一个执行
const mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', () => {
  console.log("第21行日志"); // 3. 最后执行
});
video.srcObject = mediaSource;
console.log("同步代码收尾"); // 2. 第二个执行

这完全符合事件循环的执行逻辑：同步任务优先执行，异步事件回调排队等待同步栈清空后才会运行。

总结 #

sourceopen事件的触发不是即时的，它需要浏览器完成MediaSource与媒体元素的关联初始化工作，而这个过程是异步的，所以它的回调会在当前同步代码全部执行完毕后才会运行——这就是为什么你先看到第13行日志，之后才看到第21行日志的原因啦～

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