#前端 #JavaScript #存储 #TypeScript #tools
unadlib/localspace：现代化的 localForage 替代方案，提供简单的浏览器存储封装。
localForage 的使用者看了看感觉不错，mark 一下（

AI 摘要：localspace 是一个旨在替代 localForage 的现代化存储工具包。它在完全兼容 localForage API 的基础上，利用现代 TypeScript 和异步架构重写，解决了原版在类型定义、IndexedDB 性能瓶颈、以及多平台（Node.js、React Native、Electron）一致性上的长期痛点。其核心亮点包括：支持将高频写入合并为单次事务的合并写入（Coalesced Writes）技术，可提升 3-10 倍性能；内置了强大的插件系统，提供 TTL（Time-to-Live）过期、透明加密、数据压缩、多标签页同步及配额管理（LRU 淘汰）等高级功能；同时保留了极简的 API，方便开发者从旧项目无缝迁移。

GitHub

GitHub - unadlib/localspace: A library that unifies the APIs of IndexedDB, localStorage and other storage into a consistent API

A library that unifies the APIs of IndexedDB, localStorage and other storage into a consistent API - unadlib/localspace

#优质博文 #前端 #CSS #JavaScript #视图转换
探讨在视图过渡 (View Transitions) 过程中如何保持视频和音频的播放状态，并区分了同页面与跨页面两种场景下的实现差异。

Astro 的持久化过渡效果很好用的。

View Transitions & Playing Video

AI 摘要：本文主要研究了在 Web 视图过渡 (View Transitions) 期间保持视频/音频播放的技术细节。作者指出，单页面视图过渡 (Same-Page View Transitions) 能够原生支持 (Just Works™) 状态保持，类似于 .moveBefore() 的效果；而多页面视图过渡 (Multi-Page View Transitions) 由于页面卸载则无法直接维持状态。不过，通过利用 pageswap 和 pagereveal 事件配合 sessionStorage 存储视频进度，可以“伪造”出一种近乎无缝的过渡体验。文章还提到了 Astro 框架在此方面的实现以及未来浏览器原生支持跨页面状态保存的可能性。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 同页面视图过渡 (Same-Page View Transitions)
• 在单页面环境下，使用 document.startViewTransition 操作 DOM 时，浏览器会自动保留 <video>、<audio> 甚至 <iframe> 的播放状态。
• 这种机制与新兴的 moveBefore() 方法类似，能够确保视频在元素变换位置或样式时持续播放而不中断。

2. 多页面视图过渡 (Multi-Page View Transitions) 的挑战
• 在传统的多页面架构 (MPA) 中，当页面卸载并加载新页面时，所有状态都会丢失，即便新旧页面包含相同的视频元素也无法自动衔接。
• 讨论了 Astro 等框架的实现原理，它们通常通过将页面导航转化为类似单页面应用 (SPA) 的体验来避开这一限制。
• 引用了 Chrome 团队关于跨页面状态保存的讨论，指出这不仅是视图过渡的需求，更是更通用的页面导航状态持久化方案。

3. 手动实现跨页面的“状态伪造”方案
• 使用 CSS 的 @view-transition { navigation: auto; } 启用多页面过渡。
• 为新旧页面的视频元素指定相同的 view-transition-name。
• 利用 JavaScript 监听 pageswap (页面离开前) 和 pagereveal (新页面显示时) 事件，通过 sessionStorage 存取视频的当前播放时间 (currentTime)。
• 虽然在切换瞬间会有轻微的音频/视频停顿 (Blip)，但视觉和逻辑上能达到较好的衔接效果。

4. 扩展应用与工具
• 该技术同样适用于 YouTube 等第三方 <iframe> 嵌入视频，只需结合相应的 Iframe 播放器 API (Iframe Player API) 提取和还原数据。
• 推荐参考 Chrome 官方演示和作者提供的 CodePen 示例进行深度学习。

author Chris Coyier

#优质博文 #前端 #锚点定位 #CSS #JavaScript #course #动画
介绍如何利用 CSS 锚点定位（CSS Anchor Positioning）实现元素跟随交互目标移动的“随动”（Follow-the-leader）模式。
una.im | Follow-the-leader pattern with CSS anchor positioning

AI 摘要：文章探讨了 CSS 锚点定位（CSS Anchor Positioning）API 的一种高级用法：通过动态更新 anchor-name（锚点名称），让一个定位元素（Follower）在多个潜在锚点之间平滑切换。这种“随动”模式不仅支持纯 CSS 的悬浮（hover）和焦点（focus）触发，还能结合 JavaScript 状态管理或最新的 ::scroll-marker 伪元素，实现极简且高性能的导航高亮、焦点跟随等视觉交互效果。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 技术核心原理 (The Technique)
• 动态锚点绑定：创建一个具有固定 position-anchor 名称的跟随元素，并在交互（如 :hover ）时将对应的 anchor-name 赋值给当前目标，实现定位目标的动态切换。
• 平滑过渡动画：利用 CSS transition 作用于 top、left 等属性，使跟随元素在不同锚点间移动时产生平滑的动画效果。
• 定位限制：目前 position-area 属性尚不支持动画过渡，因此实现平滑移动仍需依赖绝对定位属性（如 top, left, right, bottom）。

2. 实际应用案例
• 操作栏 (Action Bar)：结合 JavaScript 处理点击状态，并利用 CSS 处理悬浮和焦点态，实现一个类似“放大镜”或“高亮框”在导航项间流转的视觉效果。
• 轮播图滚动指示器 (Carousel Scroll Markers)：展示了纯 CSS 的方案，利用 ::scroll-marker 伪元素和 :target-current 伪类，在用户滚动时自动更新锚点名称，驱动指示器跟随。

