程序员蜡笔熊的博客

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

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

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

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

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

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

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

本文对比了浏览器和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

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

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”，开始形成自己的技术路线。

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

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

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

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

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

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

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

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

订阅发布模式

文章主要讲了js的宏任务和微任务