#新动态 | 折腾啥

Forwarded from cosine - 前端人の日常频道

#前端 #新动态
PocketJS：在 32MB 内存 PSP 上跑 Modern Web 的极致跨平台 UI 框架：作者分享了如何利用 QuickJS、SolidJS/Vue Vapor 和 Claude 辅助，将现代 Web 框架塞进老掌机并跑满 60 帧的硬核经历。

AI 摘要：
• 极致的硬件压榨：PocketJS 将 QuickJS 移植到仅有 32MB 内存的索尼 PSP 上，结合 SolidJS / Vue Vapor 和编译期 Tailwind 样式引擎，在仅占 8MB 内存的情况下实现了 60fps 流畅动画。
• Claude 拯救陈年老坑：该项目起源于作者 5 年前因初始化崩溃而搁置的 PSP-JS，这次在 Claude 协助下修掉了最后 3 个底层 Bug 成功点亮屏幕，作者感叹当年离成功只差一步。
• React 惨遭淘汰：在 PSP 极其受限的内存下，原生 React 连首屏 JS_Eval 都跑不通直接出局；而 SolidJS 和 Vue Vapor 表现惊艳，能完美卡进 16ms 的帧预算，成为 PocketJS 的主力支持框架。

🧵 讨论串 • FixupX

Yifeng "Evan" Wang (@ewind_dev)

非常激动地和大家分享，在 Fable 加持下，我终于做出了多年来设想中最极致的跨平台 UI 框架，这就是 PocketJS！

将 QuickJS 移植至内存仅 32MB 的索尼 PSP，结合标准版 SolidJS 和 Vue Vapor，配合编译期 tailwind 样式引擎，实现了 8MB 内存下 60fps 的流畅动画！

来拥抱裸金属 Modern Web 吧！

引用 PocketJS (@pocket_js)

Introducing PocketJS 🕹️

import { createSignal…

Forwarded from cosine - 前端人の日常频道

#优质博文 #JavaScript #前端 #新特性 #浏览器
好东西。
URLPattern is now Baseline Newly available

AI 摘要：介绍了已进入 Baseline 的新浏览器功能 URLPattern API，它为 URL 匹配和路由提供了标准、简洁且高性能的原生解决方案。过去开发者需使用复杂的正则表达式或第三方库来解析和提取 URL 参数，而 URLPattern 使得这些操作更清晰、可维护且无需额外依赖。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. URLPattern 基础与核心概念
• 介绍 URLPattern API 的推出背景：取代传统正则匹配与第三方路由库。
• 提供新 URLPattern 接口，可通过 .test() 与 .exec() 操作直接匹配并提取参数。

2. 基本 URL 模式匹配
• 对比旧方法（URL + 正则）与新 API 的简化写法。
• 展示匹配 /users/:id 的例子，体现代码可读性和简洁性。

3. 提取动态参数（Dynamic Parameters）
• 传统方法依赖匿名的正则捕获组，易出错。
• URLPattern 支持命名参数，可通过结构化对象获取（如 result.pathname.groups）。
• 示例：提取书籍分类 category 与 id。

4. 复合匹配（Compose Multipart Matches）
• 传统方式需多处判断主机名与路径。
• URLPattern 原生支持同时匹配多个部分，例如 hostname + pathname。
• 示例：匹配 .cdn.com 下的 /images/ 文件。

5. 减少项目依赖（Project Dependencies）
• URLPattern 是内置能力，无需加载第三方库，减少 bundle 体积与维护成本。
• 使用浏览器原生实现，跨引擎一致且性能更优。

6. 深度用法详解（Detailed Usage）
• 多种典型场景：
• 路径匹配与参数提取：示例 /products/:category/:id 展示 .test() 与 .exec() 双用法。
• 匹配子域名与版本号：支持在 hostname 层定义变量如 :subdomain.myapp.com，适用于多子域架构。
• 通配符与正则表达式结合：通过 * 和嵌入式正则增强匹配灵活度，如 /users/:userId(d+)/assets/*.(jpg|png|gif)。

7. 实战示例：Service Worker 路由
• 利用 URLPattern 拦截 fetch 事件，根据路径实行不同缓存策略。
• 示例：
• /images/* 采用缓存优先；
• /api/* 使用网络优先。
• 显示该 API 在渐进式 Web 应用（PWA）中的现实意义。

8. 结语与扩展阅读
• URLPattern 提升代码可维护性，简化路由逻辑。
• 推荐进一步查阅 MDN Web Docs 了解完整参考。

author Jay Rungta

web.dev