YianNotes

一、 服务器启动时，操作系统在做什么？服务器程序启动，监听一个端口（如 3000），操作系统在内核中为该端口分配一个 socket 缓冲区（接收队列 + 发送队列）。这个缓冲区由内核维护，程序无法直接操作，只能通过系统调用（read/write）与它交互。 类比：socket 缓冲区像一个“信箱”。发件人（客户端）把信放进去，收件人（服务器程序）从里面取信。信箱由邮局（操作系统）管理，收件人不能直接碰信箱内部，只能通过“取信窗口”（系统调用）拿信。 二、 请求到达后，操作系统与程序如何协作？完整流程（以 Node.js 事件循环为例）： 步骤 谁在做 具体动作 ① 数据到达 网卡 + 操作系统 TCP 数据包到达网卡，内核协议栈校验、重组，将数据拷贝到该 socket 的接收缓冲区。 ② 标记可读 操作系统内核 内核将对应的 socket 文件描述符（fd）标记为“可读（readable）”。 ③ 通知/唤醒 操作系统 → 用户程序 程序通过 epoll_wait（事件循环） 主动询问内核：“哪些 fd 可读了？” 内核返回可读的 fd 列表，程...

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

《生产者-消费者模式》终极完全版笔记（含背压、超时与生产级防护）一、 一句话穿透本质生产者只负责“受理业务”（丢进筐），不负责“办理业务”（不等结果）；消费者只负责“办理业务”（从筐里拿），不关心是谁丢的。两者通过“队列（缓冲区）”和“任务ID（漂流瓶）”进行彻底解耦，实现异步削峰填谷。 二、 底层运行原理（阻塞与唤醒机制）这是整个模式能跑起来的“物理定律”。绝对不能靠“死循环”去轮询（那会把CPU烧干），必须依靠操作系统的**“等待-通知”机制**。 场景 Java（多线程）的底层做法 Node.js（单线程异步）的底层做法 本质共性 ① 队列为空时（消费者没活干） 线程调用 wait()，操作系统挂起线程（移出CPU队列），CPU占用为0。 执行 await 一个 pending 的 Promise，主线程交还给事件循环，去处理其他HTTP请求。 都让出了CPU，绝不空转消耗资源。 ② 有任务到达时（生产者派活） 调用 notify()，操作系统唤醒消费者线程。 执行存好的 resolve() 函数，Promise 状态变更，消费者被唤醒。 精准唤醒，没有浪...

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. 浏览器渲染过程概述浏览器渲染一个页面的过程分为多个阶段，从解析 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 编辑器 贡献哪些服务，例如命令、快捷键、视图、语...