事件循环机制（2）-- 《深入理解JavaScript执行机制：堆、栈、队列与Web Workers》

上进大番茄
88 阅读3分钟

堆/栈

堆(heap)

保存的地址

对象被分配在堆中，堆是一个用来表示一大块（通常是非结构化的）内存区域的计算机术语。

栈(stack)

后进先出 (lifo) last in first out （坐电梯🌰第一个进电梯的人最后一个出来，最后一个进电梯的人第一个出来！）

函数调用形成了一个由若干帧组成的栈。

function foo(b) {
  let a = 10;
  return a + b + 11;
}

function bar(x) {
  let y = 3;
  return foo(x * y);
}

console.log(bar(7)); // 返回 42

队列(queue)

先进先出 (fifo) first in first out

当 Event Table 中的事件被触发，事件对应的 回调函数 就会被 push 进这个 Event Queue，然后等待被执行

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

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

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

Web Workers 与 Web APIs

Web APIs 深入解析

Web APIs是浏览器提供的一系列功能接口，它们允许JavaScript与浏览器环境进行交互。这些API大多数都是异步的，这意味着它们不会阻塞主线程的执行。

主要特点：

  1. 异步执行：Web API调用不会阻塞主线程，而是将回调函数放入任务队列
  2. 事件驱动：大多数Web API都是基于事件模型的
  3. 跨线程通信：Web API通常运行在浏览器的主线程之外
  4. 安全沙箱：Web API运行在受限制的环境中，确保浏览器安全

常见Web API分类：

  1. DOM API：

    • 文档对象模型操作
    • 事件监听（addEventListener）
    • 动画（requestAnimationFrame）

  2. 网络API：

    • XMLHttpRequest
    • Fetch API
    • WebSocket

  3. 存储API：

    • localStorage
    • IndexedDB
    • Cache API

  4. 多媒体API：

    • AudioContext
    • WebRTC
    • MediaStream

  5. 图形API：

    • Canvas
    • WebGL
    • SVG

执行流程示例：

console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 1000);

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log('Data', data));

console.log('End');

执行顺序：

  1. Start（同步代码）
  2. End（同步代码）
  3. Timeout（定时器回调）
  4. Data（fetch响应）

Web Workers 深入解析

Web Workers为JavaScript提供了多线程能力，允许在后台线程中执行复杂计算，而不会阻塞主线程。

主要特点：

  1. 独立线程：每个Worker运行在自己的线程中
  2. 消息传递：通过postMessage和onmessage进行通信
  3. 无DOM访问：Worker不能直接操作DOM
  4. 独立环境：拥有自己的全局对象（self）和事件循环

使用场景：

  1. 复杂计算（如图像处理）
  2. 大数据处理
  3. 实时数据流处理
  4. 后台任务执行

基本用法示例：

// main.js
const worker = new Worker('worker.js');

worker.postMessage({ data: 'Hello' });

worker.onmessage = function(event) {
    console.log('Received:', event.data);
};

// worker.js
self.onmessage = function(event) {
    const result = event.data.data + ' World';
    self.postMessage(result);
};

高级特性：

  1. SharedWorker：多个页面共享的Worker
  2. ServiceWorker：用于离线应用和网络代理
  3. Worker线程池：管理多个Worker实例
  4. Transferable Objects：高效传输大数据

主线程和Web Worker的对比

特性主线程Web Worker
DOM访问支持不支持
内存限制较大较小
通信成本无需要消息传递
适合场景UI更新计算密集型任务
avatar
文章
阅读
粉丝