YianNotes

一、 宏观层：执行与异常模型核心逻辑： await 是在 try 领土上挖的“地洞”，它暂时交出执行权，但并未脱离监控。 异步迭代 (for await...of)： 非阻塞：它是“按需抽水”。当数据没到时，执行权归还浏览器，页面不会卡死。 原理：底层不断调用 reader.read() 并等待那个被“调度”的 Promise。 异常捕获 (try...catch)： 地雷效应：无论流在哪个阶段报错（网络中断、手动 error），所有的 read() Promise 都会被 Reject，从而触发 catch。 二、 微观层：字节与内存 (Chunk)核心逻辑： 流不是数据的副本，而是数据的“接力”。 Uint8Array：流传输的基础单元。它是 0-255 的字节序列。 瞬时性：每次 read() 拿到的 value 是一块内存切片。处理完后，它就会被回收或传给下一级。 边界截断：字节流不识语义（可能把一个汉字或单词切断）。需要配合 TextDecoderStream 或手动处理 remainder 逻辑。 三、 调度层：双队列撮合模型 (核心精髓)这是你理解...

1. 核心定义 本质：一种消息通信范式，通过引入一个“中间人”角色，使发布者 (Publisher) 和 订阅者 (Subscriber) 彻底解耦。 口诀：发布者只管发，订阅者只管听，中间人管名单和分发。 2. 三大核心角色 发布者 (a方法)：触发事件的角色。它不需要知道谁订阅了它，只需向中间人“呼喊”一声。 订阅者 (b, c方法)：接收消息的角色。它向中间人注册一个回调函数，静候通知。 中间人 (Broker/Event Bus)：最关键的角色。 职责一：提供 subscribe 接口，维护一个**“主题 -> 回调数组”**的档案柜。 职责二：提供 publish 接口，当事件发生时，翻阅档案，依次执行对应的回调列表。 3. 为什么需要它？（模式的目的） 空间解耦：A 和 B 互不认识，修改 A 不影响 B。 时间解耦：在高级实现中，发布者发完就走，订阅者可以异步处理（不用死等）。 逻辑清晰：把“业务逻辑”和“善后逻辑”拆分。比如：订票逻辑（主） vs 发短信、扣积分（副）。 4. 实现的技术细节（底层原理） 存储机制：通常在中间人内部维护一个 M...

