大家好，我是 ConardLi。
随着 Web 技术的蓬勃发展，服务器端渲染（SSR）逐渐成为了当下前端页面追求高性能的主流技术，用 SSR 构建的项目往往首屏渲染会非常丝滑。但是 SSR 渲染也有可能带来一些其他的性能问题。
我之前做过的很多项目都围绕调试 Node.js 性能问题展开。在这些场景中，导致性能问题的罪魁祸首基本上都是 SSR。SSR 是一种占用 CPU 的活动，很容易成为阻塞 Node.js 事件循环的主要原因。
所以，我对当今最流行的前端库在 SSR 性能方面的现状进行了测试。为此，我构建了一个包含大量元素的样本网站，然后捕获每个库的性能表现。
因此，我们请一个 LLM 编写了一些代码，在容器中使用 div 元素作为 10x10 像素的瓷砖来绘制螺旋：
<script>
const wrapper = document.getElementById('wrapper')
const width = 960
const height = 720
const cellSize = 5
function drawSpiral() {
let centerX = width / 2
let centerY = height / 2
let angle = 0
let radius = 0
const step = cellSize
while (radius < Math.min(width, height) / 2) {
let x = centerX + Math.cos(angle) * radius
let y = centerY + Math.sin(angle) * radius
if (x >= 0 && x <= width - cellSize && y >= 0 && y <= height - cellSize)
{
const tile = document.createElement('div')
tile.className = 'tile'
tile.style.left = `${x}px`
tile.style.top = `${y}px`
wrapper.appendChild(tile)
}
angle += 0.2
radius += step * 0.015
}
}
drawSpiral()
</script>随后，我们要求它使用我们计划测试的所有库创建相应版本，并将实现适配为使用每个库的渲染引擎，而不是依赖于原始示例的 DOM 方法。
这是我们的样本文档的样子，包括所有的 2398 个 <div> 元素：
Fastify 与 Vite 集成设置是检验各种框架 SSR 性能的理想测试平台。
下面，我们将实现执行 SSR 所需的最少样板代码，并比较五大前端库的性能：React、Vue、Solid、Svelte 和 Preact。
同时，我们还测试了 fastify-html（一个 Fastify 封装的 ghtml）和 ejs 通过 @fastify/view 提供的简单替代方案。
我们本次的测试不考虑像 Next.js、Astro 和 Qwik 等工具，以及其他完整的框架，因为它们不提供单独的渲染方法。
对于基于 @fastify/vite 的测试，我们使用了如下所示的样板代码：
import Fastify from 'fastify'
import FastifyVite from '@fastify/vite'
const server = Fastify()
// 注册 FastifyVite 插件
await server.register(FastifyVite, /* options */)
// 等待 Vite 准备就绪
await server.vite.ready()
// 监听 3000 端口
await server.listen({ port: 3000 })所有测试都是在生产构建后运行的，也就是说，在运行 vite build 之后。
唯一的例外是 fastify-html 和 ejs 测试，它们不需要 Vite。
下面是包含所有示例的仓库：https://github.com/platformatic/ssr-performance-showdown
保证一致性
我们确保所有示例都具有相同的特征：
不使用客户端的响应式特性；
所有样式绑定都使用模板字面量，除非对于具体框架不合适，例如 React 和 Solid；
x和y值都使用toFixed(2)创建；除文档壳中的
<style>标签外，不使用其他<style>标签。
测试是在 2020 款 MacBook Air M1 上运行的，配置为 8GB RAM，操作系统为 macOS Ventura，Node.js 版本为 v22。
fastify-html
我们首先介绍一个特例：fastify-html，这是一个封装了 ghtml 的 Fastify 插件，每秒可以处理 1088 个请求。就像前面所说的，这种设置不同于其他设置，因为它不需要 Vite，因为不需要特殊语法或转换。
fastify-html 被添加到测试中作为一个基准。由于它只是一个简单的 HTML 模板库的封装，没有其他库的高级特性，所以它与其他库的对比并不是非常恰当。基于它的简单特性，我们已经预期它会表现得更好，并想看看其他功能齐全的库与它相比会差多少。
下面是我们使用的样板代码 — createHtmlFunction（模拟 @fastify/vite）用于注册渲染文档壳的布局函数：
import Fastify from 'fastify'
import fastifyHtml from 'fastify-html'
import { createHtmlFunction } from './client/index.js'
const server = Fastify()
// 注册 fastify-html 插件
await server.register(fastifyHtml)
// 增加布局函数
server.addLayout(createHtmlFunction(server))作为参考，我们还添加了一个使用旧版 EJS （基于 @fastify/view）的测试，它每秒可以处理 443 个请求。
Vue
位居第二，如果您想要出色的 SSR 性能并想要一个真正全面的库生态系统，Vue 每秒可处理 1028 个请求，它可能是最好的选择。
用于同步服务器端渲染的 Vue API 是 renderToString()：
import { renderToString } from 'vue/server-renderer'
// ...
await server.register(FastifyVite, {
async createRenderFunction ({ createApp }) {
return async () => ({
element: await renderToString(createApp())
})
}
})Svelte
位居第三的是 Svelte 5（仍是 pre-release 版本）每秒发送高达 968 个请求，考虑到其丰富的功能集，这个表现还是相当不错的。
Svelte 拥有自己的非 JSX 模板语法，并且其引擎非常高效，如果你需要一个具有成熟库生态系统的框架并且不想在 SSR 性能上妥协，那么它也是一个绝佳的选择。
用于服务器端渲染的 Svelte API 是来自 Svelte 5 的 render()。
await server.register(FastifyVite, {
root: import.meta.url,
createRenderFunction ({ Page }) {
return () => {
const { body: element } = render(Page)
return { element }
}
}
})注意，render() 函数还会返回 head 和 body 属性。
Solid
排名第四的是 SolidJS，每秒处理 907 个请求。它仅以微小的差距落后于 Svelte。
Solid 是一个非常有前景的 React 替代品，但其生态系统仍在成长中。
我在测试的时候注意到 SolidJS 在其 hydration 过程中使用 ID 其实会导致一些性能问题。对比 Vue 和 Solid 生成的标记如下：
<!-- Vue 生成的标记 -->
<div class="tile" style="left: 196.42px; top: 581.77px"></div>
<!-- Solid 生成的标记 -->
<div data-hk=1c2397 class="tile" style="left: 196.42px; top: 581.77px"></div>这意味着性能开销很大一部分来自于这些需要传输的额外片段。不过，我们希望验证的也正是这一点：在常见、真实的使用情况下（启用 hydration 客户端功能）框架的表现。
在样板代码中，我们使用了 @fastify/vite 的 createRenderFunction 钩子来捕获 Solid 组件函数（createApp）：
import { renderToString } from 'solid-js/web'
// ...
await server.register(FastifyVite, {
root: import.meta.url,
createRenderFunction ({ createApp }) {
return () => {
return {
element: await renderToString(createApp)
}
}
}
})Preact
React 的 “弟弟” Preact 排名第五，每秒处理 717 个请求。尽管 Preact 与 React 非常相似，但很多细节上的差异使得 Preact 更快且更轻量。
用于同步服务器端渲染的 Preact API 是 renderToString()：
import { renderToString } from 'preact-render-to-string'
// ...
await server.register(FastifyVite, {
root: import.meta.url,
createRenderFunction ({ createApp }) {
return () => {
return {
element: renderToString(createApp())
}
}
}
})React
React 19 RC 排名第六，每秒处理 572 个请求。
用于同步服务器端渲染的 React API 是 renderToString()：
import { renderToString } from 'react-dom/server'
// ...
await server.register(FastifyVite, {
root: import.meta.url,
createRenderFunction ({ createApp }) {
return () => {
return {
element: renderToString(createApp())
}
}
}
})总结
参考：https://blog.platformatic.dev/ssr-performance-showdown
最后
抖音前端架构团队目前放出不少新的 HC ，又看起会的小伙伴可以看看这篇文章：抖音前端架构团队正在寻找人才！FE/Client/Server/QA，25 届校招同学可以直接用内推码：DRZUM5Z，或者加我微信联系。
如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。
点赞和在看是最大的支持⬇️❤️⬇️
扫一扫
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
