AI 摘要：过去十年，JavaScript（简称 JS）运行时（JavaScript Runtime）经历了爆炸性增长，跨越云、边缘（Eadge）、微控制器、智能电视、移动/桌面原生应用（Native App）等众多环境。随着 Node.js、Deno、Bun、Cloudflare Workers、Hermes、QuickJS 等不同引擎和运行时的出现，JS 开发者获得了前所未有的选择自由。文章系统梳理了驱动 JS 运行时百花齐放的原因：硬件性能多样化、任务场景多元化、与原生 API 的融合需求以及跨平台/多语言互操作等。最终结论是：没有哪一个 JS 运行时能“一统天下”，不同场景必然产生不同最优解，也促成了生态繁荣与技术创新的持续推进。

1. JavaScript 运行时的多样化浪潮
• 过去十年 JS 运行时和引擎在数量和类型上激增，支持从云、大型服务器到边缘、物联网和嵌入式设备。
• 没有单一运行时能覆盖所有场景，各种任务对性能、包体体积、API 支持等需求差异巨大。

2. 边缘计算（Edge Computing）和“无服务器”
• JavaScript 在边缘的脚步：先由 Node.js 在 AWS Lambda 支持，继而 Cloudflare Workers、Deno Deploy、Bun 等新锐项目快速跟进。
• 各家采用不同 JS 引擎：V8（Node.js、Cloudflare）、JavaScriptCore（Bun）、SpiderMonkey/WinterJS，QuickJS（LLRT）等，厂商和开发者根据实际需求选择最优方案。
• 行业逐步形成新的标准组织，如 WinterCG 推动运行时 API 一致性。

3. 微控制器与极小型设备
• 资源受限场景驱动极致“瘦身”引擎（如 Duktape、JerryScript、Espruino、mjs、Moddable、Elk）。
• 推动对应微型 runtime 出现（IoT.js、Microlattice.js、low.js）使 JS 覆盖从命令行到“3 分钱”MCU 芯片。
• 跨语言调用与嵌入需求促进微型 JS 引擎/运行时出现。

4. 多语言互操作（Polyglot engines）
• 不同语言实现 JS 引擎，促进零成本语言互调。显著例子有 Rhino/Nashorn/Graal.js（Java/JVM）、jint（.NET/C#）、langjs/pyNarcissus（Python）、Boa/rquickjs（Rust）、Kiesel（Zig）等。
• 甚至有用 JS 编写 JS 引擎的项目（如 Narcissus、Porffor、Shadow），展现 JS 生态和语言本身的强大适应性。
• 多数主流 polyglot 项目追求互操作性和练手，更极大丰富了 JS 生态。

5. 原生应用开发与 JS 运行时
• Web View 类应用：Cordova/PhoneGap、Ionic/Capacitor（移动端）、Electron、NW.js（桌面）、Smart TV 平台广泛采用 webview+JS runtime 构建跨平台 GUI。
• React Native 体系：通过 JS runtime+bridge 机制渲染原生组件，最早依赖 JavaScriptCore，后主推 Hermes，还支持 V8/QuickJS/Chakra 等多引擎适配；已成为移动端主流，正在攻入桌面和智能电视。
• NativeScript：深度绑定原生 API，早期支持多引擎（JSC/V8），后统一到 V8；近期演化为 Node-API 驱动，以便灵活适配各主流 JS 引擎。
• Node.js 在原生开发中的特殊地位：广泛用于 CLI 服务和桌面集成，但在 GUI、移动原生方面更显边缘，行业也频繁尝试 V8/ChakraCore/JerryScript 等不同引擎 port。

6. 总结与反思
• JS 凭借开放性和简洁性，成为最有适应性的面向 GUI 与原生应用开发的语言，并渗透到各类设备终端。
• 运行时选择众多，驱动力多样，硬件特性、启动时/运行时性能、bundle 大小、API 支持、native 调用等需求差异难以统一，任何“统一 JS 运行时”设想都难以落地。
• 健康竞争、百花齐放推动了巨大的技术进步，使 JS 成为未来开发“最安全”的通用技术选择之一。

