超30倍 QPS 性能提升(相对于NextJS)

前言

因访问速度慢被吐槽前端性能差。

前端说: 明明就是接口慢 关前端啥关系
后端说: 单个接口的qps 都在200以上为什么到前端这边就不行了

实际情况(每个pod 2核4G)

POD 个数 QPS
13 55

原因分析

  • SSR: 页面需要保证需要seo 的数据都返回才能填充数据生成静态HTML字符串
  • 接口分层: 那些并行 那些串行 保证服务端尽量暂用最少时间
  • 实际测试,单个pod 只能在 12以下徘徊

猜测

markdown 复制代码
1. Node 对JSON 的处理慢接口执行效率不行
2. Node 操作大量字符串性能不好

SSR 实验:相同html 字符串不同框架在服务端执行效率(不调用接口直接修改一个随机数)

方案 QPS 结论
纯Node 200 由于没有引入任何第三方框架,代码路径最短,减少了中间层的开销,因此在性能上表现最佳。这符合预期,因为原生Node.js可以提供最高的运行效率,但开发复杂度相对较高
KOA 150~170 Koa是一个轻量级、高度可定制化的Node.js Web框架,其设计哲学是简洁、灵活和高效。相较于纯Node.js,虽然引入了一些额外的抽象和中间件机制,但整体开销仍然较小,故性能接近原生Node.js,略逊于纯Node但优于其他两个框架。
Express 120~140 Express是Node.js生态中最流行、功能丰富的Web框架之一,提供了大量的中间件和便利工具。然而,这种丰富性与便捷性是以牺牲部分性能为代价的。相比Koa,Express的API层级更深,可能包含更多内部逻辑和间接调用,导致其处理相同任务的效率低于Koa
Nextjs 100 Next.js是专为React应用设计的静态站点生成器和服务器端渲染框架,内置了很多高级特性如自动代码分割、路由管理、优化等。它的目标是简化全栈React应用的开发流程,而非极致性能优化。因此,在这个简单的SSR任务中,Next.js需要加载更多依赖、执行更复杂的生命周期方法,性能最低是可以理解的

分析: 代码路径越少执行效率越高,既然node 已经极致不能再提升有没有其他方案能解决这些问题

思考

  • 为什么老早的 JSP PHP 携带的html 没有说性能问题
  • 市面上为什么那么多 自定义 模板库

语言优势加上模板生成Html 快于Node 生成Html

语言 优势
Node 开发方便,性能差
JAVA 框架成熟, 比不上Go 的性能
Go 没有对应的框架,性能接近C++,天然支持高并发,多平台支持

使用Go 来生成 Html

graph TD Vue --> SSR-Node --> DSL--> GO模版HTML+TYPE --> SSR-GO --> SSR-Node

保证GO 生成的Html 和 Node 生成的Html 一致

关键技术

  1. 代码注入(AST 转换 注入自定义渲染方法) 复写这些使用的方法
javaScript 复制代码
import { Fragment, createVNode, mergeProps, renderList, toDisplayString } from "vue";
import { ssrInterpolate, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrRenderList, ssrRenderStyle } from "vue/server-renderer";

2.Proxy 数据(数据依赖关系判断那些是动态的那些是静态的 对于生成 Html 中的模版)

上图看效果 (1 个Pod 的情况)

相关推荐
海上彼尚3 分钟前
使用 npm-run-all2 简化你的 npm 脚本工作流
前端·npm·node.js
开发者小天37 分钟前
为什么 /deep/ 现在不推荐使用?
前端·javascript·node.js
如白驹过隙1 小时前
cloudflare缓存配置
前端·缓存
excel1 小时前
JavaScript 异步编程全解析:Promise、Async/Await 与进阶技巧
前端
Jerry说前后端2 小时前
Android 组件封装实践:从解耦到架构演进
android·前端·架构
步行cgn2 小时前
在 HTML 表单中,name 和 value 属性在 GET 和 POST 请求中的对应关系如下:
前端·hive·html
hrrrrb2 小时前
【Java Web 快速入门】十一、Spring Boot 原理
java·前端·spring boot
找不到工作的菜鸟2 小时前
Three.js三大组件:场景(Scene)、相机(Camera)、渲染器(Renderer)
前端·javascript·html
定栓2 小时前
vue3入门-v-model、ref和reactive讲解
前端·javascript·vue.js
专注API从业者2 小时前
基于 Flink 的淘宝实时数据管道设计:商品详情流式处理与异构存储
大数据·前端·数据库·数据挖掘·flink