#优质博文 #前端 #性能优化 #SEO
好文，很有帮助。
Frontend Performance Checklist For 2025
author Didrik Steen Hegna, Dhairya Dwivedi, Nebojsa Radakovic
好文，很有帮助。
Frontend Performance Checklist For 2025
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 和设计得以充分展现。
• 行动号召: 鼓励团队采纳“性能优先”的心态，持续优化网站速度。
author Didrik Steen Hegna, Dhairya Dwivedi, Nebojsa Radakovic
Crystallize
Frontend Performance Checklist For 2025
In the speed-obsessed world of today, better performance comes with serious business gains. This frontend performance checklist is a cumulative list of items that we at Crystallize found important in 2025 when creating a Superfast web application.
👍2
#Newsletter #node #新动态
NodeWeekly #587
NodeWeekly #587
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 开发者的钓鱼攻击警告。
👍1
#优质博文 #CSS #字体 #性能优化 #设计 #前端
Building my new website: A modern approach to font fallbacks with font property adjustments - Nic Chan
author Nic Chan
Building my new website: A modern approach to font fallbacks with font property adjustments - Nic Chan
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 实现有趣的重叠布局和纹理效果。
author Nic Chan
www.nicchan.me
Building my new website: A modern approach to font fallbacks with font property adjustments - Nic Chan
Also, how personal is too personal for a personal site?
#优质博文 #npm #安全 #CSS #JavaScript #前端 #新动态
啊这，我居然才知道，第一句话就蚌埠住了。
PS: 现在看 npm 页面已经恢复了
npm 'accidentally' removes Stylus package, breaks builds and pipelines
author Ax Sharma
啊这，我居然才知道，第一句话就蚌埠住了。
PS: 现在看 npm 页面已经恢复了
npm 'accidentally' removes Stylus package, breaks builds and pipelines
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。
• 事件特殊性： 此次事件是首例由注册表因管理错误而下架整个合法开源项目的重要案例，与此前开发者因争议或抗议而自行撤回库的情况不同。
author Ax Sharma
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.
#新动态 #ChromeDevTools #前端 #调试 #性能优化 #AI
What's new in DevTools, Chrome 139
author Sofia Emelianova
What's new in DevTools, Chrome 139
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 现在可以通过键盘聚焦。
author Sofia Emelianova
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.
#优质博文 #CSS #前端 #新特性 #浏览器 #实验性功能
Brick by brick: Help us build CSS Masonry
author Patrick Brosset, Alison Maher
Brick by brick: Help us build CSS Masonry
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。
author Patrick Brosset, Alison Maher
Chrome for Developers
Brick by brick: Help us build CSS Masonry | Blog | Chrome for Developers
Help test the proposed masonry syntax in Chromium.
科技圈🎗在花频道📮
V2EX 用户发现恶意招聘项目盗取加密货币
V2EX 用户 evada 昨日发帖称，在应聘过程中被要求下载并开发的 GitHub 项目（招聘方提供的模板）中存在恶意代码。该项目将可执行代码伪装成 PNG 图片文件，通过 config-overrides.js 执行，目的是盗取用户本地的加密货币私钥。
用户发现该项目的 logo.png 文件实际包含恶意代码，会向特定网站发送请求下载木马文件并设置开机自启动。V2EX 管理员 Livid 已封禁站内涉嫌诈骗的相关账号，GitHub 也删除了恶意仓库。多名用户表示这种针对程序员的新型诈骗手段极具迷惑性，提醒开发者运行不明项目时需格外谨慎。
V2EX
V2EX 用户 evada 昨日发帖称，在应聘过程中被要求下载并开发的 GitHub 项目（招聘方提供的模板）中存在恶意代码。该项目将可执行代码伪装成 PNG 图片文件，通过 config-overrides.js 执行，目的是盗取用户本地的加密货币私钥。
用户发现该项目的 logo.png 文件实际包含恶意代码，会向特定网站发送请求下载木马文件并设置开机自启动。V2EX 管理员 Livid 已封禁站内涉嫌诈骗的相关账号，GitHub 也删除了恶意仓库。多名用户表示这种针对程序员的新型诈骗手段极具迷惑性，提醒开发者运行不明项目时需格外谨慎。
V2EX
#碎碎念
这种招聘陷阱可太坏了，难以想象正在找工作已经很难了看到这种还中招了是个什么心情（不只扫加密货币，扫文件）
这种招聘陷阱可太坏了，难以想象正在找工作已经很难了看到这种还中招了是个什么心情（不只扫加密货币，扫文件）
V2EX 用户发现恶意招聘项目盗取加密货币
V2EX 用户 evada 昨日发帖称，在应聘过程中被要求下载并开发的 GitHub 项目（招聘方提供的模板）中存在恶意代码。该项目将可执行代码伪装成 PNG 图片文件，通过 config-overrides.js 执行，目的是盗取用户本地的加密货币私钥。
用户发现该项目的 logo.png 文件实际包含恶意代码，会向特定网站发送请求下载木马文件并设置开机自启动。V2EX 管理员 Livid 已封禁站内涉嫌诈骗的相关账号，GitHub 也删除了恶意仓库。多名用户表示这种针对程序员的新型诈骗手段极具迷惑性，提醒开发者运行不明项目时需格外谨慎。
V2EX
😢5😱2
#优质博文 #前端 #WASM #JavaScript #DOM
When Is WebAssembly Going to Get DOM Support?
author Daniel Ehrenberg
When Is WebAssembly Going to Get DOM Support?
AI 摘要：本文深入分析了 WebAssembly（WASM）与 Web 平台集成特别是直接访问 DOM（文档对象模型）的现状和未来可能性。作者强调，Wasm 自身并没有也可能不会获得直接 DOM 支持，但它自诞生以来就通过需要适量 JavaScript glue code（粘合代码）间接地实现了对 DOM 及其他 Web API 的访问。通过工具链和标准的持续推进，Wasm 集成会更加高效，但对纯“Wasm 直接操作 DOM”并无迫切需求或业界共识。开发重点应聚焦于优化性能和开发体验，而不是消除一切 JavaScript，Wasm 与 JavaScript 的共存将长期持续。
author Daniel Ehrenberg
#Newsletter #JavaScript #前端 #安全 #react #WASM #node #CSS
JavaScript Weekly #746
author JavaScript Weekly 编辑团队
JavaScript Weekly #746
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 版本之后，表单仍然一团糟)
author JavaScript Weekly 编辑团队
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.
#优质博文 #前端 #HTTP #Web标准 #表单处理
Three HTTP versions later, forms are still a mess
author Yorick Peterse
Three HTTP versions later, forms are still a mess
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 提案因多方面原因未标准化
• 表单机制停滞，严重滞后于网络协议和数据交换发展的需求
author Yorick Peterse
#优质博文 #CSS #demo #codepen #动画 #svg #webgl #液态玻璃
也是一个 Liquid Glass Web 实现合集 demo 整理，有几个实现的确实漂亮啊～
Liquid Glass on the Web
author Chris Coyier
也是一个 Liquid Glass Web 实现合集 demo 整理，有几个实现的确实漂亮啊～
Liquid Glass on the Web
AI 摘要：本文深入探讨了 Apple 即将在其操作系统中全面采用的 Liquid Glass（液态玻璃）设计风格，并分析现有 web 技术如何实现这一视觉效果。作者梳理了 Liquid Glass 在网页端的多种实现方法，包括 CSS 的 backdrop-filter 和 SVG 滤镜（filter），并特别关注了该效果在可访问性（accessibility）上的挑战。文中还介绍了社区工具与实践案例，并指出 Liquid Glass 视觉语言强调的不仅是玻璃质感，还包含液体流动的动态感。
author Chris Coyier
#Newsletter #Node #JavaScript #前端 #TypeScript #AI
📢 Node Weekly #588
author Node Weekly 编辑团队
📢 Node Weekly #588
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 等等。
author Node Weekly 编辑团队
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...
#优质博文 #CSS #TypeScript #前端 #类型安全 #工程化
The Multi-Repository TypeScript Problem
author Carrick
The Multi-Repository TypeScript Problem
AI 摘要：本文深入探讨了在大型 TypeScript 项目、尤其是多团队、多仓库（polyrepo）架构下，如何在服务边界之间实现类型安全。作者通过剖析现有单仓库（monorepo）与多仓库在类型共享上的差异，提出了一套自动化提取、打包、共享和验证 TypeScript 类型定义的新思路，从而实现跨服务间类型兼容性检测，最大限度利用 TypeScript 本身的类型系统能力，实现 monorepo 式的类型安全体验。
1. TypeScript 项目架构对类型共享的影响
• 对比单仓库（monorepo）与多仓库（polyrepo）架构下服务间类型共享的简易性和复杂性
• 强调 monorepo 在类型共享上的先天优势，但多仓库在业务组织上的必要性
2. 跨仓库类型校验的实际挑战
• TypeScript 类型检查器需要获取完整工程上下文，但多仓库使类型定义分散
• 讨论依赖和类型递归拉取带来的复杂性，不同仓库可能存在同名、类似或依赖链深度不一的类型
3. 类型提取、打包和自动化流程
• 利用 ts-morph、SWC 等工具自动化精准地提取、分发类型定义
• 提出基于接口路由自动生成类型别名，解决多团队协作下类型命名不一致问题
• 持续集成（CI）流水线以独立项目方式聚合、校验和比对类型包，提高自动化校验覆盖面和准确率
4. 类型兼容与校验自动化策略
• 利用 TypeScript 类型赋值（assignability）规则进行自动验真，无需自定义冗余逻辑
• 构建临时 TypeScript 项目，自动加载各仓库导出的类型包，通过编译器 API 比对并提取错误
• 充分借力 TypeScript 编译器本身能力，让生态演进自然受益
5. 工程实践与系统扩展性
• 跨仓库类型校验架构具备良好的可扩展性和维护性
• 所有工程增强无需魔改 TypeScript，可高效适配未来升级
author Carrick
www.carrick.tools
The Multi-Repository TypeScript Problem
Navigating Type Safety Across Service Boundaries
#优质博文 #JavaScript #ES2021 #前端 #新特性
Logical assignment operators in JavaScript: small syntax, big wins
author Matt Smith
Logical assignment operators in JavaScript: small syntax, big wins
AI 摘要：本文介绍了 JavaScript 的逻辑赋值运算符（logical assignment operators），即 =, &&=, ??=，这些自 ES2021 起纳入标准的新语法极大简化了条件赋值的场景。这些运算符结合原有逻辑运算与赋值，帮助开发者更安全、高效地管理状态、赋默认值并减少样板代码，同时保留了短路（short-circuit）行为。作者详细对比了它们和传统写法的区别，以及在实际开发中的注意事项和最佳应用场景。
1. 逻辑赋值运算符基础
• 逻辑赋值运算符通过将逻辑运算符（||、&&、??）与赋值操作（=）结合，形成简写形式。
• 这些运算符延续了短路运算特性，仅在需要时才计算右侧表达式，提高性能并避免副作用。
• 非常适合简化日常中对变量赋默认值、状态更新的代码书写。
2. 三种主要运算及应用场景
• 逻辑或赋值（=）：当左侧为假值（falsy）时赋值，用于没有初始化或需要提供默认值的场景，但会覆盖如 0、''、false 这类本应保留的有效值。
• 逻辑与赋值（&&=）：当左侧为真值（truthy）时赋值，适合在当前条件满足基础上再作更新，注意右侧结果直接替换原值，可能变为假值。
• 空值合并赋值（??=）：仅在左侧为 null 或 undefined 时赋值，更安全地保持如 0、''、false 这类需要保留的有效值，适用于需严格区分“未赋值”与“有效但为假”的情况。
3. 使用场景与注意事项
• 组件属性默认值（如 React 的 props）：props.showHelpText ??= true;
• 全局状态或配置默认值：config.apiBase = '/api/v1';
• 数据清洗和表单处理：formData.username &&= formData.username.trim();
• 应避免使用可覆盖有效“假值”的 =，遇到需特殊区分空值的情况优先采用 ??=。
• 运算符左侧不能使用可选链（optional chaining），否则会抛出语法错误。
• 短路特性可避免无谓计算（如 API 密钥获取只在必要时执行）。
4. 浏览器与环境兼容性
• 支持：Chrome 85+、Firefox 79+、Safari 14+、Edge 85+、Node.js 15+
• 不支持：Internet Explorer
• 老旧环境可通过 @babel/preset-env（ES2021 配置）进行转译支持。
5. 实际意义与开发建议
• 逻辑赋值运算符虽然是小语法，但对代码可读性、简洁性以及防止常见赋值错误都极有帮助。
• 尤其适合前端组件状态管理、API 参数默认化、表单数据标准化等场景。
• 现已广泛兼容，开发者只需简单迁移习惯即可高效使用。
author Matt Smith
Allthingssmitty
Logical assignment operators in JavaScript: small syntax, big wins - Matt Smith
Logical assignment operators (||=, &&=, ??=) streamline conditional assignments in JavaScript, making your code cleaner, safer, and easier to read, especially in modern front-end workflows.