3. 兼容性与进阶技巧 (Compatibility & Tips)
• 浏览器支持：该技术基于 CSS Anchor Positioning API，目前已在 Chromium 内核浏览器上线，并被列入 Interop 2025，WebKit (Safari) 也即将支持。
• 体验优化：通过伪元素技巧（Pseudo element trick）可以防止鼠标在元素间移动时因间隙导致的状态丢失。
• 性能优势：相比于传统依赖 JS 计算 getBoundingClientRect() 的方案，该方法将布局计算交给浏览器内核，性能更优且代码更简洁。

author una.im

#优质博文 #动画 #JavaScript #前端 #CSS
Anime.js v4.3 发布，引入强大的自动布局（Auto Layout）动画功能，支持平滑处理复杂的 CSS 布局变换。

这个真的好诶！跨框架造福前端人。

Introducing Auto Layout in Anime.js v4.3!

官方提供了 文档说明 和 发布日志，并在 CodePen 上发布了 示例集合

顺带一提，我很喜欢现在 Moe Copy AI 现在的内容提取功能～～现在可以直接选中提取推文串进行总结的，准备下个版本改改加一下常用的选择器，现在还是直接选中元素提取出来进行总结。

AI 摘要：Anime.js v4.3 版本正式推出了全新的自动布局（Auto Layout）功能，解决了长期以来 CSS 布局属性（如 display: flex/grid）难以实现平滑过度动画的痛点。该版本支持自动检测 DOM 位置变化、元素入场/出场动画以及子元素的交错效果。其 API 保持了以往的简洁性，支持任意缓动函数（Easing functions），并且动画过程可随时中断（Interruptible），兼容 Solid.js 等现代前端框架。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 核心功能亮点（Core Features）
• 支持对 display: flex、grid 以及 none 等属性进行动画化处理，实现无缝布局切换。
• 自动捕捉并平滑处理 DOM 元素的位置变化（Position changes）。
• 内置入场（Enter）与出场（Leave）动画支持。
• 提供可中断的动画（Interruptible animations）机制，确保交互响应灵敏。
• 支持子元素的交错动画（Staggered animations），提升视觉层次感。

2. 开发者资源与生态（Resources & Ecosystem）
• 确认了与 Solid.js 等框架的兼容性，具有广泛的框架适配潜力。
• 坚持 “极简 API（Dead simple API）” 的设计哲学，降低上手门槛。

author Julian Garnier

#优质博文 #React #性能优化 #JavaScript #course
How to Measure and Optimize React Performance | DebugBear：全面介绍了衡量和优化 React 应用性能的工具与技术，重点讲解了 React 19.2 的新特性以及各类运行时和构建时的优化策略。

AI 摘要：文章深入探讨了如何应对 React 应用随规模增长而出现的性能退化问题。内容涵盖了从 React 19.2 新引入的性能轨道（Performance Tracks）到经典的 Profiler 工具的使用方法。作者详细讲解了运行时优化（如记忆化、虚拟列表和状态管理）、并发特性（useTransition 和 useDeferredValue）、包体积控制、服务端渲染（SSR）以及最新的 React Compiler。最后，文章强调了在生产环境中使用真实用户监控（RUM）来持续跟踪性能表现的重要性。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 衡量 React 性能的工具
• React 性能轨道 (React Performance Tracks)：介绍了 React 19.2 引入的新功能，在 Chrome DevTools 的性能面板中可视化调度器、组件渲染及服务器请求。
• React DevTools Profiler：讲解了如何使用火焰图（Flame Chart）定位瓶颈，并利用“记录组件渲染原因”功能排除不必要的重绘。
• Profiler API 与 Chrome 性能面板：介绍如何通过代码编程式地收集渲染时长，以及如何在主线程时间线中分析 JavaScript 的执行耗时。

2. 运行时优化策略
• 记忆化：详细对比了 memo()、 useMemo() 和 useCallback() 的使用场景，强调避免对简单计算过度使用。
• 代码分割：利用 lazy() 和 Suspense 实现组件按需加载，减少初始加载负担。
• 列表虚拟化：推荐使用 react-window 等库处理长列表，仅渲染可视区域内的 DOM 节点。
• 状态管理优化：提倡状态共存（State Colocation）原则，并建议在复杂场景下使用 Zustand 或 Jotai 等支持选择器优化的轻量库。

3. 并发特性与编译器
• 并发渲染挂钩 (Concurrency Hooks)：讲解了 useTransition 如何标记非紧急更新以保持 UI 响应，以及 useDeferredValue 如何延迟处理从父级传递的频繁变动的值。
• React Compiler：介绍了 2025 年推出的自动记忆化工具，它能在构建时自动优化组件，减少手动编写 useMemo 的需求。

4. 交付与架构优化
• 包体积控制：使用 Lighthouse Treemap 和 Webpack Bundle Analyzer 分析依赖，提倡按需引入（Tree Shaking）以减少解析耗时。
• 服务端渲染与流式传输 (SSR & Streaming)：探讨了 renderToPipeableStream 带来的流式 HTML 交付，以及 React 服务端组件（RSC）如何通过零客户端 JavaScript 提升性能。

Debugbear

How to Measure and Optimize React Performance | DebugBear

Learn how to measure the performance of your React app and identify what's slowing it down.

