AI 摘要：本期 Node Weekly（第588期，2025年7月29日）带来了 JavaScript 生态的最新动态，内容涵盖众多 JavaScript 运行时历程的重要综述、TypeScript 与 Node.js 技术升级、安全及工具更新，以及业界有趣开发实践。文章帮助开发者全面了解前后端生态进展，关注实用工具及 AI 集成，并强调代码安全与生产力提升。

1. 生态与社区动态
• The many, many, many JavaScript runtimes of the last decade 长文回顾了近十年间主要 JavaScript 运行时（Runtime）与引擎的发展，包括 Node.js、云平台专有运行时及多种不那么知名的方案，为开发者补全 JS 生态知识。
• TypeScript 5.9 RC 发布，新增 import defer 及 --module node20 等特性；Node.js 生态工具链持续跟进最新规范。
• Google 推出 OSS Rebuild 项目，目标通过包与上游工件比对增强 npm 等开源生态的安全性。
• npm 生态持续遭受攻击，is 包通过通过拼写钓鱼域名劫持进行钓鱼。
• HTML 2025 状况调查开启，旨在收集前端开发者对 HTML 发展状况的意见。
• 一名开发者声称讨论 tabs 与 spaces 的争论趋于结束，主流语言倾向使用 spaces。
• 用 Node.js 和 Postmark 构建的电子邮件控制的 Game Boy 模拟器
• es-toolkit 已成为 Lodash 的 100% 兼容替代方案，突出生态兼容性成果。

2. 技术专题与实践分享
• 介绍 Unix 域套接字（Unix Domain Sockets）在 Node.js 内部进程通信（IPC）中的优势，约可降低 50% 延迟，相较 TCP loopback 更高效。
• 采访 Bun 作者，解析 Bun 作为 Node.js 生态“替代品”的兼容性挑战与工程实践。
• 文章详述如何构建暴露数据资源给大语言模型（LLM）的 Node.js MCP 服务器。
• 探讨 TypeScript 多仓库（multi-repo）间的类型安全问题及解决方法
• 分析 JavaScript 逻辑赋值操作符的语法进步及实际开发中带来的便利。

3. 代码与工具
• AudioTee.js：为 Node.js 捕捉 macOS 系统音频输出，并以 PCM 格式定期输出。
• Transformers.js 3.7：在浏览器与 Node.js 侧支持 ONNX 预训练模型推理，v3.7 增加了 Voxtral（语音转录及音频理解）、LFM2 和 ModernBERT 支持。
• match-sorter 8.1：为数组筛选和排序提供确定性算法，便于开发者实现可预期的最优匹配排序。
• 其他值得关注的工具/库更新：Inquirer 12.9（终端交互式输入）、Node File Trace 0.30（依赖追踪）、MongoDB Node.js Driver 6.18、node-rate-limiter-flexible 7.2、Ghost 6.0 RC、@google-cloud/bigtable 6.2、Axios 1.11、TIFF 7.1、ESLint v9.32.0 等等。

Buttondown

The many, many, many JavaScript runtimes of the last decade

This last decade has seen an inundation of new JavaScript runtimes (and engines in equal measure), enabling us to run JavaScript in all manner of contexts...

AI 摘要：本文批判性地回顾了 HTTP 多个版本发展之后，Web 表单（forms）在处理和数据编码方式上依旧混乱与落后。作者剖析了现有的两种表单数据编码方式（application/x-www-form-urlencoded 和 multipart/form-data）存在哪些规范不统一、实现分歧和技术缺陷，以及标准缺失导致开发体验极差；尽管 HTTP 协议多次进化，表单数据交互方式却数十年未有本质改进。文章最后指出，业界对更优的数据编码格式需求迫切，当前的局面已难以令人满意。

1. HTTP 1.1 及标准库开发的挑战
• HTTP 1.1 并非设计良好，RFCs 更像现状描述参考而非真正规范文档
• 实现 HTTP 协议过程中遇到种种格式和约定的古怪乃至异常细节，增加开发复杂度
• 常见如 chunked transfers 的十六进制长度、状态行中的强制空格等非直观规则

2. 表单数据编码现状与问题
• application/x-www-form-urlencoded
• 历史悠久但缺乏清晰权威的完整规范，依赖 URI 查询参数语法（RFC 3986）
• 编码方式不唯一：对于特殊字符、非 ASCII 字符及数组字段，各实现可能不同
• 对文件与大体量（非 ASCII）数据极为低效（尺寸膨胀、难处理），仅适合简单字段
• 标准文件来源分散且部分已废弃（如 RFC 1866）
• multipart/form-data
• 基于 MIME，规范为 RFC 7578
• 通过分隔符（boundary）串联各部分；分隔符任意但需保证不与正文冲突，增加复杂度
• 无内容长度（Content-Length）头，需流式查找分界符，解析困难导致代码容易出错
• 各字段内容 Content-Type 可以随意宣称，可信度低
• 同样缺乏对数组、对象等复杂数据结构的直接支持，序列化无统一方案
• 不适合前端与后端所有技术栈无缝协作，且导致报文冗余、解析低效

