前端周刊第226期：Chrome 支持 JPEG XL、和 Deno 绝交、Preact 11、Nuxt 4.6、Panda CSS 2、SvelteKit 3、Ink 8、Remix 3、Lightpanda 1

发布于 2026.10.12。这里收集每周最新前端资讯和技术，周一发布。

行业动态

一、Chrome 155 正式支持 JPEG XL：比 JPEG 小 30–50%^[1]

刚发布的 Chrome 155 加进了对 JPEG XL（.jxl）的支持，压缩率比 JPEG 高 30% 到 50%，还支持 HDR。

作者：Versari, Firsching, Jägenstedt (Chrome for Developers) | 来源：developer.chrome.com

二、Cloudflare 把数十亿条真实用户性能数据放了出来^[2]

一份免费的 BigQuery 数据集：来自一万个挂在 Cloudflare 上的站点的匿名真实用户 Core Web Vitals，每天更新，Safari/WebKit 和 Chrome 都覆盖到了。博文里的第一批发现颇有意思——拖慢 LCP 的那一环，通常不是文件下载本身。

作者：Townsend & Jansma (Cloudflare) | 来源：blog.cloudflare.com

三、Sindre 和 SWC 都关掉了外部 PR：AI 垃圾贡献实在太多^[3]

高产维护者 Sindre Sorhus 不堪 AI 生成的垃圾 PR 骚扰，宣布关闭外部 pull request，但他自己的项目照常维护。同一周，SWC 也把 PR 收紧到可信贡献者^[4]了。

作者：Sindre Sorhus | 来源：bsky.app

四、95% 的航空公司网站过不了移动端的性能考题^[5]

Calibre App 用真实用户数据测了 100 多个航空公司官网，约 95% 在移动端没通过 Core Web Vitals。作者 Ben Schwarz 顺带把优化空间挨个列了出来——对做性能咨询的人，是份现成的研究样本。

作者：Ben Schwarz | 来源：calibreapp.com

五、State of HTML 2026 调查开启：10 分钟能决定浏览器路线图^[6]

Devographics 的年度调查又来了，问的是大家实际怎么用 HTML、表单、Web Components 和浏览器 API，花 10 到 15 分钟能填完。浏览器厂商拿着结果排自己的 roadmap，所以你按下的每个选项，都可能变成下个版本的功能。

作者：Devographics | 来源：survey.devographics.com

六、Dart Sass 2 定档 12 月：1.x 的警告将变成硬报错^[7]

Sass 早就不是当年那个默认选项了，但项目还在往前推。2.0 计划十二月发布，届时 1.x 里大部分弃用警告会直接变成编译错误。还在用 @import 的，趁现在把警告清干净。

作者：Natalie Weizenbaum | 来源：sass-lang.com

七、Framework Benchmark 出了 Chrome 154 的成绩：196 种实现同一个 App^[8]

这个站专干一件事：用 196 种方式实现同一个应用，然后跑一遍看性能、体积各是多少。新的 Chrome 154 结果已上线。

作者：krausest | 来源：krausest.github.io

文章

一、为什么还是没多少人用原生平台能力？^[9]

Web 平台的坚定拥护者 Nolan Lawson 这次站到了反思的一边：我们为什么总在用 JavaScript 和 CSS 重造浏览器已经白送的东西？文章在 Hacker News 上炸开了锅，高赞回复的理由高度一致——原生控件和 API 太受限、太别扭，靠不住。也正因为有这个共识，这篇才更值得读。

作者：Nolan Lawson | 来源：nolanlawson.com

二、Claude Code Mods 上手：用 JavaScript 给编码 agent 写插件^[10]

Claude Code 新增的 Mods，让你用 JavaScript 扩展这套 agent 工具：监听事件、改它的行为、画自定义 UI。Addy Osmani 写了大约 80 行做出一个 mod，把上下文窗口还剩多少做成实时「预报」显示出来——官方说明^[11]也一并给了。

作者：Addy Osmani | 来源：claude.dev

三、横评 11 个 HTTP 韧性库（Resilience Library）：5 个在取消后还在重试^[12]

韧性库指的是一类用于增强应用程序容错能力的代码库，其核心目的是让程序在遇到暂时性故障（Transient Faults）时，能够优雅地处理并快速恢复，而不是直接崩溃。

Ky、ofetch、Wretch 这些 fetch 封装库，要是请求在中途被 abort 掉了，重试逻辑会不会老实停下来？ffetch 的作者实测了 11 个，结果有 5 个在取消之后仍然接着重试。用这类库做请求层的，值得回头查一遍自己的依赖。

作者：Gabor Koos | 来源：blog.gaborkoos.com

四、CSS 现在会自己给 tooltip 找位置了^[13]

Matt Smith 讲 anchor-name 和 position-anchor 这两个属性，怎么让 tooltip 和下拉菜单在窗口缩放、页面滚动时牢牢待在该待的地方。手动算偏移量这件事，可以慢慢交给浏览器了。

作者：Matt Smith | 来源：allthingssmitty.com

五、和 Deno 绝交之后，Node 成了我的好基友^[14]

David Bushell 2021 年还写过一篇「我用 Deno 造了个站」^[15]，这次回头检讨：Node 这几年实在进步太多，他把站生成器搬回去几乎没怎么改动。哪里走错了，他也没客气。

作者：David Bushell | 来源：dbushell.com

六、等这阵风过去，靠什么把 Web 这碗饭吃下去^[16]

行业正乱成一团，David 给了一份强观点答卷：哪些能力值得投入时间，哪些技术和趋势该干脆别碰。观点有点冲，但条条都想找人吵一架。