#优质博文 #CSS #JavaScript #前端
Bytes I can delete after all this time：由于 CSS 和 JS 的进步，越来越多的技术我们不再需要了，Remy Sharp 分享了一份我们可以抛弃的技术清单。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. CSS 布局与样式增强
• 使用 text-underline-offset 属性轻松控制文本下划线的距离，无需再用复杂的伪元素模拟。
• 在 Flexbox 布局中直接使用 gap 属性，告别过去需要通过处理 margin (外边距) 来设置间距的繁琐操作。
• 采用原生 CSS 嵌套 (Nesting) 和在选择器内嵌套媒体查询 (Media Queries)，使样式结构更清晰且无需预处理器。
• 利用 clamp(min, variable, max) 实现流体响应式尺寸，简化了复杂的断点计算。
• 使用 content: open-quote 结合 q 标签实现根据语言自动适配的本地化引号。

2. JavaScript 语法与交互优化
• 采用可选的 catch 绑定 (Optional catch binding)，在不需要错误对象时直接写 catch { ... }，避免定义未使用的变量。
• 指针事件 (Pointer Events) 的普及使得开发者可以用一套逻辑替代旧有的 click (点击) 和 touch (触摸) 事件的混合逻辑。
• 弃用旧的性能黑科技，如使用 ~~ 或 | 0 取整，现代引擎下 Math.floor() 的可读性更高且性能不再是瓶颈。

3. 资源优化与现代格式
• AVIF 图像格式已获得全面支持，相比 JPEG 可轻松实现 50% 以上的体积缩减。
• 提供了使用命令行工具 avifenc 批量转换图片的实用脚本示例。

author Remy Sharp

Remysharp

Bytes I can delete after all this time

For the last few years my work-work has mostly focused on back end software (particularly around APIs). This meant that any front end work I was doing was for …

#优质博文 #前端 #JavaScript #V8 #benchmark #性能优化
JavaScript's for-of loops are actually fast (V8)：探讨现代 V8 引擎中 for-of 循环的性能表现，打破了开发者社区中关于其性能显著弱于传统循环的固有印象。作者建议现在除非是处理极端海量数据且对每一毫秒都敏感的场景，否则应优先使用语义更佳的 for-of 循环。

AI 摘要：这篇文章通过一系列严谨的基准测试（Benchmark），对比了 JavaScript 中六种不同的数组遍历方式。测试结果显示，在现代 V8 引擎（如 Chrome 143）中，曾经被认为因为迭代协议（Iteration Protocol）开销而较慢的 for-of 循环，现在的性能已几乎与缓存了长度的经典 for 循环持平。文章强调，虽然在大规模数组的首次执行中 for-of 可能存在优化延迟，但经过引擎预热（Warmup）后，其表现非常出色。作者建议在非极端性能敏感的场景下，应优先考虑 for-of 的开发易用性。

author Suren Enfiajyan

WaspDev Blog

JavaScript's for-of loops are actually fast (V8)

Running some benchmarks with different types of loops in JavaScript to see how well for-of loops perform compared to other loops.

#优质博文 #JavaScript #前端 #新动态
jQuery 4.0.0：时隔近十年，jQuery 发布了 4.0.0 正式版，带来了大量现代化改进，包括移除对旧版浏览器（IE 10 及更早版本）的支持、引入新特性以及优化内部实现

AI 摘要：本文宣布了 jQuery 4.0.0 正式版的发布。恰逢 jQuery 诞生 20 周年，该版本移除了对 IE 10 及以下旧版浏览器的支持，将源码从 AMD 迁移至 ES Modules (ES 模块)，引入了 Trusted Types (可信类型) 以增强安全性，并清理了大量过时的 API 和内部方法。虽然包含一些重大变更，但团队提供了迁移指南和插件，旨在让大多数用户能平滑升级。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 社区动态与版本概览
• 庆祝 jQuery 诞生 20 周年（2006-2026）。
• 这是近 10 年来的首个主要版本，包含重大变更但尽量保持升级平滑。
• 提供 升级指南 和 jQuery Migrate 插件 协助过渡。

2. 浏览器支持变更
• 移除 IE 10 及更早版本的支持，计划在 jQuery 5.0 移除 IE 11。
• 移除 Edge Legacy (旧版 Edge)、旧版 iOS (11 以下)、Firefox (65 以下) 及 Android 浏览器支持。

3. 架构现代化与安全性
• 源码迁移：从 AMD 迁移至 ES Modules (ES 模块)，改用 Rollup 打包，兼容现代构建工具。
• 安全增强：支持 Trusted Types (可信类型)，确保符合 require-trusted-types-for 等 CSP (内容安全策略) 指令。
• 异步加载：大多数异步脚本请求改用 <script> 标签以避免 CSP 错误。

4. API 变更与瘦身
• 移除过时 API：删除了 jQuery.isArray, jQuery.trim, jQuery.now 等已有原生替代方案（如 Array.isArray, String.prototype.trim）的方法。
• 原型链清理：从 jQuery 原型中移除了本用于内部的数组方法（如 push, sort, splice）。
• 移除魔法行为：删除了部分未公开的内部参数和过于复杂的“神奇”行为，Gzip 压缩后的体积减小了约 3 KB。

5. 事件与规范对齐
• 事件顺序对齐：Focus (聚焦) 事件顺序现在遵循 W3C 规范（顺序为：blur, focusout, focus, focusin），不再覆盖原生行为。
• Slim Build (精简版) 优化：进一步移除了 Deferreds (延迟对象) 和 Callbacks，体积缩减至约 19.5 KB (Gzipped)。

6. Ajax 与功能增强
• 支持二进制数据：允许通过 Ajax 传输 FormData 等二进制数据。
• 脚本执行逻辑：除非明确提供 dataType，否则不再自动执行脚本；不执行失败的 HTTP 响应脚本。

Jquery

jQuery 4.0.0 | Official jQuery Blog