3. 表单标准规范缺失与业界影响
• RFC 文档对主流表单格式覆盖不全，甚至可实现 HTTP 服务器时完全不支持表单却依旧合规
• 主流浏览器始终只支持上面两种，阻碍更现代、结构化的数据格式如 JSON 的广泛采用
• 早年曾有 JSON、XForms 作为新方案提出，但均未流行或长远落地

4. 现实与展望
• 浏览器与后端互操作受限，文件与字段混合上传尤为无解
• 新协议如 tus，仅可用于纯文件上传场景；JSON 提案因多方面原因未标准化
• 表单机制停滞，严重滞后于网络协议和数据交换发展的需求

AI 摘要：本期 JavaScript Weekly 聚焦于 JavaScript 生态的最新动态，包括高性能工具库 es-toolkit 对 Lodash 的取代、React/Next.js 复杂项目的重构建议、WebAssembly (WASM) 与 DOM 支持现状、npm 供应链安全问题、以及一系列重量级项目和社区新闻。此外，涵盖新版本发布、实用代码与工具、开发者经验反思、前端性能提升案例和社区趣闻等，内容丰富，覆盖了当下前端开发的热点话题和实践建议。

1. 社区与安全动态
• 细节剖析近期 JavaScript 生态的供应链安全事件，如 npm 上 is 包被劫持导致的恶意代码传播，以及 stylus 包下架风波。
• 介绍供西班牙语开发者使用的 EsJS，探索非英语语境下的 JavaScript 编程创新。
• 对比 Biome 与 Oxlint 两款 Lint 工具，在类型智能与速度上的表现差异。

2. 工具与库更新
• es-toolkit：兼容 Lodash、更快且更小（97% 体积减小），被 Storybook、CKEditor、Nuxt 推荐，利于代码体积优化。
• Bun v1.2.19：现在支持带有 bun install 的 pnpm 风格的隔离 node_modules ，提供交互式依赖更新功能等。Bun 1.3 也有望很快推出。
• React Native Reanimated 4.0、PythonMonkey 1.2、Oxlint、Jasmine 等多款工具新版本。
• Transformers.js 3.7：支持在浏览器借助 ONNX 运行时运行预训练模型，加入语音转录及 LFM2 和 ModernBERT 支持。
• npq：包安装前安全审核，集成 Snyk 漏洞库并审核包活跃度，有助于抗击恶意依赖。
• Untitled UI React：基于 Tailwind CSS 和 React Aria 的大型 UI 组件库，原生开源并配备 PRO 版本。
• ts-regexp：为 TypeScript 带来严格静态类型的正则表达式（RegExp）。 #正则
• ApexCharts 5.3：流行的 JS 图表库。现在具有数据解析功能 ，可将原始数据对象直接映射到图表。 演示
• vue-multiselect 3.3：Vue 的通用选择 / 多选 / 标记组件。 #vue
• eslint-plugin-unicorn 60.0：100+ 有用的 ESLint 规则集中在一个地方。

3. 实用开发经验与案例分享
• React/Next.js 开发最佳实践：避开 useState 与 useEffect 过度使用、数据嵌套、表单扩展及隐式状态共享陷阱。
• WASM 与 DOM：讨论 WebAssembly 直接访问 DOM 的前景，以及现代工具链对 WASM 生态的支持改进。
• 移除 SPA 的现代 CSS 实践建议，呼吁回归服务端渲染和真实页面体验利于性能与交互。
• Next.js 站点迁移到 Eleventy 提升 24% 性能，展示静态站点生成器的新优势。
• JS Event Listener 参数处理、构建字体搜索引擎、Three.js+WebGPU 的文本破坏交互等创新项目实践。

4. 社区趣闻与行业动向
• SVG 图形教程，鼓励开发者解锁矢量图形能力。
• HTML 2025 状态调查开放，鼓励开发者参与获取前沿信息。
• Google 推出 OSS Rebuild 以提升开源软件安全，MDN 庆祝 20 周年，前端表单规范问题(三个 HTTP 版本之后，表单仍然一团糟)

Socket

npm ‘is’ Package Hijacked in Expanding Supply Chain Attack -...

The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.

