浏览器原理之浏览器机制

事件机制

一事件是什么？事件模型？

事件是浏览器或用户自身发出的某种特定交互的信号。这包括但不限于鼠标点击、按键操作、页面加载、滚动等。

事件模型 主要包括三个阶段：

捕获阶段：事件从文档根节点向下传递到目标节点，主要用于拦截事件。
目标阶段：事件到达目标节点。
冒泡阶段：事件从目标节点向上冒泡到文档的根节点。

二如何阻止事件冒泡

在事件处理函数中调用event.stopPropagation()方法可以阻止事件冒泡。这会阻止事件进一步传播到父节点。

三对事件委托的理解

事件委托 是一种利用事件冒泡原理来优化事件处理的技术。它基于这样一个事实：在冒泡阶段，事件会一路向上传播到父节点。因此，可以将事件监听器设置在父节点上，而不是每个子元素上。这样，当子节点上的事件被触发时，它会冒泡到父节点，并被那里的监听器捕获。

四事件委托的使用场景

大量元素的事件处理：例如，列表或表格中的每个项目如果都绑定事件处理器会导致内存占用过高。事件委托可以减少绑定的事件处理器数量。
动态元素的事件处理：对于动态添加到页面的元素，如果它们的事件处理器是通过事件委托添加的，就无需在添加元素时反复绑定事件。

五同步和异步的区别

同步操作：调用某个函数后，必须等待这个函数执行完毕才能执行下一行代码。
异步操作：调用非阻塞函数后，可以继续执行后续代码，而被调函数通常会在未来的某个时间点完成，不会立即返回结果。

六对事件循环的理解

事件循环是一种程序结构，用于等待和发送消息和事件。一个简单的事件循环只需不断检查是否有事件发生，如果有，就取出事件并执行相应的逻辑。

七宏任务和微任务分别有哪些

宏任务：包括整体代码script，setTimeout，setInterval，setImmediate（Node.js 环境）。
微任务：包括Promise，process.nextTick（Node.js 环境），MutationObserver（浏览器中的API）。

八什么是执行栈

执行栈（调用栈），是一个按照先进后出的方式操作的栈结构，用于存储在代码执行期间创建的所有执行上下文。

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

Node.js 和浏览器中的事件循环有核心的架构差异，主要体现在它们处理异步事件的方式以及各自的微任务和宏任务的调度上。下面详细解释这些差异：

Node.js 中的事件循环

Node.js 的事件循环由 libuv 库实现，它是设计来适应异步 I/O 的需求。Node.js 的事件循环分为几个不同的阶段，每个阶段都有自己的任务队列：

timers 阶段：这一阶段执行 setTimeout 和 setInterval 回调。
I/O callbacks 阶段：处理大部分非定时器的回调，如网络通信、文件操作等。
idle, prepare 阶段：仅内部使用。
poll 阶段：检索新的 I/O 事件; 执行与 I/O 相关的回调（除了关闭回调，定时器和 setImmediate() 之外的几乎所有回调）; 节点将在适当的条件下阻塞在这里。
check 阶段：setImmediate() 回调在这里执行。
close callbacks 阶段：例如 socket.on(‘close’, …) 的回调。

浏览器中的事件循环

浏览器的事件循环相对简单，主要是为了处理用户界面事件。它不需要像 Node.js 那样处理大量的异步 I/O 操作。浏览器的事件循环通常包括以下几个部分：

宏任务队列：包括处理脚本（script）、setTimeout、setInterval、I/O、UI rendering等。
微任务队列：处理 Promise、MutationObserver。当执行栈为空时，会在下一个宏任务执行前，先执行所有微任务。

process.nextTick 执行顺序

在 Node.js 中，process.nextTick() 不是事件循环的一部分，而是一个独立于事件循环的机制。process.nextTick() 允许用户在当前操作完成后，任何 I/O 事件（包括定时器和 setImmediate）之前，立即执行回调。如果在事件循环各个阶段中多次调用 process.nextTick()，Node.js 将会在进入下一阶段之前立即执行这些回调。

总结

Node.js 的事件循环是为了支持高效的异步 I/O 操作而设计的，包含多个阶段和专门的队列。
浏览器 的事件循环主要是为了处理用户界面的响应，有一个相对简单的模型，主要区分宏任务和微任务。
process.nextTick() 在 Node.js 中，总是在当前执行栈清空后和任何其他异步事件之前执行，这使其成为触发紧急或必要任务的一种方式。

十事件触发的过程

事件触发基本遵循以下流程：

事件监听：首先需要有某种方式（如addEventListener）去监听事件。
事件触发：当相应的用户操作或浏览器操作（如点击、加载等）发生时，事件被触发。
事件对象生成：浏览器会生成一个事件对象，该对象包含所有与事件相关的信息。
事件传播：事件会按照特定的顺序（捕获->目标->冒泡）进行传播。
事件处理：当事件到达被监听的元素时，对应的处理函数会被调用，事件对象会被传入，以供访问和操作。
事件结束：一旦所有事件监听器执行完毕，或者事件传播被显式停止（如调用stopPropagation()），事件生命周期结束。

垃圾回收机制

一 V8的垃圾回收机制

V8 引擎是 Google 开发的 JavaScript 引擎，它被广泛应用在 Chrome 浏览器和 Node.js 环境中。V8 的垃圾回收机制是其核心功能之一，主要目的是自动管理内存，即自动分配内存及回收不再使用的内存。V8 的垃圾回收机制主要分为两部分，处理新生代（young generation）和老生代（old generation）对象的回收策略。

1. 新生代内存回收

新生代内存主要存储生命周期较短的小对象。V8 为新生代内存分配了相对较小的空间（在64位系统中通常是 32 MB，在32位系统中通常是 16 MB）。垃圾回收在新生代内存中频繁进行，使用的是 Scavenge 算法，具体实现策略是 Cheney 算法，这是一种典型的复制式垃圾回收技术。

Scavenge 算法：在新生代空间中，内存被分为两个等大的部分，一半是对象区（active），另一半是空闲区（inactive）。新分配的对象首先放入对象区，当对象区满时，垃圾回收开始工作。存活的对象会被复制到空闲区，非存活对象则被舍弃。完成复制后，对象区和空闲区的角色互换。

2. 老生代内存回收

老生代内存用于存储生命周期长或体积较大的对象。老生代的内存空间远大于新生代（在64位系统中可达到 1.4 GB）。老生代使用 Mark-Sweep（标记-清除）和 Mark-Compact（标记-压缩）算法。

Mark-Sweep（标记-清除）：这一阶段，垃圾回收器遍历堆中所有对象，并标记存活的对象。之后，进行一次清扫，回收未被标记的对象所占用的内存。此算法的缺点是可能会导致 “内存碎片”。
Mark-Compact（标记-压缩）：为了解决内存碎片问题，V8 会周期性地进行标记-压缩回收。在标记阶段之后，存活的对象会被向内存的一端压缩，从而减少碎片，优化内存分配效率。