Now vibe coding, so learning hammer FE ?
《浏览器主线程很昂贵：高性能前端优化实战指南》
标签：
#前端 #Web性能 #浏览器原理 #JavaScript #渲染管线 #WebWorker #动画优化 #交互优化 #性能调优
总结：
本文深入剖析了浏览器主线程作为稀缺资源的工作原理，指出前端性能问题的根源往往不是代码速度慢，而是主线程被长时间占用导致界面冻结。文章系统性地介绍了两大类优化策略：在主线程上"精打细算"（拆分、批处理、优先级排序、延迟执行），以及"完全不用主线程"（利用合成器线程、Web Worker、消除不必要的工作），并通过大量交互式 Demo 帮助读者直观理解每种技术的实际效果。
文章要点：
1. 主线程是性能瓶颈的核心：主线程同时负责运行 JavaScript、样式计算、布局、绘制和事件处理，所有工作排队串行执行。60Hz 屏幕每帧预算约 16.6ms，实际可用仅约 10ms，超过 50ms 的任务会导致界面卡顿。
2. 拆分（Splitting）：将大任务切割成小片段，通过
3. 批处理（Batching）：将频繁触发的事件（如滚动、输入）合并执行，使用防抖（debounce）和节流（throttle）减少重复劳动。React 的虚拟 DOM 本质上也是一种批处理机制。
4. 优先级排序（Prioritizing）：通过自定义队列（基于
5. 延迟执行（Deferring）：非必要工作延后处理，包括代码分割、使用
6. 利用合成器线程：使用
7. FLIP 动画技术：对于必须改变布局的动画（如列表重排），先测量初始和最终位置，通过反转和播放
8. Web Worker 处理重计算：将图片处理、大数据解析等纯计算任务转移到 Worker 线程，通过
9. 消除不必要的工作：当数据流入速度超过处理能力时，采用丢弃（旧日志）、合并（只保留最新值）、跳过（缓存 memoization）三种策略，从源头减少工作量。
10. 避免布局抖动（Layout Thrashing）：不要交替读写布局属性（如
URL：
https://kciter.so/posts/the-expensive-main-thread/en/
标签：
#前端 #Web性能 #浏览器原理 #JavaScript #渲染管线 #WebWorker #动画优化 #交互优化 #性能调优
总结：
本文深入剖析了浏览器主线程作为稀缺资源的工作原理，指出前端性能问题的根源往往不是代码速度慢，而是主线程被长时间占用导致界面冻结。文章系统性地介绍了两大类优化策略：在主线程上"精打细算"（拆分、批处理、优先级排序、延迟执行），以及"完全不用主线程"（利用合成器线程、Web Worker、消除不必要的工作），并通过大量交互式 Demo 帮助读者直观理解每种技术的实际效果。
文章要点：
1. 主线程是性能瓶颈的核心：主线程同时负责运行 JavaScript、样式计算、布局、绘制和事件处理，所有工作排队串行执行。60Hz 屏幕每帧预算约 16.6ms，实际可用仅约 10ms，超过 50ms 的任务会导致界面卡顿。
2. 拆分（Splitting）：将大任务切割成小片段，通过
setTimeout 或 requestAnimationFrame 让出主线程，让浏览器在间隙处理渲染和输入。注意过度拆分会产生额外开销，且 JSON.parse 等原子操作无法拆分。3. 批处理（Batching）：将频繁触发的事件（如滚动、输入）合并执行，使用防抖（debounce）和节流（throttle）减少重复劳动。React 的虚拟 DOM 本质上也是一种批处理机制。
4. 优先级排序（Prioritizing）：通过自定义队列（基于
MessageChannel）实现任务插队机制，确保用户当前关注的操作（如点击预览图片）优先执行，采用"空闲时预处理，紧急时优先处理"的策略。5. 延迟执行（Deferring）：非必要工作延后处理，包括代码分割、使用
IntersectionObserver 实现虚拟列表（只渲染可视区域内容）、离屏时暂停动画等，避免一次性处理全部数据。6. 利用合成器线程：使用
transform 和 opacity 代替 top、left、width 等触发布局的属性做动画，让动画在合成器线程运行，即使主线程繁忙也能保持流畅。7. FLIP 动画技术：对于必须改变布局的动画（如列表重排），先测量初始和最终位置，通过反转和播放
transform 来实现平滑过渡，将布局计算限制为仅一次，动画过程交给合成器。8. Web Worker 处理重计算：将图片处理、大数据解析等纯计算任务转移到 Worker 线程，通过
postMessage 的 Transferable 对象（如 ArrayBuffer）实现零拷贝数据传输，避免主线程冻结。9. 消除不必要的工作：当数据流入速度超过处理能力时，采用丢弃（旧日志）、合并（只保留最新值）、跳过（缓存 memoization）三种策略，从源头减少工作量。
10. 避免布局抖动（Layout Thrashing）：不要交替读写布局属性（如
offsetWidth），应先批量读取再批量写入，强制浏览器反复计算布局会严重阻塞主线程。URL：
https://kciter.so/posts/the-expensive-main-thread/en/
kciter.so
The Browser's Main Thread Is Expensive | kciter.so
What comes to mind when you hear "frontend optimization"? For most of us it's things like reducing network requests, shrinking the bundle,…
《Vitest 5.0 正式发布》
标签：
#前端 #JavaScript #Vitest #测试框架 #单元测试 #性能优化 #BrowserMode #MockAPI #基准测试 #断言改进 #代码覆盖率
总结：
Vitest 5.0 于 2026 年 9 月 3 日正式发布，本次大版本以性能优化为核心，同时带来 Trace View 追踪视图、嵌套项目配置、
文章要点：
1. 性能大幅提升：通过共享 Vite 服务器、稳定的文件系统模块缓存、减少主进程与 worker 往返、加速 vm 池与浏览器模式等优化，整体测试速度提升 8%–53%，大型项目（1,280 模块）运行时间从 7.24s 降至 5.83s。
2. **新增
Browser Mode 内置 Trace Viewew**：开启
嵌套项目与配置继承继承**：内联项目默认继承根配置（无需
5. **新 API
8. **Mock
9. **更严格的断言行为**：未 await 的异步断言（
10. **
11. **报告器统一输出目录**：所有报告器输出集中到
12. **其他实用改进**：新增
13. **破坏性变更**：要求 Vite >= 6.4.0 和 Node.js >= 22.12.0，升级前建议查阅迁移指南。
URL：
https://vitest.dev/blog/vitest-5
标签：
#前端 #JavaScript #Vitest #测试框架 #单元测试 #性能优化 #BrowserMode #MockAPI #基准测试 #断言改进 #代码覆盖率
总结：
Vitest 5.0 于 2026 年 9 月 3 日正式发布，本次大版本以性能优化为核心，同时带来 Trace View 追踪视图、嵌套项目配置、
vi.when 条件 Mock、基准测试重写等多项重要更新，并默认启用更严格的断言与 clearMocks 行为，要求 Vite >= 6.4.0 和 Node.js >= 22.12.0。文章要点：
1. 性能大幅提升：通过共享 Vite 服务器、稳定的文件系统模块缓存、减少主进程与 worker 往返、加速 vm 池与浏览器模式等优化，整体测试速度提升 8%–53%，大型项目（1,280 模块）运行时间从 7.24s 降至 5.83s。
2. **新增
vitest doctor 诊断工具**：自动运行替代配置并推荐更快的选项，同时默认输出性能提示，帮助用户发现配置瓶颈。Browser Mode 内置 Trace Viewew**：开启
browser.traceView 后，可记录交互、断言和 DOM 快照，支持逐步回放测试过程，便于调试 CI 失败。嵌套项目与配置继承继承**：内联项目默认继承根配置（无需
extends: true），被引用的配置文件可声明自己的 projects，支持多级嵌套结构。5. **新 API
vi.when**：支持按参数定义不同的 Mock 返回值，支持深度相等和 expect.any() 等非对称匹配器，并可限制调用基准测试 API 重写API 重写**：bench 变为测试上下文 fixture，可在常规 test() 中使用，支持 fixtures、生命周期钩子、重试和断言，结果可存储并与基线定位器错误显示 ARIA 树ARIA 树**：浏览器模式下定位失败时，同时打印 ARIA 快照和 HTML，帮助快速理解 getByRole 等查询的匹配逻辑；定位器默认启用严格模式。8. **Mock
Temporal API**：假计时器现在同时模拟 Temporal 和 Date，适用于 vi.useFakeTimers() 和 vi.setSystemTime()。9. **更严格的断言行为**：未 await 的异步断言（
resolves、rejects 等）现在会导致测试失败；expect.poll 超时后拒绝并支持 AbortSignal 取消。10. **
clearMocks 默认启用**：每个测试前自动清除 Mock 调用历史，避免测试间报告器统一输出目录。11. **报告器统一输出目录**：所有报告器输出集中到
.vitest 目录，减少 .gitignore 配置；HTML 报告器支持 singleFile 选项生成单文件报告。12. **其他实用改进**：新增
--repeats 选项重复运行测试以排查 flaky 测试；injectCjsGlobals 可禁用 CJS 全局注入；覆盖率工具切换到维护中的 @vitest/istanbuljs 包。13. **破坏性变更**：要求 Vite >= 6.4.0 和 Node.js >= 22.12.0，升级前建议查阅迁移指南。
URL：
https://vitest.dev/blog/vitest-5
vitest.dev
Announcing Vitest 5.0
Vitest 5.0 Release Announcement
《你的模块在骗你：ESM 与 CommonJS 的本质差异与陷阱全解析》
标签：
#JavaScript #NodeJS #ESM #CommonJS #模块系统 #前端工程化
总结：
本文深入剖析了 ESM 和 CommonJS 两种模块系统在底层机制上的根本差异——ESM 通过"活绑定"（live bindings）在模块间共享变量引用，而 CommonJS 通过
文章要点：
1. 活绑定 vs 值复制：最经典的陷阱 — ESM 的
2. ESM 的导入会被提升，CommonJS 按执行顺序 — ESM 静态导入在模块体执行前就已经解析、链接并评估依赖，所以
3. 两种系统有独立的缓存 — ESM 和 CommonJS 各自维护自己的模块缓存，URL 查询参数（如
4. 循环依赖的处理方式天差地别 — CommonJS 允许在模块未完全初始化时就返回
5. 跨系统互操作的隐藏复杂性 — ESM 导入 CJS 时，
6. 双包实例风险（Dual-Package Hazard） — 当
7. 发布库的最佳实践 — 用
8. 调试模块问题的检查清单 — 从导入文件的格式、解析到的入口点、返回值形状、本地变量持有的是绑定还是副本、评估是否完成、是否存在循环依赖、模块身份是否一致、是否经过构建工具转换、是否通过打包后的 tarball 测试等 9 个维度系统排查。
9. 九条实践规则 — 新项目优先用 ESM；库优先用命名导出；可变导出视为共享进程状态；CJS 属性会变时保留对象而非解构；移除循环依赖而非绕开；条件/延迟加载用动态
URL：
https://blog.gaborkoos.com/posts/2026-08-14-Your-Modules-Are-Lying-to-You/
标签：
#JavaScript #NodeJS #ESM #CommonJS #模块系统 #前端工程化
总结：
本文深入剖析了 ESM 和 CommonJS 两种模块系统在底层机制上的根本差异——ESM 通过"活绑定"（live bindings）在模块间共享变量引用，而 CommonJS 通过
module.exports 返回一个普通值（通常是对象）。这一差异导致了同名导入在两种系统下行为截然不同：ESM 的命名导入能观察到导出模块的变量重新赋值，CommonJS 的解构赋值则只复制了属性的当前值。文章进一步系统讲解了评估顺序、缓存机制、循环依赖处理、跨系统互操作、双包实例风险等关键话题，并提供了 9 条实践规则和调试清单。文章要点：
1. 活绑定 vs 值复制：最经典的陷阱 — ESM 的
import { status } 是活绑定，导出模块重新赋值后导入方自动看到新值；CommonJS 的 const { status } = require() 是解构赋值，只复制了对象属性的当前值，后续变化不可见。只有保留整个对象 const state = require() 才能观察到属性变更。2. ESM 的导入会被提升，CommonJS 按执行顺序 — ESM 静态导入在模块体执行前就已经解析、链接并评估依赖，所以
import 写在代码中间也不影响执行顺序；CommonJS 的 require() 是普通函数调用，走到哪行才执行哪行。3. 两种系统有独立的缓存 — ESM 和 CommonJS 各自维护自己的模块缓存，URL 查询参数（如
?mode=one）会让同一文件被当作不同模块实例加载两次。条件导出（"import" / "require"）指向不同文件时，也会产生两个独立的模块实例。4. 循环依赖的处理方式天差地别 — CommonJS 允许在模块未完全初始化时就返回
exports 对象，因此循环依赖中的模块能看到对方"半成品"状态；ESM 则先创建绑定再执行模块体，如果在初始化前读取对方绑定会抛出 ReferenceError: Cannot access before initialization。5. 跨系统互操作的隐藏复杂性 — ESM 导入 CJS 时，
module.exports 作为 default 导出最可靠，命名导出是 Node 静态分析的"快照"，不会跟踪后续属性变更；CJS 通过 require() 加载 ESM 时返回的是命名空间对象，需通过 .default 访问默认导出。__esModule 只是工具链约定，不是语言特性。6. 双包实例风险（Dual-Package Hazard） — 当
"import" 和 "require" 指向不同构建文件时，同一个类会被实例化为两个不同的构造函数，instanceof 会返回 false，共享状态（如计数器、注册表）也会分裂成两份。7. 发布库的最佳实践 — 用
.mjs/.cjs 明确文件格式；package.json 中 "type" 字段决定 .js 的解析方式；相对 ESM 导入必须带文件扩展名；用 "exports" 条件导出为不同系统提供入口，但要警惕实例分裂。8. 调试模块问题的检查清单 — 从导入文件的格式、解析到的入口点、返回值形状、本地变量持有的是绑定还是副本、评估是否完成、是否存在循环依赖、模块身份是否一致、是否经过构建工具转换、是否通过打包后的 tarball 测试等 9 个维度系统排查。
9. 九条实践规则 — 新项目优先用 ESM；库优先用命名导出；可变导出视为共享进程状态；CJS 属性会变时保留对象而非解构；移除循环依赖而非绕开；条件/延迟加载用动态
import()；包边界显式声明文件格式；假设不同导出目标是不同实例；通过包名而非源码路径测试。URL：
https://blog.gaborkoos.com/posts/2026-08-14-Your-Modules-Are-Lying-to-You/
Gaborkoos
Your Modules Are Lying to You
ESM and CommonJS expose values through different contracts. Learn how bindings, object references, evaluation order, caching, cycles, and interop shape module behavior in Node.js.
《smol-toml：小而快的 TOML 解析与序列化库》
标签：
#开发工具 #JavaScript #TOML #NPM #性能优化 #配置解析 #BigInt #TemporalAPI
总结：
smol-toml 是一款轻量、高速且遵循 TOML 1.1.0 规范的 JavaScript 解析与序列化库，目前已是 npm 上下载量最高的 TOML 解析器，被众多框架和工具在生产环境中广泛使用。
文章要点：
1. 小而快的 TOML 解析器：smol-toml 主打"小体积、高性能、正确性"，在保持与 TOML v1.1.0 规范高度兼容的同时，解析和序列化速度均领先同类库，是 npm 上最受欢迎的 TOML 解析器。
2. API 简洁易用：提供
3. 整数与 BigInt 支持：默认情况下整数和浮点数都解析为 JavaScript Number（即浮点数），丢失类型信息且不支持超过 53 位的整数；可通过
4. 日期时间处理灵活：使用扩展的
5. 性能表现亮眼：在基准测试中，smol-toml 的解析速度仅次于走捷径牺牲正确性的 fast-toml，序列化速度则全面领先；处理 5MB 大文件时，解析和序列化性能均大幅优于 @iarna/toml、@ltd/j-toml 等主流库。
6. 已知局限透明公开：由于 JavaScript 语言限制，不会拒绝无效 UTF-8 字符串和某些无效日期（如 2 月 30 日会被解析为 3 月 2 日）；具体跳过的测试项和原因在
URL：
https://github.com/squirrelchat/smol-toml
标签：
#开发工具 #JavaScript #TOML #NPM #性能优化 #配置解析 #BigInt #TemporalAPI
总结：
smol-toml 是一款轻量、高速且遵循 TOML 1.1.0 规范的 JavaScript 解析与序列化库，目前已是 npm 上下载量最高的 TOML 解析器，被众多框架和工具在生产环境中广泛使用。
文章要点：
1. 小而快的 TOML 解析器：smol-toml 主打"小体积、高性能、正确性"，在保持与 TOML v1.1.0 规范高度兼容的同时，解析和序列化速度均领先同类库，是 npm 上最受欢迎的 TOML 解析器。
2. API 简洁易用：提供
parse() 和 stringify() 两个核心方法，用法类似 JSON 全局对象；stringify 会自动忽略对象中的 undefined 和 null 值，但数组中的这些值会被拒绝。3. 整数与 BigInt 支持：默认情况下整数和浮点数都解析为 JavaScript Number（即浮点数），丢失类型信息且不支持超过 53 位的整数；可通过
integersAsBigInt: true 选项启用 BigInt 支持，实现端到端类型保留。4. 日期时间处理灵活：使用扩展的
Date 对象（TomlDate）表示 TOML 的所有日期类型，支持 Offset Date Time、Local Date Time、Local Date 和 Local Time；序列化时支持 Temporal API，但时区信息会转换为偏移量。5. 性能表现亮眼：在基准测试中，smol-toml 的解析速度仅次于走捷径牺牲正确性的 fast-toml，序列化速度则全面领先；处理 5MB 大文件时，解析和序列化性能均大幅优于 @iarna/toml、@ltd/j-toml 等主流库。
6. 已知局限透明公开：由于 JavaScript 语言限制，不会拒绝无效 UTF-8 字符串和某些无效日期（如 2 月 30 日会被解析为 3 月 2 日）；具体跳过的测试项和原因在
run-toml-test.bash 中有详细说明。URL：
https://github.com/squirrelchat/smol-toml
GitHub
GitHub - squirrelchat/smol-toml: A small, fast, and correct TOML (1.1.0) parser and serializer
A small, fast, and correct TOML (1.1.0) parser and serializer - squirrelchat/smol-toml
《一次被低估的重构如何让内存暴降90%——TanStack_Table_V9内存优化揭秘》
标签：#前端 #TanStackTable #性能优化 #JavaScript #内存管理
总结：
TanStack_Table_V9通过将行、列、单元格和表头对象的方法从实例属性迁移到共享原型上，实现了大型表格场景下最高达90%的内存节省。这一改动让V9能处理1000-1600万行数据（V8仅约150万行即达4GB内存上限），同时保持了动态特性组合的能力，仅带来解构方法调用这一处Breaking_Change。
文章要点：
1. 数据亮眼：处理100万行×8列时，V9比V8节省超2.4GB内存，最高降幅达90.5%，表格承载能力从约150万行跃升至1000-1600万行
2. 核心手法：用
3. 不用类的智慧：因为TanStack_Table的特性是动态组合的（按需注册排序、筛选、分页等），单继承的Class难以优雅表达"条件式多重继承"，手动原型模式更灵活
4. 唯一代价：方法不能再解构调用（如
5. 通用启示：任何需要大规模创建相似对象的库或应用，都可以借鉴这种"共享原型+实例数据分离"的模式来优化内存
URL：https://tanstack.com/blog/tanstack-table-v9-memory-performance
标签：#前端 #TanStackTable #性能优化 #JavaScript #内存管理
总结：
TanStack_Table_V9通过将行、列、单元格和表头对象的方法从实例属性迁移到共享原型上，实现了大型表格场景下最高达90%的内存节省。这一改动让V9能处理1000-1600万行数据（V8仅约150万行即达4GB内存上限），同时保持了动态特性组合的能力，仅带来解构方法调用这一处Breaking_Change。
文章要点：
1. 数据亮眼：处理100万行×8列时，V9比V8节省超2.4GB内存，最高降幅达90.5%，表格承载能力从约150万行跃升至1000-1600万行
2. 核心手法：用
Object.create创建共享原型对象，将方法统一挂载到原型上，实例只保留独有数据，彻底消灭百万级重复函数对象及其闭包作用域3. 不用类的智慧：因为TanStack_Table的特性是动态组合的（按需注册排序、筛选、分页等），单继承的Class难以优雅表达"条件式多重继承"，手动原型模式更灵活
4. 唯一代价：方法不能再解构调用（如
const {getValue} = row会丢失this），且Object.keys/{...row}浅拷贝不会包含方法，但直接调用row.getValue()一切正常5. 通用启示：任何需要大规模创建相似对象的库或应用，都可以借鉴这种"共享原型+实例数据分离"的模式来优化内存
URL：https://tanstack.com/blog/tanstack-table-v9-memory-performance
TanStack
How an Underrated Refactor Saved 90% Memory Usage | TanStack Blog
TanStack Table V9 can use dramatically less memory than Table V8 in large tables because row, column, cell, and header APIs now live on shared prototypes instead of every object instance.
《Playwright Fixtures 的"魔法"实现原理》
标签：#测试 #Playwright #JavaScript #API设计 #源码分析
总结：
作者深入剖析 Playwright 的 Fixtures API 如何通过
文章要点：
1. 懒加载是核心卖点**：Playwright 的 fixtures 按需初始化，不用就不创建，能节省测试执行时间；但传统 Proxy/getter 方案会导致异步 fixture 需要 `await`，破坏 API 体验
2. "偷看"函数参数是关键**：Playwright 在不调用测试函数的情况下，就能知道它需要哪些 fixture，这解决了"鸡生蛋"难题——要知道用哪些 fixture 才能准备它们，但准备前又不能运行测试
3. **`Function.prototype.toString()
4. **解析逻辑相当 robust**：源码展示了
5. **压缩工具不会破坏它**：实测 Terser 和 esbuild 的 minify 只会把参数名缩短（如
6. **魔法有代价**：函数组合（如 `noThrow(fn)
7. **作者态度很诚实**：认可 Playwright 团队的选择非常适合测试框架场景，但坦言这种魔法比个人期望的多了一点，想不出其他库有同样充分的理由采用此方案
URL：
https://ivakin.dev/blog/how-playwright-fixtures-work
标签：#测试 #Playwright #JavaScript #API设计 #源码分析
总结：
作者深入剖析 Playwright 的 Fixtures API 如何通过
Function.prototype.toString() 在测试运行前"偷看"函数参数，实现按需懒加载。文章揭示了这一巧妙但略带"魔法"的设计：Playwright 强制要求测试函数使用对象解构语法（如 `async ({ page }) =>`），然后通过正则解析源码字符串提取 fixture 名称，从而只初始化测试真正需要的依赖。作者还验证了该方案对不同函数类型、压缩工具（Terser/esbuild）的兼容性，并坦诚讨论了其"神奇感"与潜在局限性。文章要点：
1. 懒加载是核心卖点**：Playwright 的 fixtures 按需初始化，不用就不创建，能节省测试执行时间；但传统 Proxy/getter 方案会导致异步 fixture 需要 `await`，破坏 API 体验
2. "偷看"函数参数是关键**：Playwright 在不调用测试函数的情况下，就能知道它需要哪些 fixture，这解决了"鸡生蛋"难题——要知道用哪些 fixture 才能准备它们，但准备前又不能运行测试
3. **`Function.prototype.toString()
是秘密武器**：Playwright 把测试函数转成字符串，用正则提取解构参数，因此强制要求 `async ({ page }) => 这种写法，否则直接抛错"First argument must use the object destructuring pattern"4. **解析逻辑相当 robust**：源码展示了
innerFixtureParameterNames 的实现，能正确处理普通函数、async 函数、生成器函数、箭头函数等多种声明方式，还能处理带默认值的复杂解构5. **压缩工具不会破坏它**：实测 Terser 和 esbuild 的 minify 只会把参数名缩短（如
foo → `o`），不会改解构语法，所以 Playwright 的正则解析依然能工作6. **魔法有代价**：函数组合（如 `noThrow(fn)
包装后传入）会失效，因为 `toString() 拿到的是包装函数的源码而非原始函数；这种"黑魔法"虽然 DX 很好，但违反了"最小惊讶原则"7. **作者态度很诚实**：认可 Playwright 团队的选择非常适合测试框架场景，但坦言这种魔法比个人期望的多了一点，想不出其他库有同样充分的理由采用此方案
URL：
https://ivakin.dev/blog/how-playwright-fixtures-work
《npm 上 ESM 与 CJS 的占比变迁数据》
标签：#JavaScript #NodeJS #ESM #CommonJS #npm #模块系统
总结：
该项目持续追踪 npm 高影响力（热门）包中 ESM、CJS、Dual（双模式）及 Faux（伪 ESM）的占比变化。数据显示，纯 ESM 包从 2021 年 8 月的 6% 增长至 2026 年 6 月的 16%；Dual 模式包增长最为迅猛（从 1.7% 到 22%），成为主流过渡方案；而纯 CJS 虽仍占最大份额（52%），但占比持续下降。2025 年底样本量骤增，反映 npm 生态整体扩张。
文章要点：
1. 纯 ESM 稳步增长但尚未过半**：从 2021 年 341 个包（6.1%）增至 2026 年 2590 个（16.0%），五年增长约 2.6 倍，但仍是少数派
2. **Dual 模式成为最大赢家**：从 95 个（1.7%）暴涨至 3574 个（22.0%），说明"同时支持 ESM 和 CJS"已成为库作者最务实的选择
3. **纯 CJS 仍是主流但份额萎缩**：从 77.4% 降至 51.6%，虽然绝对数量增加，但相对占比持续被侵蚀
4. "伪 ESM"（Faux）长期僵持**：表面用 ESM 语法但实际编译为 CJS 的包，占比一直维持在 10% 左右，说明彻底转型仍有阻力
5. **生态规模急剧扩张**：样本包总数从 5617 个增至 16231 个，2025 年底几乎翻倍，反映 npm 整体生态的蓬勃发展
6. **数据方法论透明**：基于
URL：
https://github.com/wooorm/npm-esm-vs-cjs#data
标签：#JavaScript #NodeJS #ESM #CommonJS #npm #模块系统
总结：
该项目持续追踪 npm 高影响力（热门）包中 ESM、CJS、Dual（双模式）及 Faux（伪 ESM）的占比变化。数据显示，纯 ESM 包从 2021 年 8 月的 6% 增长至 2026 年 6 月的 16%；Dual 模式包增长最为迅猛（从 1.7% 到 22%），成为主流过渡方案；而纯 CJS 虽仍占最大份额（52%），但占比持续下降。2025 年底样本量骤增，反映 npm 生态整体扩张。
文章要点：
1. 纯 ESM 稳步增长但尚未过半**：从 2021 年 341 个包（6.1%）增至 2026 年 2590 个（16.0%），五年增长约 2.6 倍，但仍是少数派
2. **Dual 模式成为最大赢家**：从 95 个（1.7%）暴涨至 3574 个（22.0%），说明"同时支持 ESM 和 CJS"已成为库作者最务实的选择
3. **纯 CJS 仍是主流但份额萎缩**：从 77.4% 降至 51.6%，虽然绝对数量增加，但相对占比持续被侵蚀
4. "伪 ESM"（Faux）长期僵持**：表面用 ESM 语法但实际编译为 CJS 的包，占比一直维持在 10% 左右，说明彻底转型仍有阻力
5. **生态规模急剧扩张**：样本包总数从 5617 个增至 16231 个，2025 年底几乎翻倍，反映 npm 整体生态的蓬勃发展
6. **数据方法论透明**：基于
npm-high-impact 热门包分析，爬取 package.json 的 latest 版本，约 15 分钟完成，结果以 CSV 和 SVG 可视化呈现URL：
https://github.com/wooorm/npm-esm-vs-cjs#data
GitHub
GitHub - wooorm/npm-esm-vs-cjs: Data on the share of ESM vs CJS on the public npm registry
Data on the share of ESM vs CJS on the public npm registry - wooorm/npm-esm-vs-cjs
《CSS 与 JavaScript 动画性能之争》
标签：#前端 #CSS动画 #JavaScript动画 #WebAnimationsAPI #性能优化 #GSAP #Motion
总结：
本文通过交互式演示拆解了 CSS 与 JS 动画的性能差异真相：CSS Keyframes 和 Transitions 运行在独立线程，主线程阻塞时依然流畅；而传统 JS 动画（如 requestAnimationFrame 循环）与主线程争抢资源，容易卡顿。但 Motion 库通过底层调用 Web Animations API（WAAPI）绕过了这一限制，实现了与 CSS 同级别的流畅度。作者建议优先使用原生 CSS，遇到 CSS 无法覆盖的场景时选择 Motion 等 WAAPI 方案，而非直接上 GSAP 这类纯主线程库。
文章要点：
1. CSS 动画的核心优势不是"计算快"，而是运行在独立线程，主线程再忙也不影响动画流畅度
2. 传统 JS 动画（requestAnimationFrame）每帧都在主线程计算，React 重渲染或 fetch 解析时容易掉帧
3. Motion 库（原 Framer Motion）底层使用 Web Animations API，能接入与 CSS 相同的底层动画引擎，主线程阻塞时照样丝滑
4. GSAP 功能极其强大，但坚持在主线程运行，是"能力换性能"的取舍，适合复杂序列动画而非简单过渡
5. 现代 CSS 已经很能打，View Transitions、linear()、Animation Timeline 等新 API 大幅减少了必须上 JS 的场景
6. 选型建议：能用 CSS 就不用库 → CSS 搞不定优先选 Motion/WAAPI → 只有复杂时间线控制才考虑 GSAP
URL：https://www.joshwcomeau.com/animation/css-vs-javascript/
标签：#前端 #CSS动画 #JavaScript动画 #WebAnimationsAPI #性能优化 #GSAP #Motion
总结：
本文通过交互式演示拆解了 CSS 与 JS 动画的性能差异真相：CSS Keyframes 和 Transitions 运行在独立线程，主线程阻塞时依然流畅；而传统 JS 动画（如 requestAnimationFrame 循环）与主线程争抢资源，容易卡顿。但 Motion 库通过底层调用 Web Animations API（WAAPI）绕过了这一限制，实现了与 CSS 同级别的流畅度。作者建议优先使用原生 CSS，遇到 CSS 无法覆盖的场景时选择 Motion 等 WAAPI 方案，而非直接上 GSAP 这类纯主线程库。
文章要点：
1. CSS 动画的核心优势不是"计算快"，而是运行在独立线程，主线程再忙也不影响动画流畅度
2. 传统 JS 动画（requestAnimationFrame）每帧都在主线程计算，React 重渲染或 fetch 解析时容易掉帧
3. Motion 库（原 Framer Motion）底层使用 Web Animations API，能接入与 CSS 相同的底层动画引擎，主线程阻塞时照样丝滑
4. GSAP 功能极其强大，但坚持在主线程运行，是"能力换性能"的取舍，适合复杂序列动画而非简单过渡
5. 现代 CSS 已经很能打，View Transitions、linear()、Animation Timeline 等新 API 大幅减少了必须上 JS 的场景
6. 选型建议：能用 CSS 就不用库 → CSS 搞不定优先选 Motion/WAAPI → 只有复杂时间线控制才考虑 GSAP
URL：https://www.joshwcomeau.com/animation/css-vs-javascript/
Joshwcomeau
CSS vs. JavaScript • Josh W. Comeau
There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this blog post, we’ll compare the same animation across several…
《嵌套Promise的实际用途》
标签：#JavaScript #Promise #并发控制 #RWLock #函数式编程
总结：
文章探讨了JavaScript中Promise自动扁平化设计的利弊。作者回顾了Promise/A+规范制定时关于是否引入Monad和Functor概念的争论，并通过实现读者-写者锁（RWLock）的实际案例，展示了嵌套Promise在并发控制中的独特价值——它能让一个异步函数调用另一个异步函数，却不阻塞等待内层函数完成，从而实现精细的并发管理。
文章要点：
- Promise的
- 函数式编程社区曾希望Promise能区分
- 作者在开发EscoDB时遇到了一个真实场景：实现读者-写者锁（RWLock）需要协调多个读操作并发执行、写操作独占执行
- 通过显式返回
- 嵌套Promise代表"一个异步函数调用另一个异步函数，但不等待其完成"的语义，在主动管理并发控制时非常有用
- Promise扁平化本质上是"时间上的连接"（强制顺序执行），而嵌套Promise则保留了并行调度的可能性
文章URL：https://blog.jcoglan.com/2026/03/23/uses-for-nested-promises/
标签：#JavaScript #Promise #并发控制 #RWLock #函数式编程
总结：
文章探讨了JavaScript中Promise自动扁平化设计的利弊。作者回顾了Promise/A+规范制定时关于是否引入Monad和Functor概念的争论，并通过实现读者-写者锁（RWLock）的实际案例，展示了嵌套Promise在并发控制中的独特价值——它能让一个异步函数调用另一个异步函数，却不阻塞等待内层函数完成，从而实现精细的并发管理。
文章要点：
- Promise的
then()方法同时承担了Functor的map和Monad的flatMap功能，会自动扁平化任意层级的嵌套Promise- 函数式编程社区曾希望Promise能区分
map()和flatMap()，但规范作者出于便利性考虑拒绝了这一提议- 作者在开发EscoDB时遇到了一个真实场景：实现读者-写者锁（RWLock）需要协调多个读操作并发执行、写操作独占执行
- 通过显式返回
{ promise: Promise<T> }结构来"绕过"Promise自动扁平化，实现了关键功能：保护"检查队列状态"和"放入任务"这两个动作的原子性，同时又不阻塞调度器等待任务实际执行完成- 嵌套Promise代表"一个异步函数调用另一个异步函数，但不等待其完成"的语义，在主动管理并发控制时非常有用
- Promise扁平化本质上是"时间上的连接"（强制顺序执行），而嵌套Promise则保留了并行调度的可能性
文章URL：https://blog.jcoglan.com/2026/03/23/uses-for-nested-promises/
《2026年JavaScript生态全景指南》
标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。
文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()
- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～
- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～
- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～
- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！
文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes
总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。
文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()
和.filter()`啦，而且是惰性求值不耗内存；Set之间可以玩集合运算，轻松找出技能交集和差集；`Promise.try()`让同步异步错误一网打尽；还有`RegExp.escape()`终于解决了用户搜索时特殊字符炸正则的问题～- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～
- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～
- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～
- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！
文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
Frontend Masters
What To Know in JavaScript (2026 Edition)
We’ve done posts like this for CSS, but JavaScript deserves the same dangnabit! Especially as JavaScript does a better job of versioning itself anyway. We’ll cover new stuff in the language itself, but being a JavaScript practitioner involves more than the…
《原生JSON模块终于成为现实》
标签：#JavaScript #ESModules #JSON #Web标准
总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用
文章要点：
- 使用
- 动态导入同样支持：
- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（
- 浏览器仍需服务器返回
- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON
- 此特性不仅限于JSON，已扩展支持CSS模块脚本（
- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值
文章URL：https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
标签：#JavaScript #ESModules #JSON #Web标准
总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用
import attributes语法with { type: "json" }，开发者现在可以在浏览器、Node.js、Deno和Bun中直接导入JSON文件，无需构建工具转换。这标志着从构建时模拟到运行时原生支持的转变，使模块系统更加显式和可扩展。文章要点：
- 使用
import config from "./config.json" with { type: "json" }语法实现原生JSON导入，替代了以往需要打包工具转换的方式- 动态导入同样支持：
await import("./config.json", { with: { type: "json" } })- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（
a === b为true）- 浏览器仍需服务器返回
Content-Type: application/json，并遵循CORS规则- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON
- 此特性不仅限于JSON，已扩展支持CSS模块脚本（
with { type: "css" }），为未来其他结构化模块类型建立模式- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值
文章URL：https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
《利用浏览器Canvas进行数据压缩》
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA
总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。
文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求
文章URL：https://jstrieb.github.io/posts/canvas-compress/
#React 学习如何使用 React Three Fiber 创建一个简化版的移动游戏《跳跳路》的克隆版。#ReactThreeFiber #Threejs #JavaScript #TypeScript
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road
https://javascriptgametutorials.com/tutorials/react-three-fiber/crossy-road
JavaScript Game Tutorials
Crossy Road with React Three Fiber
In this tutorial, we learn how to create a simplified clone of the mobile game Crossy Road with React Three Fiber.