AI 摘要：本文深入分析了 WebAssembly（WASM）与 Web 平台集成特别是直接访问 DOM（文档对象模型）的现状和未来可能性。作者强调，Wasm 自身并没有也可能不会获得直接 DOM 支持，但它自诞生以来就通过需要适量 JavaScript glue code（粘合代码）间接地实现了对 DOM 及其他 Web API 的访问。通过工具链和标准的持续推进，Wasm 集成会更加高效，但对纯“Wasm 直接操作 DOM”并无迫切需求或业界共识。开发重点应聚焦于优化性能和开发体验，而不是消除一切 JavaScript，Wasm 与 JavaScript 的共存将长期持续。

AI 摘要：Chrome 和 Edge 团队宣布 CSS Masonry 布局已在 Chrome/Edge 140 中开放开发者测试。这种新的 CSS 布局模式旨在更有效地创建类似砖块的自适应内容排列，弥补了 CSS Grid、Flexbox 和 Multi-column 的不足。文章详细介绍了 Masonry 的概念、与现有布局的对比、两种正在讨论的语法提案，并提供了如何启用和使用该功能的具体代码示例，鼓励开发者积极测试并提供反馈，以帮助最终确定其 API 设计。

1. 社区动态
• 发布与反馈征集：Microsoft Edge 和 Google Chrome 团队宣布 CSS Masonry 已在 Chrome 和 Edge 140 中开放早期开发者测试，并强调开发者反馈对完善规范和语法的重要性。
• 如何测试：详细说明了在 Chromium 浏览器（Chrome 或 Edge 140+）中通过 about:flags 页面启用 "CSS Masonry Layout" 实验性功能的步骤。
2. CSS Masonry 概述
• 什么是 Masonry：解释了 Masonry 布局模式能够创建类似砖块的紧凑排列，与 CSS Grid、Flexbox 或 Multi-column 不同，它在某个方向上不严格定义轨道，允许内容项自动填充可用空间，特别适用于视觉密集型页面。
• 现有方案及局限性：指出现有通过 JavaScript 库或 CSS Grid/Flexbox/Multi-column 模拟 Masonry 的方法存在性能问题、代码复杂、维护困难以及无法完美实现 Masonry 特性等局限性。
• CSS Masonry 的现状：介绍了 CSS 工作组正在《CSS Grid Level 3》规范中起草 Masonry，并讨论了两种正在考虑的语法提案：独立的 display: masonry 和集成到 CSS Grid 中的 grid-template-*: masonry。
3. 使用 CSS Masonry
• 创建 Masonry 容器：通过代码示例展示了如何使用 display: masonry 和 grid-template-columns 或 grid-template-rows 来创建列式或行式的 Masonry 容器。
• 使用默认轨道尺寸：介绍了 Chromium 实现中 Masonry 的新默认轨道尺寸 repeat(auto-fill, auto)，允许在不明确定义轨道尺寸的情况下创建美观的 Masonry 布局。
• 尝试 Masonry 缩写属性：介绍了正在讨论中的 masonry 缩写属性，可用于同时定义 Masonry 方向和轨道定义，简化了语法。
• 自定义轨道尺寸：展示了 Masonry 在定义不同数量和大小的布局轨道方面的灵活性。
• 跨越多轨道：说明了内容项可以跨越多个轨道，这对于突出重要内容或实现全宽布局非常有用。
• 微调项目放置：介绍了 item-tolerance（原名 item-slack）属性，用于控制项目放置的敏感度，使其更好地匹配源顺序或布局需求。
• 其他可用属性：提到 Masonry 容器可以与 CSS Grid 的其他属性（如 grid-row、grid-column、order 等）结合使用。
4. 反馈与展望
• 呼吁开发者反馈：再次鼓励开发者通过 demos、源代 码和实际应用来测试 Masonry，并通过评论相关 Issue 或在社交媒体上分享反馈，以帮助塑造最终的 API。
• 已知限制：列举了当前 Chromium 实现中存在的已知限制，包括密集填充、反向放置、子网格支持、DevTools 支持等，并鼓励开发者报告 Bug。

Chrome for Developers

Brick by brick: Help us build CSS Masonry  |  Blog  |  Chrome for Developers

Help test the proposed masonry syntax in Chromium.

AI 摘要：Chrome DevTools 139 版本专注于提升开发者体验、生产力及工具可靠性，修复了大量已知问题并增强了测试覆盖率。此次更新亮点包括在 AI 辅助中支持上传图片以提供视觉上下文，在 Network 面板中新增请求头列，以及对核心面板如 Performance、Sources 和 Elements 的持续改进，同时优化了各种调试和辅助功能，旨在提供更流畅、更稳定的开发工作流程。

