面试浏览器框架八股文十问十答第四期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）事件是什么？事件模型？

事件：在计算机领域，事件通常指的是在软件系统中发生的用户操作、系统状态变化或者消息传递等。事件可以是用户的鼠标点击、键盘输入，也可以是系统的定时器触发、网络数据到达等。
事件模型：事件模型是描述软件系统中事件处理机制的一种抽象模型。它包括事件的产生、传递、捕获和处理等过程。一般来说，事件模型包括事件源（Event Source）、事件对象（Event Object）、事件监听器（Event Listener）等概念，用于描述事件在系统中的流动和处理方式。

2）如何阻止事件冒泡

在事件冒泡（Event Bubbling）中，事件会从触发它的最深的节点开始，然后逐级向上传播至DOM树的根节点。如果不希望事件冒泡到父元素或祖先元素，可以使用以下方法阻止事件冒泡：

JavaScript ：在事件处理函数中调用 stopPropagation() 方法来停止事件冒泡。例如：

js 复制代码

element.addEventListener('click', function(event) {
    event.stopPropagation();
});

3）对事件委托的理解

事件委托（Event Delegation）是一种常见的前端开发技术，它利用事件冒泡的特性，将事件处理程序绑定到一个父元素上，然后利用事件的传播机制，在父元素上统一处理所有子元素的事件。通过事件委托，可以减少事件处理程序的数量，提高性能，同时也方便动态添加或删除子元素。

实现事件委托的关键是根据事件的 target 属性来判断事件的源头是哪个子元素，然后根据具体的业务逻辑进行处理。

示例（使用原生 JavaScript 实现事件委托）：

vue 复制代码

<ul id="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<script>
    document.getElementById('parent-list').addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
            console.log('Clicked on', event.target.textContent);
        }
    });
</script>

在这个示例中，点击 ul 元素下的任何 li 元素，都会在控制台输出被点击的 li 元素的内容。这是因为事件委托将事件处理程序绑定到了 ul 元素上，而不是每个 li 元素上。

4）事件委托的使用场景

事件委托通常在以下情况下被使用：

动态元素：当页面上的元素是动态生成或者经常发生变化时，使用事件委托可以确保新添加的元素也能被正确地绑定事件处理程序，而无需手动为每个元素添加事件监听器。
性能优化：对于大量相似元素的事件处理，使用事件委托可以减少内存消耗和提高性能。因为事件处理程序只需要绑定到一个父元素上，而不是每个子元素都绑定一次。
简化代码：通过事件委托，可以将事件处理逻辑集中到一个地方，使代码更加简洁和易于维护。
处理复杂的事件逻辑：在需要处理复杂的事件逻辑，比如事件过滤、事件代理等情况下，事件委托能够更加方便地实现。

5）同步和异步的区别

同步（Synchronous）：同步操作是按照代码的顺序依次执行，每个操作都要等待上一个操作执行完成后才能继续执行。在同步操作中，代码的执行顺序是可预测的。
异步（Asynchronous）：异步操作不会阻塞代码的执行，而是在后台进行，当操作完成后会通知主线程执行回调函数或者触发相应的事件。在异步操作中，代码的执行顺序不一定按照书写顺序执行。

异步操作常见于需要等待I/O操作（如文件读取、网络请求）、定时器等情况下，以提高程序的性能和响应速度。

6）对事件循环的理解

事件循环（Event Loop）是一种用于处理异步事件的编程模型。在浏览器端和Node.js环境中，JavaScript采用单线程模型，即所有的任务都是在一个线程中执行。事件循环负责管理任务队列，并在合适的时机执行任务。

事件循环的基本原理是不断地从任务队列中取出任务执行，执行完成后再取下一个任务，直到任务队列为空。事件循环包含以下几个关键组成部分：