7. 附录：遗漏与新兴运行时一览
• ByteDance Lynx/PrimJS、Ladybird LibWeb/LibJS、gjs（SpiderMonkey/ GNOME）、MuJS、JXA（macOS automation）、dukluv/txiki.js、Bare、lo.js 等新老项目列举。

发布视频-单机游戏-其他游戏
播放量:70.82万 弹幕:1.99万 评论:9622
点赞:3.99万 投币:3.38万 收藏:9774
发布日期:2025-07-31 07:40:02
时长:0:30:32

AI 摘要：本期 React Status 精选了 React 及其周边生态的最新动态，包括 TanStack DB 的首次 beta 发布、Reaper 死代码分析 SDK、新的 React Native 动画库 Reanimated 4 及多款工具库，还有 TypeScript、Parcel、Remix、Next.js 等重要更新。内容从核心库、开发工具到行业热点，全面展示了前端开发领域的创新趋势，尤其突出数据管理、性能优化、工程实践和 JavaScript 生态的多元演进。

1. 生态与社区动态
• TanStack DB 首个 beta 版发布，为 TanStack Query 带来高效增量更新与乐观写入能力，实现在本地侧存储场景的差分数据流 (differential dataflow)。
• The Useless useCallback：React 状态管理与性能相关实践讨论，分析 useCallback、useMemo 潜在问题，展望 React Compiler 与 useEffectEvent 等新工具的改善能力。
• TypeScript 5.9 RC 发布，带来 import defer 和 --module node20 等新特性。
• Stack Overflow 2025 调查显示 React 继续蝉联 “最受开发者渴望（most desired）” Web 技术头名，尽管 Svelte 更 “受人钦佩（admired）”
• Parcel 深入支持 React Server Components，并解析 "use client" 等指令的实际作用机制。
• React Native 下一个版本中引入预编译的 iOS 版本，RC3 阶段承诺将构建时间缩短 10 倍

2. 文章与深度实践
• 《Remix 3 和 React-中心架构的终结》 探索 React 未来架构趋势。
• 《Next.js 运行时密钥注入实战》 深入分析密钥管理在微服务和 SSR 场景下的重要性。
• 《将 JSX 改写为 Astro 的思考》 带来组件语法和工程结构的迁移经验。

3. 代码、工具与库
• React Native Reanimated 4 正式带来类 CSS 动画与过渡体验到 React Native，兼具复杂能力与高性能。
• Better Upload 支持各类 S3 兼容存储的极简文件上传，适配 Next.js、TanStack Start、Remix 和 Hono 等框架。
• Rooks.js 8.4 提供接近 100 个自定义 hooks，涵盖在线状态、窗口大小、语音合成、键盘输入等各类场景。
• 新发布与更新工具还有 React Three Viverse 教程、Tinybase 6.5、TanStack Form 1.15、IntentUI 3.3、Preact 10.27、BlockNote 0.35、React-three-fiber 9.3、Ink 6.1 等，覆盖数据存储、表单、组件库、Notion 风格编辑器、命令行应用等多样领域。

4. JavaScript 生态其他重点
• JavaScript 各类运行时和引擎历史盘点。
• es-toolkit 成为 Lodash 100% 兼容替代，已被 Storybook、Recharts 等主流项目采用。
• Zod 对决 Valibot 的 JS/TS 校验器评测视频。
• Hugging Face Transformers.js 让机器学习模型直接运行于浏览器，并支持多种音频与文本模型。
• Vercel 发布 Fluid compute 平台，该平台本质上提供 “无服务器服务器（serverless servers）”。
• Google OSS Rebuild 通过比对源码与上游，进一步保障开源生态（如 npm）安全。

◂Ⓘ▸YAYOI の 夢 (@Yayoi_no_yume)我不知道啊，我看见Nekopara我就进来了，结果发现这是一款2.9k Stars的超级长文本翻译工具！
如果有不好意思上传给平台的“正经”文本，还能调用本地的SakuraLLM（特别训练的中日翻译模型）来进行翻译。
先星星为敬！
https://github.com/NEKOparapa/AiNiee