1. 工具性能与稳定性改进
• 核心开发体验提升: 本版本优先提升产品卓越性，解决了大量已知问题，包括长期存在的视觉故障、可用性问题和设计不一致，将开放问题数量减少了 27%。
• 幕后测试覆盖率增强: 大幅提升了 DevTools 的测试覆盖率，调查并修复复杂的测试失败，并将测试相关问题减少了 54%，从而带来了更流畅、可靠和高效的日常调试和开发工作流程。

2. AI 辅助与智能功能
• AI 辅助支持图片上传: 在 AI 辅助面板中，现在不仅可以自动截屏，还可以上传任意图片到与 Gemini 的聊天中，为提示提供额外的视觉上下文。
• Google I/O 2025 亮点整合: 强调了在 Google I/O 2025 中展示的新 DevTools 功能，包括 Sources 面板连接工作区并保存修改、Gemini 驱动的 CSS 修改和保存、查询性能洞察、自动标注性能发现，以及新的性能洞察功能（重复 JavaScript 和遗留 JavaScript）。

3. 开发者工具面板更新
• Network 面板增强: 在 Network 面板中，现在可以右键点击请求表格中的列名，并选择多个请求头将其添加为列。
• Application 面板改进: 清除 IndexedDB 对象存储时，现在会显示确认对话框，以防止不可逆的操作。
• Sources 面板优化: Logpoints 和条件断点旁边的代码行徽章现在在悬停时会显示相应的日志消息或条件工具提示。
• Performance 面板新洞察: "Layout shift culprits" 洞察现在显示未设置大小的图片链接；"LCP request discovery" 洞察现在显示最早起始点之后的图片加载延迟；修复了部分用户本地存储的过期节流设置格式；事件日志过滤速度得到提升。
• 动画面板调整: 弃用了预览截图功能，因为点击预览动画组提供了类似且更好的体验。
• 辅助功能改进 (Accessibility): Sources > DOM 断点侧边栏（如果存在）添加了 aria-labels；修复了 Console 中 Live expression 文本字段内的 Shift + Tab 键盘导航问题；Settings 现在支持 Cmd/Ctrl + +/-/0 缩放快捷键；Elements > Styles 中的 CSS 提示和警告图标以及 Angle clock 现在可以通过键盘聚焦。

Chrome for Developers

What's new in DevTools, Chrome 139  |  Blog  |  Chrome for Developers

A more reliable and productive Chrome DevTools, support for arbitrary image upload in AI assistance for styling, and more.

AI 摘要：npm 不慎移除了被广泛使用的 Stylus 库，导致全球开发者构建和 CI/CD 流程中断。移除原因是 Stylus 的一位维护者发布了无关的恶意软件包，导致其账户及关联软件包被禁，Stylus 库也因此受牵连。目前，npm 和 GitHub 正在努力恢复 Stylus，并提供了临时解决方案以帮助开发者通过直接引用 GitHub 仓库或使用 overrides 功能来恢复其项目。

1. 事件总览
• Stylus 库被意外下架： 全球最大的软件注册表 npm 意外地移除了所有版本的 Stylus 库，并替换为一个“安全占位页面”，导致依赖该库的全球构建和 CI/CD 流程中断。
• 开发者与维护者回应： Stylus 开发者 Lei Chen 在 GitHub 和 X（原 Twitter）上声明 Stylus 被 npmjs 意外禁用，并寻求帮助以尽快恢复。
• 广泛的影响： 每周近 300 万次下载的 Stylus 库被下架后，大量依赖它的项目如 typescript-plugin-css-modules、Frappe/ERPNext 和 Angular 12 等的构建相继失败，引发开发者不满和担忧。
• 事件真相揭示： 供应链安全公司 Mend.io 的安全研究员 Tom Abai 调查发现，Stylus 库本身是干净且功能正常的。问题在于 Stylus 的一位维护者“panya”发布了三个无关的恶意软件包（如包含依赖混淆漏洞的 PoC），导致其账户被封禁，进而关联的 Stylus 库也被错误地移除。
• 临时解决方案： 针对 Stylus 库被移除，开发者可采取以下临时措施：
• 在 package.json 的 dependencies 中动态引用 GitHub 上的 Stylus 特定版本（例如："stylus": "github:stylus/stylus#version-you-need"）。
• 使用 npm v8.3.0 及更高版本支持的 overrides 功能来指定 Stylus 版本。
• 在应用上述更改后，需清除 npm 缓存（npm cache clean --force）。
• 维护者建议： Stylus 维护者 Lei Chen 确认 Stylus 不含恶意代码，并指出 npmmirror.com（由阿里巴巴赞助的非营利镜像）已恢复对该库的访问。他建议受影响的公司重新评估 npmjs 与 npm mirror 的关系，并设计更可靠的开发流程。
2. 安全事件分析
• 恶意行为与误伤： 事件起因是 Stylus 维护者之一“panya”发布了恶意软件包，但这些恶意软件包与 Stylus 库本身无关。npm 采取封禁账户并移除所有关联软件包的措施，却无意中“误伤”了无辜且重要的 Stylus 库。
• 官方回应： GitHub Trust & Safety 团队已回复 Stylus 维护者，确认问题是由于一名维护者发布了恶意软件包导致账户被暂停及关联软件包被移除，并表示工程师正在努力恢复 Stylus。
• 事件特殊性： 此次事件是首例由注册表因管理错误而下架整个合法开源项目的重要案例，与此前开发者因争议或抗议而自行撤回库的情况不同。