jQuery: The Write Less, Do More, JavaScript Library

#优质博文 #JavaScript #性能优化
Why Object of Arrays (SoA pattern) beat interleaved arrays: a JavaScript performance rabbit hole

AI 摘要：本文通过基准测试对比了 JavaScript 中 Array of Objects (AoS) 和 Object of TypedArrays (SoA) 两种数据存储模式的性能。实验发现 SoA 模式比 AoS 模式快 4 倍。文章深入分析了这种性能差异并非仅源于 TypedArrays 的优势，而是多种因素共同作用的结果，包括对象属性查找开销、内存布局、缓存效率以及循环开销等。最终结论是，消除对象开销、减少循环迭代次数、利用属性访问提升（property access hoisting）以及 TypedArray 提供的性能保证是 SoA 模式性能更优的关键。

#优质博文 #JavaScript #Temporal #日期处理 #前端 #新特性
一篇 Temporal 的介绍。
Date is out, Temporal is in

AI 摘要：本文深入探讨了 JavaScript 内置 Date 对象的诸多缺陷，包括其不一致的解析行为、缺乏时区支持以及最重要的其作为可变对象 (mutable object) 导致的意外副作用。作者提出 Temporal API 是 Date 对象的完美替代方案，Temporal 作为命名空间对象 (namespace object)，提供了更直观、更细致的日期时间处理能力，并且其所有操作都返回新的不可变对象 (immutable objects)，彻底解决了 Date 的核心问题。文章鼓励开发者提前试用 Temporal，以推动其最终标准化和广泛应用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. JavaScript Date 对象的历史与痛点
• 构造函数行为不一致：Date 构造函数 (constructor) 在处理月份、年份推断和字符串格式时存在诸多怪癖和不一致性。
• 内部机制与命名误导：Date 实际上表示的是以毫秒为单位的 Unix 时间戳 (Unix timestamp)，而非纯粹的日期，容易引起混淆。
• 功能受限：缺乏对复杂时区、夏令时 (Daylight Saving Time) 以及非公历 (Gregorian calendar) 的原生支持。
• 对性能的影响：由于 Date 的局限性，开发者常需引入大型第三方库 (third-party library) 来解决问题，导致性能开销。
2. Date 对象的核心问题：可变性 (Mutabilty)
• 原始值 (Primitive Values) 的不可变性：解释 JavaScript 中数字、布尔值等原始数据类型 (primitive data types) 是不可变 (immutable) 的，变量赋值是创建副本。
• 对象 (Objects) 的可变性：解释对象是可变 (mutable) 的，变量存储的是引用 (reference)，对对象的修改会影响所有引用。
• Date 的可变性后果：Date 对象作为构造函数创建的对象，具有可变性。对 Date 实例 (instance) 的修改会直接改变原始对象，导致意外的副作用和难以追踪的错误。
• 代码示例：通过 addDay 函数的例子，展示了 Date 对象的可变性如何导致“今天”和“明天”变成同一个日期。
3. Temporal API 的设计理念与优势
• 取代 Date 的新方案：Temporal API 被设计为 Date 对象的全面替代品，旨在提供现代、健壮的日期时间处理能力。
• 命名空间对象 (Namespace Object) 设计：Temporal 不是构造函数，而是类似 Math 的命名空间对象，包含多个更专业化的类 (classes) 和方法。
• 丰富的日期时间类型：Temporal 提供了 Duration、Instant、PlainDate、PlainDateTime、ZonedDateTime 等多种类型，能够更精确地表示日期、时间及两者结合的不同概念。
• 核心优势：不可变性 (Immutability)：Temporal 对象的所有操作方法 (methods)，例如 add() 和 subtract() ，都不会修改原始对象，而是返回一个新的 Temporal 对象，从根本上解决了 Date 的可变性问题。
• 代码示例：展示 Temporal 如何通过返回新对象来避免副作用，并使得链式调用 (chaining methods) 成为可能，大幅提升了代码的清晰度和安全性。
4. Temporal API 的当前状态与未来展望
• 标准化进展：Temporal 提案已进入 TC39 标准化过程的第三阶段 (Stage 3)，已被推荐实现。
• 浏览器支持：已在 Chrome 和 Firefox 等主流浏览器的最新版本中落地实现。
• 开发者参与：鼓励开发者试用 Temporal 并提供反馈，以帮助完善最终规范。
• 未来前景：Temporal 将为 JavaScript 带来合理、现代的日期时间处理能力，彻底改变现有 Date 对象带来的困境。

author Mat “Wilto” Marquis

Piccalilli

Date is out, Temporal is in

Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.

#优质博文 #JavaScript #前端 #动画 #陀螺仪
这个我 2 年前（怎么都 2 年了卧槽）有做过类似的需求，也叫陀螺仪，iOS 必须请求陀螺仪权限才能用，除了这个缺点，整体上其实用起来挺舒服的。
Beyond the Mouse: Animating with Mobile Accelerometers

AI 摘要：文章详细介绍了如何在移动端利用加速计 (accelerometers) 和运动传感器 (motion sensors) 增强网页动画的用户体验。作者指出桌面端基于鼠标的动画在移动端会“失效”，并提出了通过 DeviceMotionEvent 和 DeviceOrientationEvent API 来弥补这一差距。文中涵盖了环境检测、权限处理（尤其强调 iOS 的用户手势要求）、DeviceMotion 和 DeviceOrientation 两种传感器的应用场景（运动跟踪与绝对角度）、如何将传感器数据映射到 CSS 变量以控制动画的旋转和位移，并最终实现更具沉浸感的交互效果。文章还探讨了如何将移动端的动态感受引入桌面端。

author Amit Sheen

