呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #css #Unicode #前端 #字素簇 #动画
太酷了。
Project AIRI DevLog @ 2025.08.01 | Clustr
author Makito
太酷了。
Project AIRI DevLog @ 2025.08.01 | Clustr
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 仓库,共同讨论和改进工具。
author Makito
#优质博文 #前端 #CSS #WebComponents
Web Components: Working With Shadow DOM — Smashing Magazine
author Russell Beswick
Web Components: Working With Shadow DOM — Smashing Magazine
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 进一步处理。
author Russell Beswick
#优质博文 #css #前端 #DevTools #性能
Making Sense of the Performance Extensibility API – CSS Wizardry
author Harry Roberts
Making Sense of the Performance Extensibility API – CSS Wizardry
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,展示如何自动获取和展示资源性能细节。
author Harry Roberts
#优质博文 #前端 #React #JavaScript #性能优化
The Useless useCallback
author Dominik Dorfmeister
The Useless useCallback
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,切勿滥用。
• 优先采用更健壮的依赖管理模式,减少人为记忆化的复杂性,提升组件可维护性和开发体验。
author Dominik Dorfmeister
#优质博文 #前端 #css #javascript #debug
What a diff'rence a semicolon makes
author Thomas Steiner
What a diff'rence a semicolon makes
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(网页开发徽章)。
• 作者幽默地调侃自己,为“因为一个字符小失误花了一小时调试”自豪地领取了徽章,凸显开发中对细节的重视与共鸣。
author Thomas Steiner
我做了!在大伙的撺掇下先做了周刊第 1 期发了再说!反正也是每周本来就有在做的,欢迎订阅看看反馈纠错~
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
PS:感觉 Quaily 确实挺棒的。等晚点公众号审核过了可以也同步 md 转公众号。
也欢迎用 Folo RSS 订阅
因为是第一期所以后面内容有点多,把上上周之类的事件也放进去了,下期就不会那么长了。
#优质博文 #独立开发 #全栈 #云平台 #成本优化
独立开发穷鬼套餐(Web实践篇)
author Guangzheng Li
独立开发穷鬼套餐(Web实践篇)
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 作为一键多平台部署利器,降低初学者技术门槛。
• 鼓励读者分享各自技术栈与实践经验,集思广益,持续优化开发与部署流程。
author Guangzheng Li
#优质博文 #css #前端 #新特性
Making a Masonry Layout That Works Today | CSS-Tricks
author Zell Liew
Making a Masonry Layout That Works Today | CSS-Tricks
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 完整使用示例
author Zell Liew
#tools #AI #翻译 #工具推荐
超级长文本翻译工具,好好好
https://github.com/NEKOparapa/AiNiee
https://fixupx.com/Yayoi_no_yume/status/1951247405535600887
超级长文本翻译工具,好好好
https://github.com/NEKOparapa/AiNiee
◂Ⓘ▸YAYOI の 夢 (@Yayoi_no_yume)我不知道啊,我看见Nekopara我就进来了,结果发现这是一款2.9k Stars的超级长文本翻译工具!
如果有不好意思上传给平台的“正经”文本,还能调用本地的SakuraLLM(特别训练的中日翻译模型)来进行翻译。
先星星为敬!
https://github.com/NEKOparapa/AiNiee
https://fixupx.com/Yayoi_no_yume/status/1951247405535600887
#碎碎念 #项目更新
于是把 tg channel 部署了个网页先🥰 确实简洁好用
(其实一开始不部署是因为我觉得我搜索 bot 够用了,完全没考虑这茬)
(这个 tag 打的其实不太符合但是就这样吧)
https://tg.cosine.ren
感谢 BroadcastChannel
于是把 tg channel 部署了个网页先
(其实一开始不部署是因为我觉得我搜索 bot 够用了,完全没考虑这茬)
(这个 tag 打的其实不太符合但是就这样吧)
https://tg.cosine.ren
感谢 BroadcastChannel
#Newsletter #React #前端 #JavaScript #新动态
⚛️ React Status #438 — July 30, 2025
author React Status 编辑团队
⚛️ React Status #438 — July 30, 2025
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)安全。
author React Status 编辑团队
#碎碎念 #游戏 #优质视频
牛的,感觉现在敢发明末视频的 up 没几个,智能路障又冲在一线了(上一次还是黑猴)
昨天才打完了陆红柳和大虫子,还是挺好玩的,虽然我菜(都快 10 小时了才打到这儿)
运营真的是灾难,但是我买的是标准版(乐)剧情倒是真没啥好说的,一整个克苏鲁设定。。
扣帽子,猎巫,国产游戏史上最离谱的发售灾难。【游戏之外】
@智能路障:
牛的,感觉现在敢发明末视频的 up 没几个,智能路障又冲在一线了(上一次还是黑猴)
昨天才打完了陆红柳和大虫子,还是挺好玩的,虽然我菜(都快 10 小时了才打到这儿)
运营真的是灾难,但是我买的是标准版(乐)剧情倒是真没啥好说的,一整个克苏鲁设定。。
扣帽子,猎巫,国产游戏史上最离谱的发售灾难。【游戏之外】
@智能路障:
发布视频-单机游戏-其他游戏
播放量:70.82万 弹幕:1.99万 评论:9622
点赞:3.99万 投币:3.38万 收藏:9774
发布日期:2025-07-31 07:40:02
时长:0:30:32
#优质博文 #前端 #JavaScript #runtime #Node #跨平台 #全栈
史学家看过来!(很好的文章
The many, many, many JavaScript runtimes of the last decade
author Jamie
史学家看过来!(很好的文章
The many, many, many JavaScript runtimes of the last decade
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 等新老项目列举。
author Jamie