BleepingComputer

npm 'accidentally' removes Stylus package, breaks builds and pipelines

npm has taken down all versions of the Stylus library and replaced them with a "security holding" page, breaking pipelines and builds worldwide that rely on the package.

AI 摘要：本文是作者 Nic Chan 撰写的新网站构建系列的一部分，重点介绍了如何采用现代字体回退方法来优化网站性能，尤其是减少累计布局偏移（CLS）。作者详细阐述了利用在线工具调整 CSS 字体属性（如 size-adjust 等）以实现无缝字体切换的实践，并分享了新增艺术作品和工作展示区的设计与实现，包括使用 View Transitions 和容器查询来提升用户体验。

• 作者 Nic Chan 分享了此篇草稿延迟发布的原因，并感谢读者的支持。
• 介绍了网站新增的拖放功能（桌面端）和改进的窗口分层效果，强调了渐进增强（progressive enhancement）的应用，即在确保无 JS 可用性的基础上，通过 JavaScript 增强用户体验。
• 字体优化与回退 (Font Optimization & Fallbacks): 讨论了网站在字体加载时遇到的累计布局偏移（CLS）问题，特别是自定义字体 W95FA 较窄的特性。作者希望实现像素字体和抗锯齿字体之间的无缝切换。他利用了“Modern Font Stacks”提供的字体堆栈，并发现了一个名为“Font Fallback”的工具，通过调整 size-adjust、ascent-override 等 CSS 属性来创建视觉上无缝的字体回退效果，甚至为此修改了工具的源代码。
• 艺术作品展示 (Artwork Showcase): 作者决定在网站中添加艺术作品展示区，尽管这与专业无关。他受到 Josh Crain 网站的启发，并利用 View Transitions API 实现了窗口最大化时平滑的缩放和标题淡入效果，配合少量 JavaScript 进行状态管理和回退。
• 工作项目展示 (Work Projects Showcase): 面对多种图片尺寸和可选标题的复杂布局挑战，作者采取了非对称设计，并限制了三种核心布局模式，避免每次新增案例都需编写新样式。此处完美运用了容器查询（Container Queries）来适应可用窗口空间内的尺寸变化，并结合 CSS Grid 实现有趣的重叠布局和纹理效果。

AI 摘要：本文是 NodeWeekly 第 587 期（2025 年 7 月 22 日）的newsletter，聚焦 Node.js 生态系统的最新动态与技术进展。内容涵盖 Node.js 与 PHP 的跨生态系统整合（如 Laravel 在 Watt 运行时的支持），Node.js 安全更新，工具与库的最新版本发布（如 Bun v1.2.19、NAPI-RS v3），以及社区内的其他热点话题（如 WebAssembly 发展现状与 npm 开发者面临的钓鱼攻击）。此外，还包括了多个实用工具、教程和文章推荐，旨在为开发者提供全面的技术资讯和资源。

1. Laravel and Node.js: PHP in Watt Runtime：介绍 php-node 项目如何通过 Watt 应用服务器进一步支持 Laravel 应用的运行，探索 PHP 和 Node.js 生态系统的融合。
2. eslint-config-prettier 包的安全漏洞分析，Node.js http/https 原生支持代理（通过环境变量启用），Bun v1.2.19 新功能（pnpm 风格的 node_modules 隔离、VS Code 测试集成等），以及 pnpm 即将支持锁定 Node.js 版本。
3. Endor: Add Services as Node Dependencies：介绍 Endor 项目，通过简单的 npm install 和 endor run 命令，快速创建沙盒环境，支持 Postgres、MariaDB 等服务。
4. Articles and Case Studies：包括使用 Eleventy（Node 静态站点生成器）迁移网站提升 24% 性能的案例；基于视觉语言模型构建字体搜索引擎的教程；
5. 推荐多个工具和库：npq（安装前审计包安全）、NAPI-RS v3（支持 WebAssembly 的 Node.js 插件框架）、YouTube.js 15.0（非官方 YouTube API 客户端）、stripe-sync-engine（Stripe 到 Postgres 同步引擎）以及其他如 NeutralinoJS、Corepack、ESLint 插件等的最新版本更新。
6. 汇总更广泛的技术动态：Andy Wingo 关于 WebAssembly 现状的文章，Deno 团队分享的 JavaScript 历史视频，git-quick-stats.sh 工具，以及针对 npm 开发者的钓鱼攻击警告。