AI 摘要：本文介绍了当前 CSS 渐进网格布局（Masonry Layout）的浏览器支持现状及其多种语法方案，并提出了一种通过简洁 JavaScript 实现兼容所有主流浏览器的马赛克布局方法。作者详细解释了实现原理、兼容图片和响应式布局的技巧，同时分享了相关工具库的使用方法，为 CSS Grid 用户提供了生产可用、灵活可控的 masonry 解决方案。

1. CSS Masonry 布局的社区动态与支持现状
• Masonry 布局的引入持续讨论中，语法有三种主要提案：display: masonry、grid-template-rows: masonry、item-pack: collapse
• 当前未达成统一标准，不同浏览器支持程度不一（如 Firefox、Chrome 正在分别测试不同语法）
2. JS Polyfill 实现 Masonry 兼容性
• 介绍如何检测浏览器是否原生支持 grid-template-rows: masonry
• 若未支持，则使用 Polyfill 方案，纯 JavaScript 实现 Masonry 效果（仅需约 66 行代码）
3. Masonry 实现原理详解
• 利用 CSS Grid 的特性，将 grid-auto-rows 设为 0，row-gap 设为 1px
• 通过 JS 获取每个网格项实际高度后，调整 grid-row-end，实现项自适应高度并“堆叠”
• 恢复正确的行间隔后，布局完成，兼容性强
4. 对图片和媒体的兼容处理
• 首次渲染时图片未加载完成会导致布局错乱，需监听图片/视频加载后再计算布局
• 提供相关 JS 辅助函数，确保所有媒体加载完毕再执行布局函数
5. 响应式自适配
• 使用 ResizeObserver 监听容器宽度变化，实现自适应响应式布局
6. 工具库与复用建议
• 推荐使用作者开源的 Splendid Labz 库快速集成 Masonry 布局及更多布局工具
• 提供 npm、CSS、JS 完整使用示例

AI 摘要：本文系统梳理了独立开发者在 Web 全栈开发过程中，如何以低成本（穷鬼套餐）快速启动和迭代产品。作者结合自身实战，详细分析了主流的技术栈（以 Next.js 为核心）、多种低成本云部署模式（如免费云平台、全栈 Cloudflare、自托管等），以及项目启动常见成本项（域名、邮件、支付等）的选择建议，旨在帮助新手独立开发者找到成本控制与效率兼顾、专注产品本身的最佳路径。

1. 最新技术栈的选择
• 推荐 Next.js 作为首选全栈开发框架，因其生态活跃、文档齐全、AI 代码生成友好。
• 详细列举配套库与工具（如 Drizzle ORM、Better Auth、Stripe、React Email、Tailwind CSS 等），并说明每类工具的优点与适用场景。
• 解释选择原则，强调“三方依赖的通用性”及“易于在不同平台部署”。

2. 明确你的需求和成本
• 强调“盈利/准备盈利”型项目需严肃对待成本预算。
• 简述独立开发三种低成本路径：A. 利用云平台免费额度（如 Supabase/Neon/Vercel 等），B. 全部服务基于 Cloudflare，C. 自托管（廉价 VPS + 开源 PaaS 平台）。
• 分析各模式优劣：云平台部署简单、运维压力小但成本不稳定；Cloudflare 适合高流量/无收入阶段；自托管自由度高但需解决运维/安全等问题。

3. 云平台方式
• 细分为“入门级完全免费组合”“面向小商业的稳定运营组合”，逐项对比主流云平台（Vercel、Railway、Fly.io）、数据库（Supabase、Neon、Upstash）、对象存储（Cloudflare R2）、邮件服务（Resend）等的免费额度与核心优缺点。
• 强调高流量/免费额度耗尽时，成本可能快速上涨，需要有盈利模式支撑。
• 建议新手优先选择云服务，节约运维精力，把重心放在产品与营销上。

4. 完全利用 Cloudflare 平台
• 总结 Cloudflare 作为一体化服务平台的优势（免费 CDN、极低成本、服务丰富），适用于“愿意折腾”及“高流量低收入”独立开发者。
• 介绍 Workers 计算、D1 数据库、KV 存储、R2 对象存储等服务的免费额度及场景限制。
• 结合实际项目案例，说明小型/海外流量项目长期运行的可行性。