调用栈（Call Stack）：用于存储执行上下文（函数调用）的栈结构。当函数调用时，会将其对应的执行上下文推入调用栈中，执行完成后再将其弹出。
任务队列（Task Queue）：用于存储待执行的任务（异步任务）。任务队列中的任务会在调用栈为空时被推入调用栈执行。
事件循环（Event Loop）：负责不断地从任务队列中取出任务，放入调用栈执行。

在事件循环中，每次执行一个任务时，可能会触发其他的异步操作，这些异步操作的回调函数也会被放入任务队列中等待执行。因此，事件循环能够保证所有的任务都是按照正确的顺序执行的，而不会出现竞争条件或者死锁等问题。

7）宏任务和微任务分别有哪些

在 JavaScript 中，事件循环中的任务可以分为两种类型：宏任务（Macrotask）和微任务（Microtask）。

宏任务（Macrotask）：宏任务是由浏览器（或Node.js）的事件触发线程执行的任务。常见的宏任务包括 setTimeout、setInterval、I/O操作、UI渲染等。宏任务的执行顺序是在每一次事件循环中执行一个宏任务，然后渲染更新页面，然后执行微任务。
微任务（Microtask）：微任务是在当前任务执行结束后立即执行的任务，不需要等待渲染更新。常见的微任务包括 Promise 的回调函数、MutationObserver 的回调函数等。微任务在每个宏任务执行完毕后立即执行，而且会在下一个宏任务执行之前完成。

8）什么是执行栈

执行栈（Execution Stack），也称为调用栈（Call Stack），是一种数据结构，用于存储函数调用的信息。在 JavaScript 中，每当调用一个函数，都会创建一个对应的执行上下文（Execution Context），包括函数的参数、局部变量等信息，并将这个执行上下文推入执行栈中。当函数执行完成后，对应的执行上下文会从执行栈中弹出。

执行栈采用后进先出（LIFO）的原则，即最后进入的执行上下文最先执行完成并被弹出，执行栈的底部是全局执行上下文，一般来说，执行栈是单线程执行的，只能执行一个任务，后续的任务需要等待前面的任务执行完成才能执行。

9）Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？

Node.js 中的 Event Loop 和浏览器中的 Event Loop 在实现上有一些区别：

定时器精度：在浏览器中，定时器的最小精度通常为4毫秒，而在 Node.js 中，定时器的精度可以达到1毫秒。
宏任务和微任务的分类：在 Node.js 中，宏任务包括 timers、poll、check 和 close callbacks 四个阶段，而微任务包括 process.nextTick 和 Promise 的回调函数。
process.nextTick 的执行顺序：process.nextTick 的回调函数会在当前执行栈的尾部执行，并且在下一个事件循环之前被调用，优先级高于 Promise 的回调函数。

10）事件触发的过程是怎样的

事件触发的过程通常包括以下几个步骤：

事件注册：通过事件监听器（Event Listener）或者事件处理函数将事件与相应的事件目标（Event Target）绑定。
事件触发：当事件发生时，例如用户点击了一个按钮或者定时器到期，浏览器会创建一个事件对象，并将事件对象放入事件队列中。
事件捕获：如果事件目标设置了事件捕获（Capture）阶段，事件会从文档根节点向下传播到目标元素，依次经过每个祖先元素。
事件冒泡：如果事件目标设置了事件冒泡（Bubbling）阶段，事件会从目标元素开始，向上传播至文档根节点，依次经过每个祖先元素。
事件处理：当事件对象被添加到调用栈时，浏览器会执行相应的事件处理函数来处理事件。如果事件是通过事件委托方式绑定的，事件处理函数可能并不是直接绑定在事件目标上的，而是绑定在事件的祖先元素上。
默认行为：在事件处理函数执行完成后，浏览器会根据事件对象的类型执行默认行为，例如点击链接会跳转到指定页面，按下键盘按键会触发相应的键盘事件等。

这些步骤构成了事件的完整生命周期，通过事件的捕获、目标和冒泡阶段，可以在不同的阶段捕获和处理事件，实现丰富的交互效果。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 400 + Star！

⭐点赞⭐收藏⭐不迷路！⭐