AI 摘要：这篇全面的、与平台无关的 2025 年前端性能优化清单，详细阐述了网站速度对于业务增长、用户参与度及 SEO 的关键作用。文章指导开发者如何利用各类工具衡量性能，并提供针对 HTML、CSS、JavaScript、图片与视频处理、字体优化以及主机与服务器配置等核心领域的实战建议。该指南还列举了多项快速提升性能的技巧，强调性能优化是一个持续的过程，对提供闪电般快速的用户体验至关重要。

1. 引言与重要性
• 性能与业务增长: 强调在当今快节奏的世界中，更好的性能直接转化为业务收益，如提升用户留存、转化率、搜索引擎排名（Core Web Vitals）和广告质量得分。
• 性能影响指标: 列举了网站停留时间、页面浏览量、跳出率、转化率/收入、用户满意度与留存、自然搜索流量、带宽/CDN 成本、广告质量得分等受性能影响的关键指标。

2. 性能测量
• 测量工具: 介绍了 Google PageSpeed Insights (PSI)、Chrome Lighthouse、WebPageTest、GTmetrix 以及 CrUX 数据等常用工具，用于获取实验室数据和真实用户数据。
• 测量方法: 建议结合使用实验室工具（获取受控基线）和真实用户监测（RUM，如 Web Vitals JS 库或 SpeedCurve 等平台），以便精准定位优化重点。

3. 前端性能优化清单
• 职责分配: 指出性能优化是整个开发团队的责任，包括平台选择、UX 设计和前端开发实现。
• HTML 优化: 强调优先渲染关键的 above-the-fold HTML 内容，清理冗余代码，启用压缩 (GZIP/Brotli)，正确加载外部文件（CSS 在 <head> ，JS 使用 async/defer），并避免不必要的 <iframe>。
• CSS 优化: 建议移除未使用的样式，模块化和拆分 CSS，避免 @import，使用关键 CSS (Critical CSS)，优化和压缩 CSS，预加载关键 CSS 文件，简化选择器，并利用现代 CSS 特性如 content-visibility: auto。
• JavaScript 优化: 提倡尽可能使用 HTML/CSS 替代 JS，避免过度使用框架/库，代码分割和延迟加载非关键 JS，预加载关键脚本，对脚本使用 async 和 defer 属性，压缩和摇树 (tree-shake) JS，保持依赖最新，移除未使用代码，并明智选择框架并利用其优化特性（如 Next.js 的混合渲染、Astro 的零 JS 默认）。
• 图片处理: 强调使用适当大小的图片，响应式图片 (<img srcset> 和 <picture>)，压缩和优化图片，预加载英雄图片 (<link rel="preload" as="image"> 和 fetchpriority="high"), 延迟加载 below-the-fold 图片 (loading="lazy"), 使用现代图片格式 (WebP/AVIF)，指定图片宽度和高度 (或 aspect-ratio) 以避免布局偏移，并利用框架或 CDN 进行图片优化。
• 视频处理: 建议压缩视频文件，选择现代视频编解码器/格式 (WebM/AV1)，使用正确的 preload 值，延迟加载 below-the-fold 视频，如果不需要则去除音频，考虑流媒体传输长视频，并优化第三方视频嵌入。
• 字体优化: 限制字体家族和字重数量，使用现代字体格式 (WOFF2)，预连接到字体主机源，使用 font-display: swap 避免文本不可见 (FOIT)，通过字体度量调整避免加载时的布局偏移，并考虑使用可变字体。
• 主机/服务器优化: 强调使用 HTTPS (TLS)，最小化 HTTP 请求，使用 HTTP/2 或 HTTP/3，使用 CDN，启用服务器端缓存，优化服务器处理时间 (TTFB 目标 < 200ms)，以及尽可能提供静态页面。

