JS内部事件机制之单线程原理

JS内部事件机制之单线程原理

在JavaScript的世界里，有一个核心概念始终贯穿其中，那就是单线程事件机制。今天，让我们一起这一机制背后的原理，深入了解其运作机制。

一、任务队列简介

当主线程正在执行代码时，会产生一个函数调用栈。这个栈中存放的是即将执行或正在执行的函数。其中涉及的任务分为两大类别：宏任务（如script整体代码、setTimeout、setInterval等）和微任务（如process.nextTick、Promise等）。值得注意的是，HTML5新增了MutationObserver这一微任务，它在队列中只能有一个。

二、任务分类及执行流程

任务分为同步任务和异步任务。同步任务严格按照语句的先后顺序执行，前面的任务未执行完，后面的任务不会启动。而异步任务则会在特定事件发生时，加入到相应的任务队列中，等待主线程空闲时再执行。

关于单线程的概念，我们可以这样理解：主线程从script整体代码开始第一次循环，然后全局上下文进入函数调用栈。当调用栈清空（只剩下全局任务）后，执行所有的微任务。当所有可执行的微任务执行完毕后，主线程开始寻找宏任务队列并执行完毕，然后再执行所有的微任务。如此循环往复。

三、注意事项

1. setTimeout的最小间隔不能低于4毫秒，低于此值会自动增加。

2. DOM的渲染并不是连续的，每16毫秒执行一次，这是因为显示器的刷新频率是60Hz，每16ms刷新一次。

3. process.nextTick任务会在微任务中单独维护一个队列，并且这个队列中的任务会在其他微任务之前执行。

经典与进阶：JavaScript中的点击事件与观察者模式

在网页开发中，我们常常需要监听元素的点击事件和观察元素属性的变化。以下是一个生动且详细的示例，通过它我们可以深入理解这两个功能是如何实现的。

假设我们有两个嵌套的div元素，外部的称为“outer”，内部的称为“inner”。我们通过querySelector方法获取这两个元素。然后，我们创建一个MutationObserver对象来监听outer元素的属性变化。当属性发生变化时，控制台会输出“mutate”。

接下来，我们定义一个onClick函数，它包含了一个点击事件监听器。当元素被点击时，会依次输出“click”，“promise”和“timeout”。我们还会改变outer元素的一个属性，为其添加一个随机的data-random属性。

然后，我们将这个onClick函数作为事件监听器添加到inner和outer两个元素上。这意味着当这两个元素被点击时，都会执行onClick函数。如果我们通过js代码直接触发inner元素的点击事件，情况就会有所不同。

在js执行的过程中，由于inner的onClick函数执行尚未完成，主线程调用栈仍然忙碌，所以jobs队列中的任务（如mutate和promise）不会立即执行。尽管我们触发了inner的点击事件，但由于调用栈未清空，这些任务只能在outer的onClick函数执行完成后才能执行。也就是说，先输出inner的点击信息，然后是outer的点击信息和其他任务（如mutate和promise）。在任务完成后，"timeout"会被输出。

这个示例不仅展示了如何监听点击事件和属性变化，还展示了JavaScript的事件循环和调用栈是如何协同工作的。通过深入理解这些概念，我们可以更高效地编写出符合预期的代码。这个示例也展示了MutationObserver的强大功能，它是现代前端开发中的一个重要工具。希望这个示例能帮助你更好地理解这些概念和技术。理解JS中的MutationObserver机制：单线程背后的故事

在JavaScript的世界里，MutationObserver是一个强大的工具，用于监控DOM树中发生的更改。关于它的一个重要特性，可能有些开发者在初次接触时不太理解：为什么当jobs队列中已有一个MutationObserver任务时，无法创建第二个MutationObserver？今天，我们就来深入这个话题。

想象一下，如果我们的浏览器是单线程的（事实上，大部分现代浏览器确实如此），那么所有的任务，包括MutationObserver的任务，都需要按照特定的顺序执行。这就意味着，如果jobs队列中已有一个待处理的MutationObserver任务，那么在该任务完成之前，任何新的MutationObserver任务都无法开始执行。这是为了确保任务的顺序性和完整性，防止因并发导致的混乱和错误。

那么，当第二次尝试创建MutationObserver时，由于前一个任务尚未执行完毕，因此新的创建请求会被忽略。这是JavaScript为了确保其单线程模型稳定运行的一种机制。虽然这可能会在某些情况下限制并发处理的能力，但对于确保程序的稳定性和可预测性来说，这是一个重要的保障。

以上就是我们给大家介绍的JavaScript内部事件机制中的单线程原理。希望大家能更深入地理解MutationObserver的工作原理和背后的原因。如果大家有任何疑问或需要进一步的解释，请随时留言。长沙网络推广团队会及时回复大家的疑问，并感谢大家一直以来对狼蚁SEO网站的支持。我们一直致力于提供高质量的内容和服务，帮助大家更好地理解和使用JavaScript。我们也欢迎大家提出宝贵的建议和反馈，帮助我们不断进步。让我们共同学习，共同成长。在这里，您不仅可以看到技术，还能感受到我们对您的热情服务。让我们一同前行，JavaScript的无限可能！