FE Bits Vol.15｜Chrome 宽高动画重排优化，Node Type Stripping 稳定

本周刊更新时间期望是在每周天，网站在建设中…… 目前推荐使用 Folo 订阅本周刊的 Quaily RSS。公众号前端周周谈 FE Bits，点击阅读原文链接可查看原文。 QQ 讨论小群 598022684，日常讨论前端技术 & 生活，也可在群里投稿自己的文章，随意加入，比较偏向粉丝群的性质～本周刊同时也开源在 fe-bits-weekly，欢迎关注。

今天是 2025 年 11 月 16 日，星期天。

周刊网站先打了个样，域名估计还会换，后续等迁移的东西都迁移过来了之后再把原来 hexo 的版本换掉。

在博客的基础上加上了周刊栏目，欢迎提建议，还有很多要优化的，搜索和评论还没加上，但是欢迎来看看提建议。

仓库在 https://github.com/cosZone/cos-space

我发现我的拖延症还是没好，不发出来就会一直拖～所以发出来鞭策鞭策自己。

生态与社区动态

pnpm 10.21：可根据 engines.runtime 自动安装依赖所需 Node 版本，并引入 trustPolicy 防止供应链攻击。

当依赖声明了特定 Node.js 版本（在 engines.runtime 字段中），pnpm 会自动安装该版本并绑定 CLI 应用运行时，保证依赖与运行环境一致。若存在 postinstall 脚本，也会在匹配版本的 Node.js 下执行。信任策略 (trustPolicy) 设置：新增配置项，可设置为 no-downgrade，当包的信任等级比之前版本下降时，会阻止安装，防止潜在安全风险。
TC39（JavaScript 语言标准化委员会）第 111 次会议将于 2025 年 11 月在东京举办的，会议议程公布。

Stage 4 候选提案：

Iterator Sequencing

JSON.parse source text access

Temporal 状态更新

Locale Info API

Stage 0 新议题：

迭代支持改进（Iterator Join、TypedArray Concatenation、FindWithin）

Class spread syntax

Class field introspection

若干新 Intl 提案（Energy Units、Unit Protocol 等）。

Node.js v25.2.0：Type Stripping 功能标记为稳定。
esbuild 0.27：带破坏性更新，提示锁定版本。

文章与视频

在 Chrome 浏览器中，在特定条件下，对 CSS width 或 height 进行动画处理不再强制执行主线程动画：从性能角度来看，对 CSS width 和 height 进行动画处理是不好的，因为它会导致渲染管线中发生布局操作（也称重排）。 这一点至今仍然正确。

但最近的 Chrome Canary 版本中最近有一个令人兴奋的动画/性能改进：

在 Chrome 144.0.7512.0（当前 Canary 版本）中，我们扩展了 width / height 检查，以检查 width 或 height 是否真的发生了变化。 💡 如果 width / height 不变，则无需计算布局，因此也无需强制动画在主线程上运行。

Crafting Generative CSS Worlds | Codrops：用纯 CSS 打造 3D 等距地形世界，通过层叠网格与 3D 变换构建出一个像素风的生成式世界。作者介绍了从镜头视角设置，到多层网格架构、地形单元的几何定义，再到噪声生成高度图和性能优化等完整技术路径。网站为 CSS Terrain Generator

Perfecting Baseline：一篇讲述 Web 平台特性 “Baseline” 概念如何诞生、发展和优化的技术随笔，让开发者理解它的价值与局限。
JavaScript Engines Zoo：汇总 100 多个 JS 引擎的数据、性能与发展史，附带 Dockerfiles 可直接实验。（好名字）

Visual Types：一份以直观方式解释 TypeScript 类型系统核心概念的交互式视觉笔记，将抽象的类型关系转为集合论直观类比。作者通过对基础类型、联合类型、交叉类型、泛型(Type Alias/Generic)、条件类型(Conditional Types)等模块的分解说明，让开发者从“类型是值的集合”这一基本理念出发，逐步理解 TypeScript 在编译期的推导与约束机制。

Effectively Monitoring Web Performance：如何系统化地监测网站性能，打造持续高效的前端体验。

CSS 新特性

The Range Syntax Has Come to Container Style Queries and if()：CSS 条件逻辑又升级啦，现在范围语法（range syntax）也能用在容器样式查询和 if() 函数里了。

也就是说，可以做到以下行为：

/* Range query for rain percent (new) */
@container style(--rain-percent > 45%) {
  .weather-card {
    background: linear-gradient(140deg, skyblue, lightblue);
  }
}

Responsive List of Stacked/Overlapping Images：用现代 CSS （如 container-type 与 cqw 单位）写出自适应重叠头像列表。图片间的间距可根据容器宽度与元素数量自动调整，无需固定值或“魔法数字”，布局既灵活，又保持了视觉平衡。

趣站与 Codepen 精选

Messenger

“Messenger” 是一个以小行星递送员为主题的互动网页，于 2025 年 11 月 10 日获得 Awwwards 的 Site of the Day (SOTD)。作品通过精巧的角色系统与动态 NPC 设置，打造沉浸式探索体验。色彩仅用两种主色，极简又具叙事性；技术实现上兼顾动画流畅度、响应式设计和可访问性。整体评分 7.92/10，在美术、交互与动画实现方面表现突出，是网页叙事和视觉创作的优秀范例。

这是一个小星球，但总得有人送货。

https://messenger.abeto.co/

Red Alp [448]

Code golfing a tiny demo using maths and a pinch of insanity：作者用极端的代码压缩和数学技巧，把一段 GLSL 着色器压缩到仅 448 字符，创造出奇妙的 3D 山景与云雾效果。

可在此处查看 demo

Hopping Marbles 跳跃的弹珠

Hopping Marbles：循环的纯 CSS + SVG 的跳跃弹珠动画，很有创意！

“一段以弹珠为主角的伪 3D 循环动画，设计成类似预加载器的效果。此外，孔洞底部还使用了特殊的 SVG clip paths 以及一些秘密交替的路径。”——Jon Kantner