4. 快速提升技巧
• 避免布局偏移: 确保为动态内容预留空间，以减少累计布局偏移 (CLS)，可使用明确的 width/height 或 aspect-ratio，以及骨架屏占位符。
• 使用优先级提示: 利用 fetchpriority="high" 和 importance 属性告知浏览器哪些资源最重要，从而优化网络带宽分配。
• 最小化外部 HTTP 请求和第三方脚本: 审查并移除不必要的第三方脚本和资源，对于必需的脚本可考虑延迟加载。
• 保持单一协议: 确保所有资源都通过 HTTPS 加载，避免混合内容。
• 设置合适的缓存头: 利用 HTTP 缓存，为静态资源设置长 max-age，并通过文件名哈希进行缓存 busting。
• 预取可能访问的页面: 使用 <link rel="prefetch"> 或框架特定预取机制，在浏览器空闲时预加载用户可能接下来访问的页面。
• 利用 Service Workers 进行缓存: 部署 Service Worker 拦截网络请求，实现离线缓存和更快的后续加载。

5. 总结与展望
• 持续优化: 强调 Web 性能是一个持续的旅程，每次微小的改进都能带来显著的用户体验和业务成果。
• 性能与整体成功: 指出速度是网站成功的基础，它能确保优秀的内容、营销、SEO 和设计得以充分展现。
• 行动号召: 鼓励团队采纳“性能优先”的心态，持续优化网站速度。

AI 摘要：Chrome 139 正在实验 Open UI 提出的 Interest Invoker API，该 API 旨在通过声明式 HTML，无需 JavaScript 即可创建鼠标悬停触发的弹出界面，如工具提示和悬浮菜单。它通过 interestfor 属性关联触发器和作为 popover 的目标元素。文章详细探讨了触发器和目标元素的用法、不同 popover 类型的影响、相关的 JavaScript 事件、以及通过 interest-show-delay 和 interest-hide-delay 等 CSS 属性控制的“兴趣延迟”。同时，它也深入讨论了键盘和屏幕阅读器用户的可访问性支持，并指出该 API 虽处于早期实验阶段，但有望极大简化此类 UI 的开发，尽管在某些 popover 行为和触屏交互上仍有待完善。

CSS-Tricks

A First Look at the Interest Invoker API (for Hover-Triggered Popovers) | CSS-Tricks

Chrome 139 is experimenting with Open UI’s proposed Interest Invoker API, which would be used to create tooltips, hover menus, hover cards, quick actions, and other types of UIs for showing more information with hover interactions.

AI 摘要：本期《Frontend Focus》第702期聚焦前端领域的最新动态、实用工具、深度文章与观点。内容涵盖SVG基础入门、HTML 2025年度调查、AI辅助调试、可访问性标准解读、CSS动画、性能优化、前端框架更新等多个方面，为开发者提供了丰富的学习资源和行业洞察，同时介绍了多款前端实用工具和库，以及一些趣味简讯和广告。

1. 社区动态
• HTML 2025 年度调查启动：第三届年度 HTML 调查，旨在了解开发者如何使用 Web 平台日益增长的能力，其结果将直接影响明年 Interop 项目的优先级。
• WCAG 纯英文版：让无障碍标准易于理解：一个可搜索的资源，为官方 Web 内容无障碍指南（WCAG）提供了一个初学者友好的指南，使其更易于消化。
• Firefox 141 发布：新版本增加了垂直标签页和 AI 标签组织智能功能。
• GitHub 支持欧盟主权技术基金：GitHub 正在倡导设立一项欧盟主权技术基金。
• 为什么不信任 WCAG 2.2 以及对 3.0 的期望：Daniel Schwarz 提出了他对 WCAG 2.2 的担忧，并探讨了 WCAG 3.0 如何改进这些问题。
2. 文章、观点与教程
• 时间不多，范围却很多：滚动驱动动画的 animation-ranges 速查表 —— 一篇关于滚动驱动动画及其可用选项的入门指南。
• 小屏幕，大影响：为功能手机开发 Web 应用的被遗忘艺术：探讨了功能手机在2025年仍有意义的原因，以及如何为这类设备构建和发布Web应用。
• Tailwind 是“最糟糕的综合体”：一篇观点文章，认为 Tailwind 是 “将 CSS 和现代 Web 开发中所有糟糕之处结合在一起的令人遗憾的倒退”。
• 2025 年前端性能检查清单：一份高层次的清单，列出了创建快速、高效 Web 应用时需要牢记的事项。
• 利用 Web Speech API 让你的网站开口说话：一种简单直接的方法，为网站添加语音功能。
• 糟糕导航的隐性成本：信息架构如何直接影响业务指标：探讨了信息架构对业务指标的直接影响。
3. 开发工具与资源
• Glass3D 生成器：一个生成 3D 玻璃效果的 CSS 工具：一个允许编辑背景滤镜设置、颜色和纹理的工具，并实时预览效果。
• Astro 5.12 发布：新版本特性包括升级的 Netlify 开发体验、内容加载器中的 TOML 支持等。
• Tiptap v3：无头富文本编辑器框架：为构建强大的富文本编辑体验提供了基础，v3 版本包含大量开发者体验改进，如动态UI的卸载和重新挂载、创建自定义视图的 “Markviews”、SSR 模式等。
• macOS 光标 PNG 图片集合：一个提供各种 macOS 光标 PNG 图片的网站。

