程序员蜡笔熊-优快云博客

原创 transition 写在 CSS 变量上为什么不生效？给变量补张「类型身份证」

CSS 变量默认不支持动画插值，因值为无类型字符串。通过 @property 注册并声明 syntax 类型（如 <number>、<color>），可使变量参与过渡与动画。未注册变量导致秒跳，initial-value 缺失则规则被静默丢弃，'*' 语法虽兼容但不可插值。注册后支持渐变、滚动进度驱动等高级效果，性能需谨慎评估。

2026-09-13 15:58:28 226

原创告别scroll 监听：CSS 滚动驱动动画，主线程堵死也仍跟手

CSS滚动驱动动画无需JS监听scroll事件，通过animation-timeline: scroll()或view()将动画进度与滚动位置直接绑定，实现零主线程负担的流畅动效。实测表明，即使主线程被阻塞1.5秒，CSS动画仍能精准同步滚动位置，而基于事件的JS方案则会丢失事件、卡顿甚至瞬跳。其核心优势在于进度计算由合成器线程完成，不受主线程影响，真正实现“滚动即播放”。

2026-09-10 15:20:42 112

原创 Vite 8 换芯实测：Rolldown 替掉双引擎，构建快 3.19 倍

Vite 8 正式将 Rolldown 设为默认打包引擎，取代 esbuild+Rollup 双架构，构建耗时降低 3.19 倍，产物略小且 tree-shaking 依旧彻底；Rolldown 性能与 esbuild 同级，但单引擎消除了双引擎结构性损耗，并统一插件体系，minifier 也换为 oxc。

2026-09-08 18:53:34 400

原创 CSS 锚点定位实测：零 JS 实现气泡跟随，自动翻转很香但暗藏 3 个致命坑

用 anchor-name 与 position-anchor 声明锚点，浏览器自动算位置，滚动缩放无需JS，实测贴边居中偏差0.0px。注意：anchor() 写错属性或锚点名不存在会静默失效；popover隐式锚点Chromium尚未实现，需显式命名并加 inset:auto；配合 position-try-fallbacks 可自动溢出翻转。

2026-09-07 12:09:35 339

原创 Bun 从 Zig 逃到 Rust：50 万行代码 11 天搬完，另一个团队却反着跑

Bun用AI花16.5万美元、11天将50万行Zig代码重写为Rust，以解决大量use-after-free和内存泄漏问题。同期Roc团队花487天人工将30万行Rust编译器逆向重写为Zig，却称Zig版本bug更少。核心冲突在于：Rust靠编译器保证内存安全，Zig依赖人工与defer；Bun因GC与手动内存并存致bug丛生，而异步模型（栈式协程→无栈Future）的迁移是AI最大考验。

2026-09-05 14:18:54 320

原创 z-index: 99999 输给 z-index: 2？原生弹窗的 Top Layer 排位战：后进者居上、看得见却点不着

showModal()与showPopover()是进入顶层唯一途径，z-index在此失效；父级transform会创建新层叠上下文，导致子元素99999输给外部z-index:2；模态dialog才受顶层保护，非模态仅普通定位；最反直觉的是先开模态框后弹气泡时，气泡视觉在上层却被backdrop截断指针事件，“看得见点不着”。另有表单自动关闭、焦点管理、::backdrop样式等原生特性可供利用。

2026-09-04 07:57:51 301

原创告别 z-index 内战，原生 popover 属性白送 Top Layer、自动关闭与焦点管理

Popover API解决了弹层组件四大痛点：层级、外点关闭、ESC关闭、焦点管理。它默认是auto，弹层放在顶层，z-index压不住；点外部和ESC自动关闭；焦点自动回退到触发按钮。自动模式会互斥其他气泡，嵌套祖先豁免。打开方式有四种，但open属性无效。与popovertarget相比，commandfor后来居上胜出。

2026-09-03 10:35:08 276

