YianNotes

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）：浏览器绘制页面元素，包括颜色、边框、背景等样式...

解析流程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...

概述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 编辑器 贡献哪些服务，例如命令、快捷键、视图、语...

23种设计模式是《设计模式：可复用面向对象软件的基础》一书中总结的经典设计模式，按其用途和结构大致分为三类：创建型、结构型、行为型。下面是每种模式的简介： 创建型（Creational Patterns） 单例模式 (Singleton)保证一个类只有一个实例，并提供全局访问点。 工厂方法模式 (Factory Method)定义一个创建对象的接口，但由子类决定要实例化哪个类。 抽象工厂模式 (Abstract Factory)提供一个创建一系列相关或相互依赖对象的接口，而无需指定具体类。 建造者模式 (Builder)使用多个简单的对象一步步构建一个复杂的对象。 原型模式 (Prototype)通过复制现有的实例来创建新的对象，而不是通过构造函数实例化。 结构型（Structural Patterns） 适配器模式 (Adapter)将一个类的接口转换成客户希望的另一种接口。 桥接模式 (Bridge)将抽象部分与实现部分分离，使它们可以独立地变化。 组合模式 (Composite)将对象组合成树形结构来表示“部分-整体”的层次结构。 装饰器模式 (Decor...

CSS 动画transitiontransition: 动画属性 动画持续时间 动画函数 动画延迟;要求连续 animation用@keyframes定义动画animation: 动画名称 动画持续时间 动画函数 动画延迟 动画次数 每轮播放方向 动画开始前 / 结束后元素状态 播放或者暂停;“名、时、速、延、次、向、样、态”