#28 前端月刊

TS & JS

TS 类型可视化

这个网站做了 TS 类型的可视化讲解，非常适合新手学习理解

JavaScript Source Map 的内部运作机制

文章详细解读了 Source Map 的 JSON 文件格式，并重点阐释了其核心部分——mappings 字段的结构以及用于高效压缩映射数据的 VLQ (可变长度量) 编码算法。

CSS & 动画

【Web开发入门】CSS布局：flexbox、grid、媒体查询和容器查询

非常适合新手入门的 CSS 布局教程，也适合有经验的同学温故知新。

Web 动画性能层级列表

这篇是 motion 的博客文章，提出了 web 动画的 6 个层级：

• S-Tier：可以完全在合成器线程上运行的动画。

• A-Tier：在主线程上运行，但触发合成器。

• B-Tier：涉及一些 DOM 设置测量，但然后作为 A 或 S-Tier 动画运行。

• C-Tier：触发重绘。

• D-Tier：触发重排。

• F-Tier：反复向 DOM 写入内容、测量内容、写入内容、测量内容

似/乎 F 层级是大家早期写一些动画或者动态设置布局经常会用到的方法，这个是性能最差的方案了。他的代码大概是：

// ❌ Bad Code

const header = useRef()

useLayoutEffect(() => {
  const element = header.current

  // Read
  if (element.scrollWidth > element.clientWidth) {
    // Write
    header.current.dataset.overflowing = "yes";
  } else {
    header.current.dataset.overflowing = "";
  }
}, [text]);

return <div ref={header}>...</div>

React

State Of React 2025 调查

一年一度的 State Of React 调查又开始。

填写问卷❌

拓展 React 视野 ✅

Node

极好的 Node.js 包与资源合集

超 500 个精选包、资源与链接集合。

Node.js 24 进入 LTS 阶段 & 如何从 22 迁移到 24

Node.js 24 版本系列已进入长期支持 (LTS) 阶段，并将继续获得更新，直至 2028 年 4 月底。

20 版本将持续支持到 26 年 4 月，22 版本将持续支持到 27 年 4 月。