原创 button按钮原生开关弹窗，零 JS 搞定80%交互场景

内容是关于HTML Invoker Commands API的实测，包括属性、命令、事件行为等。摘要需要简洁概括，不超过150字。我们需要提炼核心信息：命令API是什么、关键特性、浏览器支持和注意事项。注重要点：commandfor/command属性简化弹窗控制，减少JS，浏览器处理焦点和遮罩，支持dialog和popover，命令不冒泡，自定义命令需--前缀，show命令不支持等

2026-09-02 12:37:01 353

原创 DeepSeek V4 Pro，用前端项目跑了一遍，Agent 能力暴涨8倍是真的吗？

摘要：DeepSeek V4 Pro 低调发布，性能大幅提升 DeepSeek 昨晚悄然推出 V4 Pro，未做任何宣传，但核心指标惊人： 1M 上下文 + 384K 输出，支持长代码分析与生成； DeepSWE 评测暴涨 8.6 倍（7.3 → 62.7），Terminal Bench 达 87.9 分，接近 Claude Fable 5；价格极低，输入/输出成本仅为 Claude 的 1/36 和 1/90。实测前端场景（React 组件生成、Bug 修复等）表现优异：生成完整 TypeScri

2026-08-14 12:31:30 303

原创 Node.js 事件循环到底和浏览器差在哪？5 个实验了解 libuv 真实调度

本文对比了浏览器和Node.js事件循环的差异，并通过实验验证了Node.js事件循环的执行顺序。浏览器采用任务队列和微任务队列机制，而Node.js基于libuv库实现，包含6个阶段（timers、pending callbacks、idle/prepare、poll、check、close callbacks）。实验结果显示：在非I/O环境下，setTimeout和setImmediate的执行顺序不确定，取决于系统性能；在I/O回调中，setImmediate总是先于setTimeout执行； N

2026-08-13 20:03:55 148

原创 async/await 到底是不是 Generator 的语法糖？手写执行器，Babel 编译产物里藏着答案

本文深入探讨了Generator与async/await的关系及其实现原理。主要内容包括：自动执行器：通过分析手动调用next()的痛点，展示了如何实现自动执行器来自动处理Generator的异步流程，达到类似async/await的效果。 Babel编译机制：通过实验解析async/await的底层实现，发现其并非简单的Generator语法糖，而是基于Promise和特殊的状态机实现。实战应用：提供了Generator在条件分支异步流程中的实际应用示例，并对比了Generator+自动执行器与原生a

2026-08-06 16:26:51 352

原创 Rspack 2.0 正式发布 — 前端构建工具格局再变天

Rspack 2.0 发布，性能翻倍，构建速度提升显著，10000 组件项目缓存构建从 5.6s 降至 1.4s。依赖大幅精简，@rspack/dev-server 依赖从 192 个减至 1 个，安装体积减少 90%+。核心包转为纯 ESM，支持现代特性如 RSC 和 import defer。此外，优化了 tree shaking 能力，支持 CommonJS require 解构和模块联邦 tree shaking。Rspack 2.0 不再局限于“更快的 webpack”，开始形成自己的技术路线。

2026-07-30 14:19:19 418

原创 Kimi K3 开源实测：扒开 MoE 架构，896 个 expert 怎么选 16 个？

摘要：月之暗面（Moonshot AI）开源了全球首个3T级参数大模型Kimi K3，采用混合专家（MoE）架构，总参数量2.8万亿，单次激活约1040亿参数，支持100万token上下文窗口。其核心优势包括：前端能力突出：在代码生成评测中超越Claude和GPT同期版本；低迁移成本：API兼容OpenAI规范，前端开发者可快速适配；超长上下文：支持全项目级代码分析与重构。技术亮点： MoE路由机制：896个专家中动态选择16个处理输入，显著降低计算量；硬件门槛：权重文件达1560GB，普通设备

2026-07-28 20:35:24 229