#优质博文 #前端 #工程化 #性能优化 #JavaScript #BundleSize #TreeShaking #course
相当实用的好文，教你怎么减小打包体积（PS：初学者友好）
Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript

AI 摘要：本文提供了一份详细的逐步指南，旨在帮助开发者调查并缩减 JavaScript 打包文件的大小，以提高网页性能。作者通过一个实际项目案例，展示了如何使用打包分析器来识别大型或冗余的代码块。文章深入探讨了摇树优化（tree-shaking）的工作原理和局限性，特别是针对 CommonJS 模块和 * 导入模式。此外，还介绍了如何通过识别和移除重复库、以及处理由第三方依赖引入的传递依赖（transitive dependencies）来进一步优化代码体积，最终将示例项目的 bundle size 从 5MB 显著减少到 600KB 左右。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 初始项目设置 (Initial Project Setup)
• 作者创建了一个故意膨胀的示例项目（其 JavaScript 包大小为 5MB），作为演示如何调查和缩小打包体积的起点。
• 提供项目 GitHub 仓库链接，鼓励读者通过实际操作来验证文章内容。
2. 分析打包大小 (Analyzing Bundle Size)
• 介绍了打包分析器（bundle analyzer）工具的使用，例如 Vite 项目中的 Rollup Plugin Visualizer。
• 解释如何解读打包分析图（treemap），识别出项目中最大的代码块，尤其是供应商（vendor）代码和应用程序自身代码。
• 指出可以通过配置更改可视化模板（template），如使用火焰图（flamegraph），以获得不同视角的分析。
3. 调查流程 (Investigation Process)
• 确定要移除的包 (Step 1: Identify a Package to Eliminate)：通过打包分析图识别出体积巨大且可能存在问题的包，如 @mui 相关的包。
• 理解包 (Step 2: Understand the Package)：快速研究包的功能和用途，以理解其在项目中的角色。
• 理解包的使用方式 (Step 3: Understand the Usage of the Package)：通过代码搜索确定包在项目中的导入和使用模式，特别是是否存在 * 导入所有内容的模式。
• 确认问题 (Step 4: Confirm That This is the Problem)：通过临时注释掉问题包的导入代码并重建项目，验证其对打包大小的实际影响。
4. 摇树优化和死代码消除 (Tree Shaking and Dead Code Elimination)
• 解释摇树优化（tree-shaking）的原理：现代打包工具如何识别并移除未使用的代码（dead code）。
• 通过示例代码展示了 tree-shaking 在原生 ESM 模块中的有效性。
• 揭示了 * 导入模式（ import * as Something from 'library'）会阻止 tree-shaking 对外部库生效，导致整个库被打包。
• 提出解决方案：避免使用 * 导入，改为精确导入所需模块，以确保 tree-shaking 正常工作。
5. ES 模块和非摇树优化库 (ES Modules and Non-tree-shakable Libraries)
• 解释 JavaScript 模块格式（如 ESM, CommonJS）对 tree-shaking 能力的影响。
• 强调 ESM 格式易于 tree-shaking ，而 CommonJS 等旧格式则难以优化。
• 介绍 is-esm 工具，用于检查一个 npm 包是否为 ESM 格式。
• 以 lodash 库为例，展示了非 ESM 格式导致 tree-shaking 失败的问题，即使是精确导入特定函数也无济于事。
• 提供解决方案：使用库提供的精确子路径导入（import trim from 'lodash/trim'）来只引入所需部分，或在功能允许的情况下替换为原生 JavaScript 函数。
6. 常识和重复库 (Common Sense and Repeating Libraries)
• 指出在大型项目中，多个库可能实现相同功能，导致代码冗余。
• 以日期处理库 date-fns、moment 和 luxon 为例，展示了如何识别并移除这些重复的库。
• 强调选择替换库时需考虑 tree-shaking 能力、API 易用性、维护状态以及对打包大小的影响。
• 通过将 moment 和 luxon 的使用重构为 date-fns，显著减少了打包体积。
7. 传递依赖 (Transitive Dependencies)
• 解释传递依赖：当项目直接依赖的库又依赖了其他库时，这些间接依赖也会被打包。
• 介绍 npm-why 工具，用于追溯一个包的所有依赖路径，从而识别其作为传递依赖的来源。
• 以 @emotion 库为例，即使从项目中移除了直接使用，它仍可能通过 @mui 等库作为传递依赖存在。
• 说明移除传递依赖可能需要移除其上游所有依赖，这是一项需要权衡成本和收益的复杂任务。
• 通过将 @mui 组件替换为 Radix UI 组件并替换图标，成功移除了 @mui 及其传递依赖 @emotion。
8. 结果 (The Result)
• 总结了整个优化过程的成果：示例项目的 JavaScript 包大小从 5MB 显著减少到 600.98 KB。
• 指出尽管取得了巨大进步，但仍有进一步的优化空间，例如通过懒加载（lazy loading）处理 tiptap 和 prosemirror 等大型库。

author Nadia Makarevich

Developerway

Bundle Size Investigation: A Step-by-Step Guide to Shrinking Your JavaScript

A practical guide to analyzing and reducing JavaScript bundle size. Learn bundle analysis, fix tree-shaking issues, remove duplicate libraries, and otherwise optimize your React app's JavaScript size.

#优质博文 #前端 #Node #JavaScript #ESM #CJS #工程化
require(esm) in Node.js: implementer's tales

