技术笔记 on 日日是好日

数组拍平

Thu, 19 Mar 2026 16:15:12 +0800

背景

为什么要写这篇文章？

核心内容

1️⃣ 概念说明

2️⃣ 使用方式

3️⃣ 实际案例

// 示例代码
console.log('Hello Vite');

SSE

Fri, 13 Mar 2026 16:39:13 +0800

SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，浏览器通过 EventSource 建立长连接，服务器可以持续向客户端发送 text/event-stream 数据流。它是单向通信，适合实时推送场景，例如 AI 流式输出、通知系统、日志流等。

特点：

基于 HTTP

单向通信（Server → Client）

浏览器通过 EventSource API 接收服务器不断推送的数据

连接建立后服务器可以持续发送数据流

优点:

简单易用：SSE提供了一种在服务器和客户端之间建立单向连接的直接方法。客户端订阅了SSE端点，然后服务器可以通过此连接将数据推送到客户端，而不需要客户端不断发送请求
减少网络开销：与持续轮询技术（即每隔几秒钟让每个客户端从服务器请求数据）相比，SSE显著减少了网络开销。
标准化协议：SSE基于HTTP协议，使其易于部署并与现有的web基础设施兼容。

为什么SSE适合AI流式输出

因为服务器可以持续push数据

SSE 为什么比 WebSocket 简单

因为SSE基于 HTTP，不需要协议升级

Promise

Fri, 13 Mar 2026 14:47:52 +0800

Promise 定义

Promise 是 JS 提供的异步解决方案。
内部存在三种状态：pending fulfilled rejected。状态一旦改变不可逆。
Promise 内部维护两个回调队列：onFulfilledCallbacks和onRejectedCallbacks。then 会把回调存入队列。当 resolve 或 reject 时，会执行对应回调。
then 返回新的 Promise，因此可以实现链式调用。

Promise 状态

pending 等待 fulfilled 成功 rejected 失败

状态变化 pending → fulfilled pending → rejected

状态一旦改变就不能再变。【原因:避免竞态条件】

Promise 特点

Promise 最大的特点是 then会返回新的Promise。也就是Promise可以进行链式调用，因此可以解决回调地狱

Promise 本质

Promise的本质是状态 + 回调队列

浏览器事件循环

Thu, 12 Mar 2026 21:13:47 +0800

谨记

JavaScript 在浏览器中是单线程执行的。

但需要注意：

JavaScript 本身是单线程执行的，但浏览器运行环境是多线程的。异步任务由浏览器的其他线程处理，完成后通过 事件循环（Event Loop） 回调到 JS 主线程执行。如果需要真正的并行计算，可以通过 Web Worker 创建新的 JS 线程。

浏览器事件循环是什么

JavaScript 在浏览器中是 单线程执行的，但浏览器需要处理很多异步任务，例如：网络请求、定时器、用户交互事件、DOM 事件。

为了在不阻塞主线程的情况下处理这些异步任务，浏览器引入了 事件循环（Event Loop）机制。

🌟 核心流程：

同步代码进入调用栈 Call Stack 执行
异步任务交给浏览器的 Web APIs 处理（如定时器、网络请求）
异步任务完成后，其回调函数进入 任务队列 Task Queue
Event Loop 持续检测调用栈是否为空如果为空，则把任务队列中的任务放入调用栈执行

为什么需要事件循环

由于 JavaScript 是单线程的：同一时间只能执行一段代码，如果没有事件循环，setTimeout就需要等待对应的time才能继续执行，而这会导致：页面卡死。

因此浏览器设计成 = 单线程 JS + 事件循环调度 + 浏览器异步线程。从而实现：非阻塞异步

浏览器运行 JS 的基本结构

同步代码进入调用栈Call Stack 执行
异步任务交给浏览器的 Web APIs（例如定时器、网络请求）
异步任务完成后，其回调函数会进入任务队列Task Queue
Event Loop 会不断检查调用栈是否为空，如果为空，就把任务队列中的任务放入调用栈执行。

任务队列：宏任务与微任务

任务队列中的任务分为两类：Macro Task（宏任务）和 Micro Task（微任务）

宏任务（Macro Task）

定义： 宏任务是由浏览器调度的任务，每次事件循环会执行 一个宏任务。

常见宏任务：

整个 JS 文件（script）
setTimeout
setInterval
DOM 事件
postMessage
MessageChannel

微任务（Micro Task）

微任务会在 当前宏任务执行结束后立即执行。

常见微任务：

Promise的回调[.then、.catch、.finally]
queueMicrotask
MutationObserver
await 后面的代码会进入微任务队列

浏览器事件循环的执行顺序是

🔥 执行一个宏任务 → 执行所有微任务 → 浏览器进行一次渲染 → 再执行下一个宏任务

也就是说：微任务的优先级高于宏任务

浏览器渲染时机

浏览器通常会在宏任务执行完并清空微任务队列后才进行页面渲染，所以如果微任务不断产生，可能会导致页面渲染被延迟。

常见误区

误区一：同步任务是宏任务，异步任务是微任务 ❌

