Дмитрий Переверзаhttps://teletype.in/atom/devreverza2026-07-26T13:02:16.827Zdevreverza:qeLghBRr8dU2022-06-05T09:44:18.365Z2022-06-05T09:44:18.365Z

На днях у меня возник вопрос, а в какой момент EventLoop’а вызываются обработчики MessageChannel и я был удивлён. Первая мысль по этому поводу это, что обработчики складываются в микро таски, вперемешку с промисами, но не все так просто.

<p id="zr2l">На днях у меня возник вопрос, а в какой момент EventLoop’а вызываются обработчики MessageChannel и я был удивлён. Первая мысль по этому поводу это, что обработчики складываются в микро таски, вперемешку с промисами, но не все так просто. </p> <p id="DUFm">Напомню как выглядит MessageChannel (<a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel</a>)</p> <p id="fzge"><code>const channel = new MessageChannel();</code></p> <p id="Mx3d"><code>channel.port2.postMessage(undefined)</code></p> <p id="Pv0A"><code>channel.port1.onmessage = () =&gt; {</code></p> <p id="pElh"><code>console.log(‘massageChannel’);</code></p> <p id="PT5A"><code>};</code></p> <p id="TKyC">Самый частый кейс его использования это организация связи между нашим приложением и iframe, shared workers, web workers и т.д.</p> <p id="lWwp">Тут пример в какой момент они отрабатывают в рамках EventLoop<br /><a href="https://codepen.io/dmitriypereverza/pen/QWQaMrB" target="_blank">https://codepen.io/dmitriypereverza/pen/QWQaMrB</a></p> <p id="wnf7">Как видим вызовы MessageChannel вызываются после всех проминов, но до setTimeout. То есть они лежат и не в очереди тасков и не в очереди микро тасков. А где же тогда?</p> <p id="pF1I">А для того чтобы объяснить это обратимся к спецификации и сразу станет все понятно<br /><a href="https://html.spec.whatwg.org/multipage/web-messaging.html#:~:text=Each%20event%20loop%20has%20a%20task%20source%20called%20the%20unshipped%20port%20message%20queue" target="_blank">https://html.spec.whatwg.org/multipage/web-messaging.html#: ~: text=Each%20event%20loop%20has%20a%20task%20source%20called%20the%20unshipped%20port%20message%20queue</a>.</p> <p id="9vO0">Each event loop has a task source called the unshipped port message queue.</p> <p id="4QEA">Теперь вы знаете что есть ещё одна очередь внутри EventLoop. Можно использовать этот козырь на собесах)</p>