AI 摘要：本文是 Node.js 核心贡献者 Joyee Cheung 关于 require(esm) 功能实现细节的深度解析。文章聚焦于该功能在落地过程中，为兼容现有生态系统而必须解决的几个关键互操作性问题：包括如何处理“伪 ESM (faux-ESM)”包的 __esModule 标记、如何通过特殊导出 "module.exports" 支持非对象字面量的 CommonJS 导出、如何引入 "module-sync" 导出条件来支持双包 (dual package) 的平滑迁移，以及如何通过 process.getBuiltinModule() 避免不必要的顶层 await。文章揭示了看似简单的功能背后，为保持生态稳定性和性能所付出的复杂工程努力，并强调了社区协作在推动此类停滞计划中的关键作用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 伪 ESM (Faux-ESM) 的兼容性挑战
• 问题根源：许多为浏览器打包的库在 Node.js 端发布的是转译后的 CommonJS 代码（即“伪 ESM”），它们依赖 __esModule 标记来模拟 ESM 的命名空间行为。
• 兼容性断裂：如果这些包直接迁移到纯 ESM，其现有的转译后消费者通过 require() 加载时将因缺少 __esModule 标记而中断。
• 解决方案评估与选择：在无法直接修改不可变的模块命名空间对象的前提下，评估了多种方案（对象拷贝、Proxy、原型继承、ESM 门面模块），最终选择了通过创建一个内部 ESM 门面模块（使用 export * from 并额外导出 __esModule）的方案，以在保证正确性（保持实时绑定、身份和可枚举性）的同时，将性能开销降至最低（约 2-4%）。

2. CommonJS 特殊导出模式的兼容
• 导出形状不匹配：CommonJS 允许 module.exports 被重新赋值为任何值（如一个类），而 ESM 的默认导出位于命名空间的 default 属性下，这导致迁移后 CommonJS 消费者无法正确获取导出值。
• 特殊导出方案：引入了名为 "module.exports" 的字符串字面量特殊导出。ESM 模块可以通过 export { Klass as "module.exports" } 来显式指定 require(esm) 应返回的值，从而无缝兼容旧的 CommonJS 消费者，而无需改变 ESM 消费者的导入方式。

3. 双包 (Dual Package) 的迁移路径
• 条件导出的演进：为了在支持旧版 Node.js（仅 CommonJS）的同时，为新版 Node.js 提供 ESM，包作者曾使用 "node" 条件指向 CommonJS。
• 新条件的引入：由于生态中已有的 "module" 条件常指向无法在 Node.js 直接运行的打包后代码，Node.js 引入了新的 "module-sync" 条件，专门用于指向可在 Node.js 中同步加载的 ESM 源文件，作为向纯 ESM 包过渡的临时方案。

4. 同步内置模块检测
• 问题背景：在 ESM 中动态检测内置模块（如 node:os ）过去只能通过异步的 import() 实现，这迫使代码使用顶层 await。
• 同步 API 的引入：为解决此问题并方便工具链（如 TypeScript），Node.js 引入了 process.getBuiltinModule() 这个同步 API，允许在 ESM 中同步获取内置模块引用，减少了对顶层 await 的依赖。

5. 底层实现与同步化
• 概念模型：require(esm) 的简化逻辑是同步地获取、链接、评估 ESM 模块，然后返回其命名空间。
• 同步化重构：实际的挑战在于与异步 import 共享的模块缓存和加载流程可能引发竞态条件。随着 Node.js 生态对同步模块加载的坚定依赖，原先为未来异步扩展设计的加载器例程被简化为完全同步，这既消除了竞态，也移除了不必要的异步开销。

6. 模块评估的可重入性保障
• 规范限制：ECMAScript 规范规定，一个正在评估中的 ESM 模块不能被再次评估。
• 循环依赖处理：当模块依赖循环跨越 ESM 和 CommonJS 边界时，Node.js 通过检测并抛出 ERR_REQUIRE_CYCLE_MODULE 错误来防止违规的重入评估。未来的 “Deferring Module Evaluation” 提案可能允许安全地跳过同步重入评估，从而支持此类循环。

author Joyee Cheung
由 @hyoban 投稿

Joyee Cheung's Blog

require(esm) in Node.js: implementer's tales

In earlier posts, I wrote about reviving require(esm) and its iteration process. The idea seems straightforward once you grasp the ESM semantics, but battle‑testing revealed interop edge cases rooted

#优质博文 #CSS #JavaScript #前端 #视图转换 #course
Different Page Transitions For Different Circumstances

AI 摘要：文章探讨了如何利用 Web API 中的 View Transitions （视图过渡）API 为多页应用程序（MPA）创建差异化的页面切换动画。作者通过 JavaScript 事件监听 pageswap 和 pagereveal，结合 e.viewTransition.types.add() 方法，实现根据特定 URL 条件设置自定义视图过渡类型。接着，文章演示了如何在 CSS 中使用 :active-view-transition-type() 伪类，针对不同的视图过渡类型应用不同的动画效果，从而覆盖默认过渡动画。最后，作者分享了一些关于这种 JS 与 CSS 协同控制的见解，并提及了相关学习资源和浏览器兼容性信息。

以下是方便搜索索引的大纲(AI 生成)，请读原文

1. View Transitions API 基础
• DOM 事件监听: 介绍 pageswap 和 pagereveal 这两个事件，它们在页面卸载和加载时触发，并提供 e.viewTransition 对象用于自定义视图过渡。
• 条件设置过渡类型: 讲解如何通过 JavaScript 在 pagereveal 事件中，根据 document.location.pathname 等条件，使用 e.viewTransition.types.add() 方法为当前页面设置一个自定义的视图过渡类型。