1️⃣ 定义 穷尽性类型保护是指在处理联合类型、枚举或字面量类型时，确保每一个可能值都被处理到，防止遗漏分支，提升类型安全。 核心手段：利用 never 类型 + 编译器检查。 2️⃣ 为什么用 防止逻辑遗漏：确保联合类型或枚举的每个成员都被处理 增强类型安全：新增联合类型或枚举成员时，TS 会报错 提高可维护性：代码分支清晰，后续扩展安全 3️⃣ 基本写法123456789101112131415type Shape = 'circle' | 'square' | 'triangle'function handleShape(s: Shape) { switch(s) { case 'circle': // 处理 circle break case 'square': // 处理 square break default: const _exhaustiveCheck: never = ...

title: Web Worker 通信深度解析（底层原理版）date: 2026-01-30category: “JavaScript / 浏览器内核” Web Worker 核心笔记1. Web Worker 角色定位 多线程模型：JavaScript 在后台开启独立线程，不占用主线程（UI 线程）。 物理隔离：拥有独立的 Event Loop、独立内存、独立的全局对象（self/WorkerGlobalScope）。 局限性：无法访问 DOM、localStorage 或 window 对象。 2. postMessage 通信底层流程（核心）跨线程通信并非“瞬间移动”，而是遵循 “打包 -> 投递 -> 排队 -> 执行” 的逻辑： 打包（发送方）：执行 postMessage(data)，浏览器利用“结构化克隆算法”对数据进行深拷贝。 入队（接收方）：浏览器内核将“消息数据”与“处理逻辑”封装成一个 Message Task（宏任务），直接塞进接收方线程的 宏任务队列。 触发执行（接收方）：当接收方的事件循环（Even...

MIME 类型 笔记MIME（Multipurpose Internet Mail Extensions）类型是用来标识文件的格式或数据类型的一种标准。最初设计用于电子邮件，但后来被广泛应用于 HTTP、FTP 等协议中，以帮助客户端（如浏览器）和服务器理解数据的类型及如何处理它们。 MIME 类型的结构MIME 类型的格式由两部分组成： 1<主类型>/<子类型> 主类型：表示数据的主要类别，通常是 text、image、audio、application 等。 子类型：进一步描述数据的具体格式，例如 text/plain、image/jpeg、application/json 等。 常见的 MIME 类型1. 文本类型（text/*）用于表示文本数据，通常可以由普通文本编辑器读取。 text/plain：普通文本，通常用于 .txt 文件。 text/html：HTML 文件，用于网页内容。 text/css：CSS 样式表，用于网页样式。 text/javascript 或 application/javascript：JavaScript ...

解析流程1. 解析 DOM（初始宏任务） 这是页面加载的第一个宏任务 2. 遇到同步脚本1234567解析DOM → 遇到同步<script> → 暂停解析 → 执行同步代码 ↓同步代码产生微任务/宏任务 → 加入相应队列 ↓同步代码执行完成 → 立即清空微任务队列 ↓恢复DOM解析 3. 遇到 defer/module 脚本123456789解析DOM → 遇到defer/module<script> → 继续解析，异步下载 ↓DOM解析完成 → 等待所有defer/module下载完成 ↓按文档顺序执行defer/module脚本 ↓每个脚本执行后清空微任务队列 ↓所有脚本执行完成 → 触发DOMContentLoaded 4. 遇到 async 脚本1234567解析DOM → 遇到async<script> → 继续解析，异步下载 ↓脚本下载完成（无论DOM是否解析完） ↓立即作为新宏任务执行 ↓执行后清空微任务队列 5. DOM 解析完成后123456789...

这个是浏览器渲染工作流程的第二篇文档，请预先查看 浏览器 渲染工作流程一文，当前简单描述 浏览器渲染流程总结笔记 1. 浏览器渲染过程概述浏览器渲染一个页面的过程分为多个阶段，从解析 HTML、CSS 到绘制最终的页面。关键流程如下： 解析阶段 解析 HTML 和 CSS： HTML 解析：浏览器解析 HTML 文档，生成 DOM（文档对象模型） 树，描述页面的结构和内容。 CSS 解析：浏览器解析 CSS 文件，生成 CSSOM（CSS 对象模型） 树，描述页面的样式信息。 合成渲染树： DOM 和 CSSOM 合并，生成 渲染树（Render Tree），其中包含所有可见元素的信息（包括样式、位置、尺寸等）。 渲染树是浏览器进行 布局（Reflow） 和 绘制（Repaint） 的基础。 在这里执行 domContentLoaded 后面就是渲染过程了 如果需要渲染就执行下面的渲染阶段 渲染阶段 布局和绘制： 布局（Reflow）：浏览器计算每个元素的实际位置和尺寸。 绘制（Repaint）：浏览器绘制页面元素，包括颜色、边框、背景等样式...

概述Intersection Observer API 允许代码注册一个回调函数，该函数会在特定元素进入或离开与其他元素（或视口）的交点，或者两个元素之间的交点变化达到指定值时执行 用法1234// callback 回调函数// options 选项 {root: 监测的祖先元素 , rootMargin: 监测的祖先元素的边距(相当于css的margin区域) ,scrollMargin: 监测的祖先元素的滚动边距(相当于css的scroll-margin区域), threshold: 元素进入监测祖先元素的交点}const observer = new IntersectionObserver(callback, options);observer.observe(document.querySelector(".element"));

plugin 开发使用 yo 开发 下面是 package.json 中比较重要的两个字段 1. activationEvents 字段： 事件注册：activationEvents 就像是 事件监听器，它定义了插件 何时启动，即 何时满足某个条件时，启动插件。 它是一个 激活条件的注册，当符合某个条件时（例如打开特定类型的文件、执行特定的命令等），插件才会 被激活 和 加载。 总结：它控制 插件的加载时机，就像在事件驱动编程中注册事件一样。只有当事件发生时，插件才会被启动。 例子： 1234"activationEvents": [ "onLanguage:python", // 只有当打开 Python 文件时，插件才会激活 "onCommand:extension.sayHello" // 只有当执行某个命令时，插件才会激活] 2. contributes 字段： 提供功能：contributes 定义了 插件提供的功能，它声明了插件会向 VSCode 编辑器 贡献哪些服务，例如命令、快捷键、视图、语...