5. 自托管部署
• 分析自托管的技术栈组合、支持工具（如 Dokploy、Coolify、Uptime Kuma、Umami、Unsend、n8n等），一并覆盖数据分析、监控、邮件、数据库等服务。
• 优点：极致成本控制与可控性，缺点：需自担安全、备份、扩容及持续运维压力。

6. 其它成本项
• 域名：推荐优先在 Cloudflare 购买，兼顾成本、速度、稳定性。
• 邮件服务：若依赖登录/营销可选择 Resend、plunk 或自托管方案（Unsend+AWS SES等）。
• 支付平台：建议优先 Stripe/Paddle，初期可探索 Creem.io 等新平台并分享认证/提现实战经验。

7. 最后
• 提醒“穷鬼套餐不等于无止境折腾”，独立开发应聚焦产品与市场验证，合理分配时间资源。
• 强推 NextDevKit 作为一键多平台部署利器，降低初学者技术门槛。
• 鼓励读者分享各自技术栈与实践经验，集思广益，持续优化开发与部署流程。

AI 摘要：本文通过作者在调试 JavaScript 代码时遇到的一个由分号 (semicolon) 缺失引发的 TypeError: console.log(...) is not a function 问题，强调了分号在 JS 语法中的关键作用。作者通过简短实例和社区讨论，剖析了分号自动插入机制导致的意外行为，并分享了这一微小失误引发长时间调试的经历，提醒开发者关注代码细节。

1. 问题背景与经历
• 作者在调试时随意插入了 console.log('here') 语句并未加分号，位置恰好出现在 IIFE（立即执行函数）之前。
• 缺少分号导致 JavaScript 引擎将后续的 function 代码当作 console.log 的参数，最终抛出 TypeError。

2. 原因分析
• StackOverflow 社区成员 Sebastian Simon 解释了该错误机制：没有分号时，代码被解析为 console.log()(function(){})，而 console.log() 的返回值是 undefined，无法作为函数调用。
• 提供了最小可复现实例代码来说明问题本质。

3. 社区互动与反思
• 在 Mastodon 社区，Andre 提醒作者 Chris Coyier 的 Web Development Merit Badges（网页开发徽章）。
• 作者幽默地调侃自己，为“因为一个字符小失误花了一小时调试”自豪地领取了徽章，凸显开发中对细节的重视与共鸣。

AI 摘要：本文深入探讨了 React 的 useCallback（及部分 useMemo）在许多开发实践中被滥用、实际无效甚至带来额外复杂性的现象。作者指出，只有在需要“引用稳定性”（referential stability）时才有必要使用 memoization（记忆化），但多数情况下由于组件、props 或 state 的传递与依赖管理不当，memoization 实际无法带来性能提升，甚至反而让代码维护变得困难。作者以真实项目为例，分析了 memoization 的链式依赖是如何轻易被打破，进而推荐采用最新引用（Latest Ref Pattern）和即将推出的 useEffectEvent 方案来简化副作用依赖管理。

1. 记忆化的真正动机
• 只有两大理由：性能优化、降低副作用（effect）频繁触发。
• 核心是保持“引用稳定性”，以防止不必要的重新渲染或副作用。

2. 错误/无用的 useCallback 场景分析
• 如果目标组件本身未被 React.memo 包裹，useCallback/useMemo 完全无效。
• 组件自身如果不关心 props 的引用稳定性，多余的 memoization 没有任何作用，例如原生 button 的事件处理。
• 不应将传入的非原始 props 用作内部依赖（dependency array），因为无法控制其稳定性。

3. 真实工作中链式 memoization 失效的例子
• 多层 useMemo/useCallback、props 层层传递，一旦其中任意一环未 memoize，所有下游优化失效。
• 该问题不仅无法通过“层层 memoize”彻底修复，反而增加了理解和维护的负担，导致开发者难以溯源、清理无用优化。