2. 默认页面过渡动画配置
• CSS 定义默认动画: 演示如何使用 ::view-transition-old(main) 和 ::view-transition-new(main) 伪元素，结合 @keyframes 定义网站的默认页面切换动画效果，如滑动出入。
• 元素命名: 强调需要为要过渡的元素（如 <main> 内容区）设置 view-transition-name 属性，以便在 CSS 中精准控制。

3. 定制特定页面的过渡动画
• CSS 覆盖默认动画: 展示如何利用 :active-view-transition-type() CSS 伪类，根据在 JavaScript 中设置的自定义视图过渡类型，为特定页面定义一套专属的动画，从而覆盖默认的动画效果。
• 动画优先级: 解释自定义类型动画如何通过更高的 CSS 特异性（specificity）来覆盖默认动画。

4. 学习资源与浏览器支持
• 参考资料: 推荐 Bramus 的《Cross-document view transitions for multi-page applications》作为进一步学习的优秀资源。
• CSS 类型声明: 提及 view-transition-types CSS 属性，但作者对其具体用途表示疑问，推测可能用于限制允许的过渡类型。
• 浏览器兼容性: 指出 JavaScript ViewTransitionTypeSet 和 CSS :active-view-transition-type() 在 Chrome 和 Safari 中得到支持，Firefox 则需开启 flag（标志）。

author Chris Coyier

Frontend Masters

Different Page Transitions For Different Circumstances

I feel like common usage for multi-page view transitions is to set up a general system for them that applies generally to all pages and elements, then let it ride.

#优质博文 #前端 #CSS #JavaScript #GSAP #动画
好工具：Paths & Control Points
文章：Building Responsive, Scroll-Triggered Curved Path Animations with GSAP | Codrops

AI 摘要：这篇博文详细介绍了如何使用 GSAP (GreenSock Animation Platform) 的 ScrollTrigger 和 MotionPath 插件，实现响应式的、滚动触发的曲线路径动画。文章不仅阐述了核心的设计挑战和 Bezier 曲线原理，还提供了动态计算控制点、构建 SVG 路径、动画插值以及响应式处理的完整代码示例。更令人惊喜的是，作者还分享了一个实用的可视化配置工具，让开发者能够拖拽控制点实时调整曲线，极大地提升了开发效率和精度。最后，文章还探讨了可访问性 (Accessibility) 和生产工作流程，为读者提供了全面的解决方案。

author Ross Anderson

codepen.io

Paths & Control Points

...

#优质博文 #前端 #html #javascript #css #tools #AI
Useful patterns for building HTML tools

AI 摘要：Simon Willison 在这篇文章中总结了构建 HTML 工具的核心模式：保持单文件、避免 React、使用 CDN 加载依赖、利用复制粘贴、调试工具、URL 与 localStorage 持久化、收集 CORS API、直接调用 LLM、文件操作、可下载文件、Pyodide 与 WebAssembly、复用已有工具以及记录开发过程。通过这些模式，作者在两年内用 LLM 生成了 150+ 个实用工具，并提供了大量示例与源码链接。

Simon Willison’s Weblog

Useful patterns for building HTML tools

I’ve started using the term HTML tools to refer to HTML applications that I’ve been building which combine HTML, JavaScript, and CSS in a single file and use them to …

#优质博文 #react #前端 #JavaScript #Astro
还是看业务复杂程度～不过我觉得 Astro 超好用www
Why use React?

AI 摘要：作者以一种反思式的语气询问开发者——我们为什么要在浏览器里使用 React？文章从技术惯性、前后端职责演变、开发者文化到框架优先级等多个角度分析 React 的盛行原因与隐形代价。作者最终的立场是：在服务端使用 React 无可厚非，但在客户端运行 React 则可能损害用户体验。若仅因文化或团队习惯而加载庞大的 React 库，不如考虑 Preact、Astro 或直接用原生 JavaScript（vanilla JS），以提升性能和用户友好度。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. 选择 React 的现象与动机
• 多数开发者使用 React 并非出于设计或性能考虑，而是出于团队惯性或工作要求。
• 作者将“被强制使用的技术”定义为企业级软件（enterprise software）。
• 惯性（Inertia）被认为是 React 持续流行的首要原因。

2. 前端与后端的边界变化
• 过去前端与后端有清晰分工，如 HTML、CSS、JavaScript 属于前端，PHP、Ruby、Python 属于后端。
• 随着 JavaScript 可在服务器端执行，开发者常忽视客户端代码的性能代价。
• 客户端执行环境有限，文件体积和加载时间至关重要，而服务端则可通过硬件“买掉”性能瓶颈。

3. React 开发者文化与生态迁移
• React 从最初强调虚拟 DOM 到后来因组件化架构与 JSX 被开发者喜爱。
• React 不再只是前端库，而是类似 Rails、Django 的全栈式生态。
• 这种文化层面的认同让开发者倾向于“全用 React”，即便这并不总是对用户友好。

4. 框架优先级与替代方案
• Next.js 推行服务端渲染（SSR），但仍倾向输出同样的客户端 React 代码，造成资源浪费。
• Astro 框架提出“最小化客户端 JavaScript”的思路，保留 JSX 作者体验但减轻用户负担。
• React/Next/Vercel 生态的惯性使这种思路被边缘化，但 Astro 展示了另一种可能。

5. 回归问题：为什么在浏览器使用 React？
• 若使用 React 只是团队协作或文化原因，可仅在服务端保留 React。
• 前端若非单页应用（SPA），应尽量减少 JavaScript 框架负担。
• 若确需前端状态管理，可考虑 Preact 或探索原生 JavaScript 的能力。
• 作者倡导：让框架留在服务器，充分利用浏览器本身的强大功能。

author Jeremy Keith

Adactio

Why use React?

Or, more precisely, why use React *in the browser*?