浏览器调度任务分为宏任务和微任务，从浏览器层面而言，没有同步任务和异步任务的说法。在浏览器层面，同步和异步只是执行方式。同步代码只是 当前宏任务中的执行内容。

误区二：Promise 本身是微任务 ❌ / Promise.then是微任务 ❌

Promise 本身不是微任务。Promise executor 是同步执行，Promise的then、catch、finally的回调才是微任务。

误区三：async是微任务 ❌ / await 是微任务 ❌

这个误区其实和 “Promise 是微任务” 的误区本质类似。 async 本身并不是微任务。async 只是 JavaScript 的一个语法糖，它会让函数返回一个 Promise。 await 也是语法糖，await = 暂停当前 async 函数 + 注册一个 Promise.then。await的后面的代码才是微任务。

误区四：浏览器执行 JS 时，并不是每一行代码都是一个任务。 ❌

整个JS代码块是一个宏任务。

实战

async function async1() {
 console.log(1);
 await async2();
 console.log(2);
}

async function async2() {
 console.log(3);
 await Promise.resolve();
 console.log(4);
}

async1();

console.log(5);

最后输出: 1 3 5 4 2

拆解:

进入 script（一个宏任务）执行 async1()
进入 async1()
执行 console.log(1); 此时输出 1。
执行 await async2();
进入 async2()
执行 console.log(3); 此时输出 3。
执行 await Promise.resolve(); 由于 await = 暂停当前 async 函数 + 注册一个 Promise.then。也就是说 console.log(4); 会被注册成一个微任务。
此时 async2() 被暂停，后续代码 console.log(4); 已经进入微任务队列。
async2() 返回一个 pending 的 Promise。
回到 async1() 中的 await async2(); 由于 async2() 返回的 Promise 还没有 resolve，所以 async1() 也会被暂停。
async1() 后面的 console.log(2); 暂时不会执行，也不会进入微任务队列。
async1() 执行结束（暂停状态），回到 script。
执行 console.log(5); 此时输出 5。
当前 script（宏任务）执行完毕。
Event Loop 开始执行微任务队列。
执行微任务 console.log(4); 此时输出 4。
async2() 执行完成，其返回的 Promise resolve。
async1() 中的 await async2(); 得到结果，于是继续执行 async1() 剩余代码。
console.log(2); 被加入微任务队列。
执行该微任务 console.log(2); 此时输出 2。

JS模块化

Sat, 28 Feb 2026 14:26:13 +0800

模块化

模块化（Module）指把代码拆分成独立、可复用、可维护的单元。每个模块能够：1️⃣ 独立作用域 2️⃣ 明确依赖 3️⃣ 对外暴露接口；目的：防止变量污染、提高代码复用、提升可维护性、支持大型工程

JavaScript 模块化发展历史

阶段1：IIFE

IIFE = 立即执行函数

阶段2：CommonJS

CommonJS 是 Node.js 的模块规范。

特点：

同步加载（Node 可以同步读文件。浏览器不行。）
运行时加载
适合服务器环境
值拷贝（CommonJS 导出是值拷贝）

CommonJS 加载过程： const module = require(’./math’);

阶段3：AMD / CMD

AMD`异步模块定义`(Asynchronous Module Definition)

使用 define 定义模块

使用 require 加载模块

CMD `公共模块定义`(Common Module Definition)

在 CMD 规范中，一个模块就是一个文件。 使用 define 定义模块 使用 SeaJs 的 use 加载模块

UMD`通用模块定义`(Universal Module Definition)

UMD 是 AMD 和 CommonJS 的一个糅合。 AMD 是浏览器优先，异步加载； CommonJS 是服务器优先，同步加载。既然要通用，怎么办呢？那就先判断是否支持 node 的模块，支持就使用 node；再判断是否支持 AMD，支持则使用 AMD 的方式加载。这就是所谓的 UMD。

AMD 和 CMD 的区别

对于依赖的模块，AMD 是提前执行，CMD 是延迟就近执行。 AMD是立即执行，CMD是按需执行。

AMD 推崇依赖前置，CMD 推崇依赖就近。

AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。

阶段4：ES Module

ES6 模块的设计思想是尽量的 静态化，即在编译阶段就确定模块的依赖关系，以及输入和输出的变量。

｜ CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

在 ES6 中，我们使用 export 关键字来导出模块，使用 import 关键字来引入模块。

🔥 优点：Tree Shaking 和编译优化

ESM导出的是值引用。

💡ES6 模块与 CommonJS 模块的差异

｜区别

区别	CommonJS	ESM
加载方式	运行时加载	编译时输出接口
加载方式	同步加载	异步加载，有一个独立的模块依赖的解析阶段。
模块输出	值的拷贝	值的引用
语法	require()	import
适用环境	Node	浏览器+Node
Tree Shaking	不能，因为require是动态执行，编译期无法确定依赖	可以，因为依赖关系可以静态分析

🌼 引申

require和import的区别：require()是运行时加载，import是编译时输出接口。
treeShaking是在哪个阶段做的？
Node 为什么最早用 CommonJS？

因为node读取本地文件是同步的，而CJS同步加载没有问题

module.exports 和 exports 的区别？

闭包