4. 新的依赖管理模式推荐
• 最新引用（Latest Ref Pattern）：通过 useRef 保存当前最新值，通过 effect 始终同步，无需被动依赖。
• useEffectEvent（即将推出的 React 原生特性）：可直接在副作用 effect 内安全访问最新 props/state，无需显性依赖。

5. 结论与建议
• 仅在确有必要的场景使用 useCallback/useMemo，切勿滥用。
• 优先采用更健壮的依赖管理模式，减少人为记忆化的复杂性，提升组件可维护性和开发体验。

AI 摘要：Google Chrome 的 Performance Extensibility API （性能扩展 API）允许开发者将自定义的性能标记（performance.mark）和测量（performance.measure）集成进 Chrome DevTools 的性能面板，使自有应用、团队代码与第三方包可实现更细粒度、结构化和可视化的性能剖析。文中不仅介绍 API 的最小可用实践和高级特性（如自定义 track、颜色、分组与元数据），还探讨了如何借助这些新能力更好地组织跨团队、跨模块或第三方依赖的性能数据，以提升前端调优的效率和可读性。

1. 背景与意义
• Google Chrome 推出的 Performance Extensibility API 能让开发者自定义性能分析数据，在 DevTools 性能面板中更清晰展现。
• 适用于关注特定应用片段性能、跨团队协作及 API/第三方包开发者等多类场景。

2. 现有能力回顾（性能.mark 与 .measure）
• 介绍 performance.mark() 与 performance.measure() 的基础用法，展示如何标记重要事件并测量阶段耗时。
• DevTools 能自动捕获这些标记，方便用时长和起止点可视化查看。

3. Extensibility API 的最小实现
• 启用 DevTools 新特性（Show custom tracks）。
• 使用 mark 时 dataType 必填，measure 时 track 必填，其他均为可选。
• mark 实现更明显的“标志”，但缺乏精确时间信息，偏向定位关注点而非精确计时。
• measure 则可直接建立自定义轨道，并展现分时区间。

4. 高级用法与增强能力
• 支持自定义颜色（限定调色板）、显示 toolTipText 与挂载元数据（properties）。
• measure 可作详细事件描述和元数据列举（例如资源加载性能拆解）。
• 所有扩展项 (color、tooltipText、properties) 均适用于 mark 与 measure，但 measure 的实用性更强。

5. track 与 trackGroup 的组织能力
• 支持创建自定义 track（如 CSS、JS、API）以区分不同事件流。
• 支持 trackGroup，将多个 track 归为一个分组（例如 First Party < CSS、JS>），适合团队协作及区分自有与第三方数据流。
• 实现方式简便，极大提升了跨团队、模块性能整理与溯源的效率。

6. 实践建议与最佳实践
• 推荐从最小实现用法入手，不建议对 mark 过度扩展。
• 优先使用 measure 进行自定义 track/trackGroup 的组织管理。
• 针对第三方库或框架，鼓励将自有 Instrumentation 移入单独 trackGroup，以提升定位和用例分析效率。

7. 附录：实用代码示例
• 提供结合 Resource Timing API 的实践 demo，展示如何自动获取和展示资源性能细节。

AI 摘要：本文深入介绍了 Web Components 中 Shadow DOM（影子 DOM）的原理和实际应用。作者不仅阐述了 Shadow DOM 在隔离 HTML 和 CSS、避免组件冲突中的重要性，也详细讲解了如何通过命令式和声明式方式创建 Shadow Root 以及相关配置（如克隆、序列化、焦点委托），并介绍了 slot（插槽）机制以实现内容分发。文章面向希望提升组件封装性、可维护性和安全性的前端开发者提供了清晰的实践指南。

1. Web Components 与 Shadow DOM 概述
• Web Components 由 Custom Elements（自定义元素）、HTML Templates（模板）和 Shadow DOM 等技术组成，三者可单独或组合使用。
• 传统 DOM 架构容易导致样式与脚本污染，难以维护。
• Shadow DOM 可实现 DOM、CSS、JS 的局部封装，提升组件独立性与安全性。

2. 为什么需要 Shadow DOM
• 现代应用常集成来自不同来源的组件，容易出现 ID 冲突与样式覆盖问题。
• 原生 HTML 元素如 video、details 等都标准使用 Shadow DOM 避免全局影响。