原创 MCP 7/28 最大改版实测：扒开真实 HTTP 请求，无状态化到底改了什么

2026年7月28日，MCP协议发布重大修订版本，核心变化是从有状态架构转为完全无状态设计。旧版本依赖initialize握手和会话ID维护状态，导致分布式环境存在负载均衡受限、水平扩展复杂等痛点。新版本移除会话机制，每个请求自包含完整上下文，支持任意实例处理任意请求，显著提升了扩展性和可用性。实测显示，新版协议简化了请求流程，无需握手即可直接调用工具，更适应云原生架构需求。这一变革将影响MCP服务的部署架构、路由方式和缓存策略，推动AI工具调用协议向更高性能演进。

2026-07-28 09:58:53 497

原创 Generator 到底暂停了什么？扒开 Babel 编译产物，暂停的真相藏在一个 switch 里

本文深入解析了 Generator 函数的底层实现机制。从 Babel 编译角度，Generator 被转化为由 switch 语句构成的状态机，每个 yield 对应一个 case 分支，通过 context 对象保存执行状态。从 V8 引擎视角，Generator 的挂起恢复依赖栈帧切换和上下文保存。文章通过状态机模型揭示了 Generator 暂停/恢复的本质——将函数分割为多个执行片段，通过 next() 调用驱动状态流转，实现协程式控制。这种机制为异步编程提供了同步化书写的基础，是理解 async

2026-07-27 20:55:21 471

原创 React Compiler 用 Rust 重写了，编译提速 10 倍——手写 useMemo 的日子到头了

前端工具链加速：React Compiler 转向 Rust 提升性能最近，Meta 将 React Compiler 从 TypeScript 重写为 Rust，核心逻辑速度提升10倍。这延续了微软将 TypeScript 编译器用 Go 重写后速度暴增的趋势，表明前端工具链正在从 JavaScript 生态迁移到性能更强的语言。关键点：性能提升：Rust 版本核心转换逻辑快10倍，集成到Rspack等工具后提速7-13倍开发体验：自动处理memoization，减少手动优化代码的负担架构优化：

2026-07-27 14:52:37 408

原创 ES2026 落地了什么？两个真上线的特性 + 两个被毙的，一次讲清楚

ES2026 新特性解析：Temporal API 与 using 语法正式加入摘要：ES2026 确认包含 Temporal API 和 using 语法两项重大更新。Temporal API 历经9年开发，彻底重构日期时间处理，提供类型分离设计（PlainDate/ZonedDateTime等），解决 Date 对象的时区混乱、月份0基等问题。using 语法实现显式资源管理，自动释放文件/数据库连接等资源。而 Record & Tuple 提案已被撤回，管道运算符仍停留在 Stage 2 阶段。开发

2026-07-23 18:30:20 340

原创 Google A2UI 协议：AI Agent 学会“造界面“了，前端工程师该慌吗？

Google开源A2UI项目：让AI Agent生成可交互界面 2025年12月，Google悄然推出A2UI（Agent-to-User Interface）开源项目，旨在解决传统AI Agent仅能输出文本的局限，使其能直接生成动态交互界面。其核心是通过JSON协议描述UI组件（如日期选择器、按钮等），由客户端渲染执行，实现“AI描述界面，终端绘制界面”的分离架构。技术亮点：安全高效：采用受限组件库（如Text、Button等18种基础组件），避免执行任意代码风险；流式渲染：支持界面逐块生成，优化

2026-07-21 20:37:52 530

原创 TypeScript 7.0 编译器用 Go 重写，速度暴增10倍——背后到底做了什么？

TypeScript 7.0 编译器用 Go 重写，速度暴增10倍——背后到底做了什么？

2026-07-20 19:58:04 303

原创事件循环到底在循环什么？5 道面试题拆透宏任务与微任务的执行顺序

