超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 的情况)

相关推荐
伍哥的传说37 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783839 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为