3. Shadow Root 的宿主元素与创建方式
• 多数 HTML 元素（如 div、section、span 等）均可作为 Shadow Root 宿主。
• 创建方式分为：
• 命令式（JavaScript）：attachShadow({mode})，可选择 open（开放）或 closed（私有）模式，建议默认使用 closed，以增强安全性。
• 声明式（HTML）：利用 <template shadowrootmode=""> 内嵌 shadow root，可和 Custom Elements 配合使用，支持 open/closed 模式。
• 讨论 open/closed 模式的脚本访问区别与安全考虑。

4. Shadow DOM 配置项
• clonable：允许带有 shadow root 的节点可被完整克隆（包括模板内容），提升组件复用性。
• serializable：能将 shadow root 内容序列化为字符串，便于缓存或跨节点注入，但需注意闭合模式下的数据泄露风险。
• delegatesFocus：启用后，宿主获得焦点时自动将焦点转移到 shadow root 内第一个可聚焦元素，常用于自定义表单组件，增强用户体验。

5. Slot（插槽）与内容分发
• 通过 slot，可实现宿主与 Shadow DOM 之间的内容插入与分发，支持默认与命名插槽，并可定义 fallback（回退）内容。
• slotchange 事件用于监听 slot 内容变化，便于实现响应式组件行为。
• slotted 内容仍属于 light DOM，可在文档级直接操作。

6. 实用建议与局限性
• 推荐以 closed-first 策略增强组件安全性，特殊场景下才使用 open。
• 注意表单与可访问性（ARIA）相关的局限，部分需要借助 ElementInternals 等新 API 进一步处理。

AI 摘要：本文由 Makito 首次在 Project AIRI 的 DevLog 分享，聚焦于如何在前端应用中处理和实现流式 UTF-8 字节流的文本动画，尤其是在聊天或语音转写等实时场景下正确分割和显示「字素簇」（grapheme cluster）。作者深入探讨了 Unicode 编码、多码点合成字符的边界难题，以及利用 Web API，如 TextDecoder、Intl.Segmenter，实现安全高效的字素簇流式提取，并介绍了自己的开源库 Clustr。文章结合了丰富的实例和交互组件，面向希望在项目中实现高质量文本动画及多语言兼容的前端开发者，具有较高参考价值。

1. 背景与动机
• 投稿者首次在 DevLog 发文，介绍参与 Project AIRI 过程。
• 动画文本在现代 UI（如聊天消息）中的作用和实现难点。
• 第三方库（Anime.js, splt, GSAP）在文本动画实现上的进展与现有不足。
• 项目的需求：需实时处理和动画化接收自 UTF-8 字节流的数据。

2. Unicode 基础与「字素簇」难题
• 码点（Code point）与 UTF-8 字节流的对应关系，字节组装所需注意事项。
• Unicode「字素簇」的定义，即多个码点合为视觉整体的最小文本单元。
• 通过实际 Emoji 和南亚文字示例，阐释组合字符的裸数据和视觉表现。
• 传统 Web API 如 TextDecoder 能将字节流还原为码点字符，但不足以分割复杂字素簇。

3. Web API 应用与完善方案
• 利用 TextDecoder.decode（stream选项）实现流式解码，拼接字符串缓冲区。
• 使用 Intl.Segmenter 拆分字符串为字素簇，支持多语言处理。
• 提出解决方案：因为流数据随时变化，需确保不完整的字素簇不被导出，因而采用「丢弃最后一个」策略缓冲输出，避免合成字符的过早显示。

4. 流式字素簇库 Clustr 的诞生
• 市场调研发现缺乏专门处理流式 UTF-8 字节流并输出字素簇的库。
• 作者自研 Clustr，核心代码不到100行，实现了上述需求。
• Clustr 能帮助前端实时渲染流式文本动画，兼容多语言复杂字符。

5. 互动组件与社区交流
• 提供探索字素簇组合和实时代码交互的小组件。
• 鼓励开发者参与 Project AIRI 相关 GitHub 仓库，共同讨论和改进工具。