#优质博文 #前端 #调试技巧 #JavaScript #CSS #Chrome
断点是真的很重要。严肃学习！
Six Things I Bet You Didn't Know You Could Do With Chrome's Devtools, Part 1

AI 摘要：本文由 Rachel 撰写，灵感来自 TechBash 会议中 Mike Rapa 的讲座，介绍了 6 个鲜为人知的 Chrome DevTools 技巧。本篇是 Part 1，涵盖前三个内容：用 console.time() 和 console.timeEnd() 精准计时函数执行、利用 DOM Breakpoints 实时捕捉元素变化，并自动暂停脚本运行、以及用 monitor() 在控制台监听任意函数调用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 文章背景与启发来源
• 作者参加 TechBash 会议，受到 Mike Rapa 的 DevTools 演讲启发。
• 本文专注于 Chrome DevTools 的 3 个隐藏功能，Firefox 部分功能支持略有不同。
• 计划分上下两篇，本篇为 Part 1，介绍前三个功能。

2. 计时函数性能监控
• 介绍 console.time() 与 console.timeEnd() 的使用，可精确测量代码块执行耗时。
• 提及 console.timeLog() 用于中间打印时间进度。
• 举例说明结合 React Hook 使用场景，展示暂停与超时逻辑的时间追踪方案。
• 来源：Mike Rapa 的演讲及 Github 仓库。
• 支持情况：原生 JS 特性，各浏览器均可使用。

3. 通过 DOM Breakpoints 检测元素变化
• 介绍如何在 Chrome Elements 面板中为任何 DOM 元素设置 "Break on" 断点。
• 当该元素属性、子树或节点被修改时，自动暂停脚本执行。
• 可快速定位导致页面 UI 异常的脚本。
• 提供 Stack Overflow 示例，展示实际操作方法。
• 支持情况：主流浏览器支持，Firefox 行为略有差异。

4. 使用 monitor() 监听任意函数调用
• 在控制台中可用 monitor(functionName) 监控任意函数调用及其参数。
• 帮助调试第三方脚本或不易插入 console.log() 的代码。
• 示例：sum(1,2) 会在控制台输出调用信息。
• 来源：Google DevTools Utilities 文档。
• 支持情况：仅支持 Chrome。

5. 预告与后续主题
• 作者计划在 Part 2 中讨论剩余三项：可视化编辑网页（WYSIWYG）、记录与重放用户操作、按需限速网络请求。
• 鼓励读者关注后续更新、尝试在实际项目中运用这些技巧。

author Rachel Kaufman

Rachel Kaufman, developer

Six Things I Bet You Didn't Know You Could Do With Chrome's...

Hidden and not-so-hidden tools that will make your life easier.

#优质博文 #CSS #3d #前端 #JavaScript
How to Create 3D Images in CSS with the Layered Pattern

AI 摘要：本文介绍了如何通过 CSS 3D transform 与 “layered pattern（分层模式）” 创建栩栩如生的 3D 图片效果。作者从 HTML 结构设计、CSS 3D 场景设置、层间位移计算、亮度与饱和度调节到交互控制面板（含 JavaScript）完整展示了创建流程。文章强调了分层视觉的本质是在二维平面中利用透视与光影制造立体幻觉，并通过 perspective、translateZ()、filter 等技巧实现动态的 3D 效果。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 3D CSS 概念与分层模式简介
• 概述 CSS 3D 的发展历史，从 2009 年起被 W3C 规范化
• “layered pattern（分层模式）”通过多个图层叠加制造立体幻觉
• 提示需理解 CSS perspective 与坐标系 (x, y, z) 概念

2. HTML 结构设计
• 使用 <div class="scene"> 包裹整个 3D 场景
• 建立多层重复图像 (.layer) 并以自定义属性 --i 标识层级
• 通过 aria-hidden="true" 处理无障碍可访问性问题
• 提及未来可通过 sibling-index() 和 sibling-count() 优化层索引

3. CSS 构建 3D 场景
• 设置 .scene { perspective: 1000px } 以控制深度
• 启用 transform-style: preserve-3d 让所有层在三维空间可见
• 通过 --layers-count 和 --layer-offset 控制层数与间距
• 利用 translateZ(calc(var(--i) * var(--layer-offset))) 实现纵深位移
• 计算标准化变量 --n 以动态调节亮度与饱和度实现光影变化
• 使用 filter: brightness() 与 filter: saturate() 增强立体层次
• 布局上将 .layer 与 .layers 设为 position: absolute; inset: 0 覆盖叠加

4. 动画与交互控制
• 通过 @keyframes rotate3d 添加旋转动画模拟立体旋转
• 创建交互控件（input range 滑块与按钮）控制 perspective、层间距与旋转角度
• 使用 JavaScript 监听输入事件动态更新 CSS 自定义属性与图像内容
• 示例函数 updateRotation() 绑定 X/Y 旋转值，支持图片更换

5. 附加功能与扩展
• 控制面板提供图像切换与参数调节体验
• JS 实现与视觉绑定，删除原有动画以改为实时控制
• 结尾展示延伸案例 “3D CSS steak”，说明同一技术可应用于更复杂视觉模型

6. 小结与启示
• 3D CSS 的核心在于“二维模拟三维”的视觉幻象
• 有效结合 transform、perspective 与 filter 可获得高性能的 3D 效果
• 分层模式可扩展用于文字、图片、UI 元素等多种设计

author Sunkanmi Fafowora

#前端 #JavaScript #优质博文 #趣站 #考古
好名字
JavaScript Engines Zoo：汇总 100 多个 JS 引擎的数据、性能与发展史，附带 Dockerfiles 可直接实验。