事件循环核心机制解析摘要：本文深入解析JavaScript事件循环机制，通过调用栈和任务队列的分层模型，揭示异步代码执行顺序的关键原理。重点拆解宏任务（setTimeout等）与微任务（Promise等）的执行优先级差异：每个宏任务执行后必须清空微任务队列，这一特性解释了为何Promise回调优先于setTimeout执行。通过5道典型面试题的逐层分析，展示了async/await的微任务转换机制，并纠正了常见的16.67ms渲染间隔误区，强调渲染实际取决于VSync信号和主线程空闲状态的协同。文章最后提

2026-07-19 12:34:00 394

原创写给前端的 Generator 指南：从 yield 到 async/await 的完整进化

**摘要：JS Generator 函数是可暂停恢复执行的协程实现，通过 yield 和 next() 实现控制权切换，使异步代码具备同步风格的可读性。其核心在于：语法特性：function* 声明 + yield 暂停点，调用返回迭代器对象，需手动 next() 逐步执行异步演进：作为 Promise 到 async/await 的过渡方案，首次实现用同步写法处理异步逻辑执行机制：next() 启动/恢复执行，yield 支持双向通信（外部传参影响内部状态）底层原理：基于用户态协程的轻量级实现，避

2026-07-16 20:21:32 342

原创三大平台接连关停智能体，开发者自己搭 Agent 的路怎么走？

人工智能拟人化互动服务管理暂行办法》7 月 15 日施行。这个办法是今年 4 月 10 日由国家网信办、发改委、工信部、公安部、市场监管总局五部门联合发布的，是全球首部专门针对 AI 拟人化互动服务的国家级监管规则。办法管的是什么？通俗一点来说——凡是利用 AI 技术「模拟自然人人格特征、思维模式和沟通风格」，提供持续性情感互动服务的，都在监管范围内。AI 伴侣、虚拟偶像、情感陪伴机器人，这些是主要目标。不能诱导情感依赖：不能「过度迎合用户、诱导情感依赖或者沉迷，损害用户真实人际关系」

2026-07-14 22:27:02 497

原创手写Promise--微任务、静态方法、async/await 全搞懂（三）

摘要本文深入解析Promise的运行机制与实现原理，主要内容包括：微任务机制：通过经典面试题分析Promise回调的执行顺序，解释微任务优先于宏任务的原因，并给出基于queueMicrotask的改进实现。静态方法实现：详细讲解Promise.resolve()的实现逻辑，特别说明其处理thenable对象的"拆箱"特性，并分类讨论不同参数类型的处理方式。事件循环流程：用图示展示完整的浏览器事件循环模型，阐明宏任务与微任务的执行关系。实战价值：虽然未展开但提及手写Promise对理解异步编程和实现

2026-07-01 09:50:23 535

原创还原一个完整符合规范的 Promise（二）

本文摘要：文章介绍了如何为MiniPromise实现链式调用功能并符合Promise/A+规范。主要内容包括：核心机制：每个then()必须返回新Promise对象，实现链式调用基础。值穿透处理：当未传回调时，提供默认回调实现值/错误的自动传递。 Promise解析过程：当回调返回Promise时，需等待其解决后再传递结果。关键实现： then()方法内部创建并返回新Promise 通过默认回调函数实现值穿透使用try/catch捕获回调异常处理回调返回Promise的特殊情况验证测试：展示

2026-06-29 18:35:23 494

原创实现一个能跑的迷你版Promise（一）

这篇文章介绍了如何手写一个简化版的 Promise，重点讲解了 Promise 的状态机和回调队列机制。主要内容包括： Promise 的三种状态（pending/fulfilled/rejected）和状态转换规则基础 Promise 框架实现，包括状态管理和 then 方法如何处理同步和异步场景，特别是解决异步回调问题通过回调队列存储待执行的回调函数验证状态不可逆性和错误处理机制文章通过代码示例展示了 Promise 的核心原理，帮助读者理解为什么 Promise 能够处理异步操作，以及如何实

2026-06-29 17:40:21 326

程序员蜡笔熊的博客