作者：David Bushell | 来源：dbushell.com

发布

一、Preact 11：等了六年，React 的「同 API 替代品」终于转正^[17]

六年前就立项的 Preact 11 正式发布。更好的水合处理、ref 自动转发，包也改成只发 ESM。升级指南^[18]官方已经备好。

作者：The Preact Team | 来源：preactjs.com

二、Nuxt 4.6：服务端层终于不再绑死 Nitro^[19]

这个全栈 Vue 框架的大版本。服务端层和 Nitro 解绑，纯 Vite 的服务端构建成了实验选项；另有内置 session、Vue Vapor 支持，以及一条新的 Nuxt CLI 4.0^[20]。

作者：Daniel Roe | 来源：nuxt.com

三、Panda CSS 2.0：编译器用 Rust 重写，API 一点没动^[21]

css() 的写法原样保留，换来的是快了一大截的新编译器——用 Rust 重写。另外还带来可发布的设计系统、视图过渡样式、一个 ESLint 插件和全新的排版预设。

作者：Adebayo, Adebesin, Adebayo (Panda CSS) | 来源：panda-css.com

四、SvelteKit 3：还是那个框架，只是更干净了^[22]

新功能不多，remote functions^[23] 也仍然是实验状态。但老用户要动点手做迁移，好在 [sv migrate](https://svelte.dev/docs/kit/migrating-to-sveltekit-3 "sv migrate") 能替你干掉大半。

作者：The Svelte Team | 来源：svelte.dev

五、Effect 4.0：核心缩到五分之一，运行时重写^[24]

这个专治资源管理、并发、重试和类型化错误的老库做了彻底重写。最小包体积只有原来的五分之一，每个并发任务的内存占用少了 86%。

作者：Sebastian Lorenz | 来源：effect.website

六、TanStack Charts 1.0：用类型描述图表，再交给 SVG 或 Canvas^[25]

不绑框架：用可摇树的类型化 JavaScript 声明式地描述可视化，再渲染成 SVG 或 Canvas。示例目录^[26]（都带代码）里有折线、柱状、饼图、面积图，还有热力图、箱线图、直方图等等。

作者：Tanner Linsley | 来源：tanstack.com

七、Video.js 10：五个播放器的家底，合成一个^[27]

十六年前把视频从 Flash 手里拽出来的那家公司，这次从头重写了一遍，把 Plyr、Vidstack、Media Chrome 和 Mux Player 背后的团队都请了进来。拿到的是 React 组件和 Web Components、包体积小 60%，以及可以自己做的一套皮肤。

作者：Steve Heffernan | 来源：videojs.org

八、Ink 8.0：要 React 19.3，而且会滚了^[28]

这个热门 TUI 渲染库现在要求 React 19.3，并加上了滚动偏移支持——正好赶上编码 agent 界面里到处都要能滚的需求。

作者：Vadim Demedesh | 来源：github.com

九、Inferno 10：把活儿更多丢给 JSX 编译器^[29]

为极致渲染速度而生的类 React 库，这版把更多工作从运行时挪进了 JSX 编译器。

作者：Inferno Team | 来源：github.com

十、Remix 3.0^[30] · Qwik 2.0 RC^[31] · pnpm 12.10^[32] · Ember 7.3^[33] · ESLint 10.12^[34]

重建后、不再需要 React 的全栈框架 Remix 终于发正式版了，官方博客还没写，RC 那篇^[35]信息更全；Qwik 2.0 进入 RC；pnpm 和 Ember 各递了一个小版本；ESLint 10.12 和上周一样是个性能向更新。

作者：各项目团队 | 来源：各官方仓库 / 博客

工具

一、Lightpanda 1.0：给自动化用的无头浏览器，内存只要 35MB^[36]

用 Zig 从零写的无头浏览器，不做图形渲染，CPU 和内存都只占 Chrome 的一小部分（作者随手跑了一次，约 35MB 内存）。Puppeteer 和 Playwright 都能驱动它，好玩的是还可以直接写普通 JavaScript 脚本控制它^[37]。

作者：Francis Bouvier | 来源：lightpanda.io

二、Gradient Visualizer：把多层 CSS 渐变一层层拆开看^[38]

把一段由多层渐变拼成的 background 粘进去，Ahmad Shadeed 的新工具会逐层拆开：单看某一层、把叠在一起的效果转成 3D 观察、像延时摄影一样回放它绘制的过程；改完直接还你新的代码。

作者：Ahmad Shadeed | 来源：lab.ishadeed.com

库

一、Shaders 开源：190 多个 WebGPU 特效组件，MIT 许可^[39]

这个 WebGPU 特效库的渲染引擎、框架绑定和组件，现在全部改成了 MIT 许可。组件目录^[40]视觉相当能打，支持 React、Vue、Svelte、Solid 和原生 JS。

作者：Simon Le Marchant | 来源：shaders.com

二、pure-web-bottom-sheet：靠 CSS 滚动吸附撑起来的底部面板^[41]

一个轻量、无障碍也到位的底部面板 Web Component，动力来自 CSS scroll snap 和滚动驱动动画。示例在这^[42]。

作者：Vili Ketonen | 来源：github.com

三、CSS Doodle：拿 CSS 当画笔的 Web Component^[43]

把 CSS 当成一门造型语言，用它画图案、背景、图标和生成式装饰。本周发布的 v0.55^[44]加了不少新的平铺类型，站点上的例子^[45]也值得翻一翻。

作者：Yuan Chuan | 来源：css-doodle.com

参考链接：JavaScript Weekly#805^[46] · Frontend Focus#761^[47]