大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

WinterCG(Winter Community Group specification)：旨在为 JavaScript 运行时提供一个在 API 互操作性方面进行协作的空间，专注于记录和改进跨运行时（非浏览器）的 Web 平台 API 的互操作性。 本质上是通过运行时之间的讨论、WHATWG/W3C针对新 Web API 和当前 Web API 更改的提案以及现有运行时行为的文档来完成的。

1. 什么是 WinterJS

WinterJS is blazing-fast JavaScript server that runs Service Workers scripts according to the Winter Community Group specification.

WinterJS 是一个速度极快、与 WinterCG 兼容的 Javascript 运行时，由 Rust 编写，使用 SpiderMonkey 引擎执行 JavaScript，并使用 Tokio 处理底层 HTTP 请求和 JS 事件循环。 WinterJS 运行时也可以编译为 WebAssembly，因此是第一个完全可在 Wasmer Edge 中运行的生产级运行时。

以下是 WinterJS 1.0 的主要成就：

• 速度极快，比 Bun、WorkerD 和 Node 更快
• WinterJS 与 WinterCG 规范完全兼容
• Cloudflare API 兼容
• Web 框架支持：Next.js（支持RSC）、Hono、Astro、SvelteKit 等

目前 WinterJS 在 Github 通过 MIT 协议开源，短短时间内已经有 1.4k 的 star，是一个值得关注的前端开源项目。

2.WinterJS 有什么优势

2.1 非常快

WinterJS 1.0 在本机执行时能够每秒处理 150k 请求，使用 WASIX 编译为 Wasm 时每秒能够处理 20k 请求。

截至目前，WinterJS 每秒可以处理的请求数比 Bun：117k reqs/s、WorkerD：40k reqs/s 和 Node 75k reqs/s 更多。本地运行 WinterJS 非常简单，只需要以下几个命令即可：

cargo install --git https://github.com/wasmerio/winterjs winterjs
// 安装包
winterjs tests/simple.js
// 运行脚本，然后打开 https://localhost:8080/ 地址

2.2 与 WinterCG 兼容

自 WinterJS 首次发布以来增加了对 WinterCG 整套 API 的支持，包括：

• 数据获取能力：fetch, URL, Request, Response
• 文件处理：Blob, File
• 流支持：ReadableStream, WritableStream, TransformStream
• 文本编码：TextEncoder, TextEncoderStream, atob, btoa
• 加密：crypto

值得注意的是，转换流中的背压和一些（非常见）加密算法尚未实现。

2.3 Cloudflare API 兼容性

WinterJS 官方希望确保大多数前端框架都可以在 WinterJS 中运行， 因此有两个选择：

• 为每个前端框架创建一个新的集成
• 加入现有 WinterCG 提案

在对 Deno、Cloudflare 和 Fastly 的适配器进行深入分析后，意识到最强的选择是 Cloudflare，因为其已经获得了其他 API 框架的大部分支持，并且最常用。 因此，WinterJS 会继续推进 Cloudflare API 兼容性。

为了支持 Cloudflare Worker ，WinterJS 做了很多工作：

• 通过导入语法支持 ES 模块
• 支持 Node-js 兼容性 API
• 通过 _routes.json 支持调用路由
• 支持文件系统结构

_worker.js
index.html
mystaticimage.jpg

• 支持 Cloudflare 的 WinterCG 自定义 fetch API

export default {
	async fetch(request, env, ctx) {
		return new Response('Hello World!');
	},
}

export default {
  async fetch(request, env, context) {
    // Forward / Proxy original request
    let res = await fetch(request);
    // 添加自定义头
    res = new Response(res.body, res);
    res.headers.set('x-foo', 'bar');
    // 缓存响应
    context.waitUntil(caches.default.put(request, res.clone()));
    // waitUntil() 方法延长了 fetch 事件的生命周期
    // 接受基于 Promise 的任务，Workers 运行时将在处理程序终止之前执行该任务
    // 但不会阻止响应，从而非常适合缓存响应或处理日志记录。
    // Done
    return res;
  },
};

2.4 与现有 Web 框架的兼容性

由于与 Cloudflare Workers API 的新兼容性，WinterJS 现在完全支持以下框架，不仅为框架生成的静态网站提供服务，还允许这些框架进行服务器端渲染 (SSR)，包括：Next.js、Hono、Astro.build、Remix.run、Svelte、Gatsby、Nuxt等等

2.5 支持 React Server Component

WinterJS 最具挑战性的事情之一是运行具有服务器组件支持的 Next.js 服务器，此时渲染可以完全在服务器端完成。

'use client';
//客户端组件
'use server';
// 服务端组件

让 React Server Component 能正常工作的时候也让 WinterJS 发现了 Stream 实现与规范有一些微小的差异，同时还发现了 fetch 实现的一些怪癖。

最终一切问题都得到解决，因此将 Next.js 前端从 Vercel 迁移到 Wasmer Edge 成本更低，而且可复用。

参考资料

https://wasmer.io/posts/winterjs-v1

https://wintercg.org/

https://developers.cloudflare.com/workers/runtime-apis/handlers/fetch/

https://www.reddit.com/r/programming/comments/17m6770/how_fast_is_winterjs/