javascript - 如果 WebSocket 事件监听器在事件触发后注册，为什么它们会起作用？

Question

根据 MDN docs ，WebSocket 事件监听器在连接创建后注册，并且过程是顺序的:

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    console.log('ws connected');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

如果事件在注册监听器之前就开始触发，这将如何工作？比如，连接在 open 监听器注册之前打开，或者消息在 message 监听器注册之前传入。

根据 MDN doc on Concurrency model and Event Loop，我预计事件会丢失，因为事件监听器尚未注册:

In web browsers, messages are added anytime an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message--likewise with any other event.

我试图在两者之间添加一些昂贵的操作，但似乎 open 和 message 事件监听器仅在所有事件监听器都正确注册后才会触发。 WebSocket 特性本质上是异步的吗？

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// expensive ops
for (var i = 5000; i >= 0; i--) {
  console.log('1');
}

// Connection opened
socket.addEventListener('open', function (event) {
    console.log('ws connected');
});

// expensive ops
for (var i = 5000; i >= 0; i--) {
  console.log('2');
}

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

// prints "1"s, then "2"s, then "ws connected", then "Message from server"

Answer 1

您不能在创建对象之前添加事件，因此必须在之后添加。这一切都有效，因为 JavaScript 是单线程的，事件在同一个线程中处理，因此在代码运行时不会发生任何事情。您可以将执行延迟一年，只有在您的代码完成后，运行时才会开始处理在它运行时到达的任何事件。在您的代码完成之前，套接字甚至可能不会开始连接。

因此可以保证没有事件会出错。

Mozilla 开发者网络对 event loop 有很好的解释，“Run to Completion”讲的是JS运行时的本质。