YianNotes

Partytown 的实现原理非常“硬核”，它解决了一个前端开发的经典难题：Web Worker 无法访问 DOM。 简单来说，Partytown 就像是在主线程（Main Thread）和后台线程（Web Worker）之间架设了一座同步通信桥梁。 1. 核心矛盾：Worker 的隔离在浏览器中，所有的 DOM（按钮、图片、Window 对象）都只存在于主线程。第三方脚本（如 GTM）需要读写 DOM 才能工作。但 Web Worker 为了性能，被设计为无法直接接触 DOM。 2. Partytown 的三层架构第一步：拦截 (Proxy)Partytown 在 Worker 线程中创建了一套 JavaScript Proxy（代理对象）。当第三方脚本尝试在 Worker 里运行 document.title = "Hello" 时，它访问的其实不是真正的 document，而是一个 Partytown 模拟出来的代理对象。 第二步：同步阻塞通信 (Synchronous Communication)这是 Partytown 最神奇的地方。通常 Work...

一、 核心设计心理学（灵魂）设计原则决定了产品是否“好用”且“符合直觉”。 尼尔森十大启发式原则 (Nielsen’s Heuristics)： 核心：状态可见性、系统与现实匹配、用户控制权、防错原则、一致性。 希克定律 (Hick’s Law)： 内容：面临的选择越多，决策时间越长。 应用：简化导航，减少非必要选项。 菲茨定律 (Fitts’s Law)： 内容：目标越大、距离越近，操作越容易。 应用：关键操作按钮（如“确认”）要足够大且易于触达。 格式塔原理 (Gestalt Principles)： 内容：大脑倾向于将接近、相似的元素视为一组。 二、 布局物理标准（骨架）这是保证界面“工整”和“可适配”的硬性数学规则。 1. 8px 原则 (Vertical Rhythm) 规则：所有间距 (Margin/Padding)、组件高度、图标大小均应为 8 的倍数（如 8, 16, 24, 32, 48）。 原因： 适配性：绝大多数屏幕分辨率都能整除 8。 节奏感：建立统一的垂直律动，消除视觉混乱。 开发友好：程序员可直接使用步长变量进行...

一、 宏观层：执行与异常模型核心逻辑： 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...

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

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...