JavaScript 运行机制：Event事件循环机制

青旅半醒 2021-12-09 16:59 258阅读 0赞

JavaScript Event事件循环机制

JS是单线程的，浏览器只分配一个主线程给JS。一次只能执行一个任务，当前任务执行完后在可以执行下一个任务。任务多时，就会形成任务队列排队等待执行。但是非常耗时间的异步操作，比如网络请求，浏览器会用另外的线程去处理，处理的结果通过回调函数处理，回调函数会被放入任务队列，等待主线程执行。

基于event loop ，JS是永不阻塞的，来的任务执行不过来时都会被放到任务队列。

JavaScript中的任务分为同步任务和异步任务，同步任务就是主线程上一个个排队执行的任务；相反的异步任务则不进入主线任务而是被加入到“任务队列”中，任务队列的任务只有在主线任务执行完成之后才去处理任务队列中的任务。

JS并发模型基于事件循环。

JS运行时概念：

1.函数调用形成了一个栈帧。函数A调用时，又调用了函数B,于是就会形成两层栈桢。函数B栈桢在函数A上方，先执行完被弹出，然后执行函数B,函数B执行完后被弹出，栈空。

2.对象被分配在一个堆中，即用以表示一大块非结构化的内存区域。

3.一个 JavaScript 运行时包含了一个待处理的消息队列。每一个消息都关联着一个用以处理这个消息的函数。

在事件循环期间的某个时刻，运行时从最先进入队列的消息开始处理队列中的消息。为此，这个消息会被移出队列，并作为输入参数调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。

函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。

4.执行至完成：每一个消息完整的执行后，其它消息才会被执行。这为程序的分析提供了一些优秀的特性，包括：一个函数执行时，它永远不会被抢占，并且在其他代码运行之前完全运行（且可以修改此函数操作的数据）。

这个模型的一个缺点在于当一个消息需要太长时间才能处理完毕时，Web应用就无法处理用户的交互，例如点击或滚动。

5.添加消息：在浏览器里，当一个事件发生且有一个事件监听器绑定在该事件上时，消息会被随时添加进队列。如果没有事件监听器，事件会丢失。所以点击一个附带点击事件处理函数的元素会添加一个消息，其它事件类似。函数 [`setTimeout`][setTimeout] 接受两个参数：待加入队列的消息和一个延迟（可选，默认为 0）。这个延迟代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其它消息，`setTimeout` 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。

6.多运行时通讯：两个不同的运行时只能通过 [`postMessage`][postMessage] 方法进行通信。如果另一个运行时侦听 `message` 事件，则此方法会向该运行时添加消息。

7.事件循环模型的一个非常有趣的特性是，与许多其他语言不同，JavaScript 永不阻塞。 处理 I/O 通常通过事件和回调来执行，所以当一个应用正等待一个 [`IndexedDB`][IndexedDB] 查询返回或者一个 [`XHR`][XHR]请求返回时，它仍然可以处理其它事情，比如用户输入。遗留的例外是存在的，如 `alert` 或者同步 XHR，但应该尽量避免使用它们

参考文章：[http://www.ruanyifeng.com/blog/2014/10/event-loop.html][http_www.ruanyifeng.com_blog_2014_10_event-loop.html]

[https://www.cnblogs.com/wangfupeng1988/p/6513070.html][https_www.cnblogs.com_wangfupeng1988_p_6513070.html]

转载于:https://www.cnblogs.com/winyh/p/11133346.html

[setTimeout]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
[postMessage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
[IndexedDB]: https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API
[XHR]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[http_www.ruanyifeng.com_blog_2014_10_event-loop.html]: http://www.ruanyifeng.com/blog/2014/10/event-loop.html
[https_www.cnblogs.com_wangfupeng1988_p_6513070.html]: https://www.cnblogs.com/wangfupeng1988/p/6513070.html