AI 摘要：本期《React Status》全面概述了 React 生态系统的最新进展，包括全新 UI 组件库的发布、React Compiler 文档的改进、避免常见 React 和 Next.js 开发错误的实用指南，以及 AI 辅助 UI 构建的效率对比。此外，还深入探讨了 Zustand 状态管理、React Router 与 Server Components 的未来集成，以及 React 图形可视化的应用。文章还收录了一系列新增及更新的代码工具和库，并简要介绍了 JavaScript 领域的其他重要动态，如 Bun 的新版本发布和新的全栈框架尝试。

1. 社区动态与文章
• React Compiler 新版文档 – React 团队正努力改进 React Compiler（一个处于发布候选阶段的预编译优化工具）的官方文档，以便开发者深入学习和使用。
• Untitled UI React: 全新 UI 组件库 – 介绍了一个基于 Tailwind CSS 和 React Aria 构建的开源 UI 组件库，支持复制粘贴式开发，并提供 PRO 版本包含更多组件和 Figma 集成。 #组件库 #tailwind
• Figma MCP vs Claude: UI 构建之战 – 探讨了将 Figma 中的 UI 视图转换为可运行 React 代码的最佳方法，对比了使用 Figma 自身的 MCP 服务器和 Claude Code 通过截图实现的效果。 #AI #MCP
• Zustand 状态管理入门 – 为对 Zustan 感兴趣的开发者提供了全面介绍，强调这个轻量级状态管理解决方案的成熟、流行和经过实战检验的特性。
• React Router 与 React Server Components 的未来 – 探讨了 React Router 用户在与 React Server Components 集成时将面临的重大影响和未来发展方向。
• 使用 Matter.js 和 React Native Skia 构建 2D 游戏风格物理效果 – (文章) 详细讲解如何实现 2D 游戏中的物理效果。
• 将 Next.js 站点迁移至 Eleventy 并提升 24% 性能 – (文章) 分享了从 Next.js 迁移到 Eleventy（一个流行的 Node.js 静态站点生成器）的经验，并展示了性能提升。
• 使用 Okta 创建带有社交登录认证的 React PWA – (文章) 指导如何构建一个支持社交登录认证的 React 渐进式 Web 应用 (PWA)。

2. 代码与工具 (Code, Tools & Libraries)
• Reagraph: WebGL 驱动的 React 网络图可视化库 – 提供详细文档和 Storybook 实例，用于在 React 中实现基于 WebGL 的网络图可视化。 #webgl
• React Unity WebGL 10.0: 在 React 应用中嵌入 Unity WebGL 应用 – 庆祝其发布 8 周年，帮助将 Unity WebGL 应用与 React 应用集成并进行通信。
• React CodeMirror: CodeMirror 编辑器组件 – 使在 React 中使用流行的 JavaScript 代码编辑器 CodeMirror 变得更简单，提供了可定制的演示。
• React Native Audio API 0.6.5 – 基于 Web Audio API 的音频引擎。
• React Stripe.js 3.8 – Stripe.js 和 Stripe Elements 的 React 组件。
• React Native Rich Text Editor 1.10 – React Native 富文本编辑器。

3. JavaScript 领域其他动态 (Elsewhere in JavaScript)
• Platformatic 在 Node.js 中运行 Laravel 应用 – Platformatic 公布了在 Node.js 环境下运行 Laravel 应用的新方法。
• Bun v1.2.19 发布 – Bun 发布了新版本，新增了 pnpm 风格的隔离 node_modules 选项、交互式包更新器、VS Code 测试浏览器集成、更快的 Postgres 客户端等。
• eslint-config-prettier 包安全事件分析 – 分析了 eslint-config-prettier 包最近被入侵的事件，包括其工作原理和发生过程。
• bhvr: 基于 React 的全栈技术栈 – 介绍了一个构建全栈应用的有趣新尝试，该技术栈由 Bun, Hono, Vite 和 React (bhvr) 组成。

react.dev

React Compiler – React

The library for web and native user interfaces