我们总觉得像 OpenAI 这种科技巨头前端架构一定高深莫测肯定堆满了各种自研的“黑科技”框架。但最近一位国外工程师对 ChatGPT 网页版进行了深度逆向工程扒开它的底层代码后结果却让所有大厂的架构师陷入了沉默。ChatGPT 网页版每个月有差不多 10 亿用户访问这在整个互联网流量版图里都是绝对的头部。我们本以为这种规模的站点前端必然要上一些惊世骇俗的专用系统但扒开底细一看它的核心技术栈竟然全是普通得不能再普通的开源大路货。一套开源“全家桶”大厂魔改不如老实调优为了支撑起十亿人的日常对话OpenAI 的前端武器库主要由这些成熟的开源包组成React 19 配合 react-dom 充当运行时底座是刚刚合并 Remix 后的 React Router 7 框架模式样式全部用 Tailwind CSS 搞定无障碍组件是 Radix UI 的原件而最核心的对话输入框 and 代码编辑器分别用了 ProseMirror and CodeMirror 6。相比之下谷歌的 Gemini 网页端代码里堆满了各种 Google 特有的、外面人根本看不懂的私有库。OpenAI 的这套选型却非常亲民甚至跟我们平时写的一个普通单页应用没多大区别。这种“不发明新轮子、只把成熟技术调优到极致”的极简主义其实才是真正的架构智慧。从 Next.js 到 React Router 7OpenAI 的前端折腾史回看 ChatGPT 的前端演进史也是一次挺有意思的技术摸爬挂打。在 2022 年 11 月底上线时ChatGPT 只是一个用来收集反馈的“研究预览版”当时用的是 Next.js 12 的 Pages Router。在一夜之间流量疯狂暴涨后OpenAI 内部却始终没有去碰后来 Next.js 极力推崇的 App Router 架构。他们在 Pages Router 上硬顶了快两年然后在 2024 年秋天做出了一个让社区哗然的决定彻底抛弃 Next.js投入 Remix 的怀抱。在刚迁移到 Remix 的那段日子里OpenAI 的写法其实非常取巧。他们虽然在服务器端跑了一套 Express 架构来读取页面数据但其实服务端几乎没有渲染任何实质性的 UI只吐出了一个空壳 HTML、一些资源预加载链接 and 一套全局主题脚本。数据请求主要靠 TanStack Query 在客户端发起Remix 在当时更像是一个强力的 SPA 壳子。但随着 Remix 正式升级合并为 React Router 7ChatGPT 也完成了它们的第二次进化。在现在的网页源码中我们可以清晰地看到ssr: true的标志。他们全面开启了 React Router 7 的全套流式服务端渲染SSR模式未登录状态下的首页 and 大部分功能都被渲染成了真正的高性能 HTML 直接返回给浏览器。更硬核的是ChatGPT 的路由表里静默躺着 350 多个路由但其中只有十几个是真正的对话交互页面剩下的全是各种语言版本的营销官网 and 定价页。很多大厂喜欢把营销官网跟产品应用拆成两套系统比如 Linear 的官网就跑在 Next.js 上而应用跑在另一个 SPA 里。OpenAI 却反其道而行之把官网 and 核心聊天功能全写在同一个 Repo 里的同一个 React Router 下。这带来的直接好处是用户从官网点击进入聊天页面走的是极其丝滑的客户端路由跳转不需要重新建立网络连接体验顺滑得像在用原生 App。秒开交互的底层狠招把灰度与资源加载剥离到极致既然用的是人人皆知的开源框架ChatGPT 到底是怎么在十亿用户面前做到“免登秒开、交互流畅”的经过逆向分析我们发现了他们在加载性能上砍掉的几刀。第一刀砍在了“灰度判定”的运行位置上。很多大厂为了做 A/B 测试喜欢把实验控制引擎的 JS 塞给浏览器去跑。这代表着浏览器不仅要下载额外的脚本还要在主线程上先算一会儿才能决定给用户展示什么界面这非常阻塞首屏渲染。而 OpenAI 把 Statsig 这套灰度开关的逻辑完全放到了 Cloudflare 的边缘 CDN 节点去算。当请求到达边缘节点时服务就直接算好了这个用户该进入哪些实验组并把结果直接以一段 JSON 的形式注入到 HTML 的 Head 头部。浏览器拿到 HTML 后直接读取结果省去了任何在客户端运行逻辑的开销。第二刀砍在了“非核心资源的延迟加载”上。我们总觉得首屏渲染要把所有东西都备齐但 ChatGPT 的性能优化哲学是只服务于用户的第一个动作——打字输入。为了让用户一进来就能在输入框里打字首屏加载时OpenAI 延迟加载了几乎所有不影响初始交互的 JS 资源。比如用来给回答排版 markdown 的解析器、给代码块高亮的 CodeMirror 插件、用来排版复杂数学公式的 KaTeX 引擎在页面首次呈现时根本没有下载。直到用户在输入框里开始敲键盘、甚至按下回车发送的那个瞬间页面才在后台通过dynamic import默默开始拉取这些厚重的 JS 库。不仅如此为了免去字体文件下载的时间开销ChatGPT 的 UI 字体全部采用系统原生自带的 font stack不加载任何自定义网页字体。允许十亿人“白嫖”背后有一堵看不见的指纹盾牌最后一个在看不见的地方立功的细节是它的“安全防爬机制”。允许十亿人免登录直接用这在商业 and 技术上都需要面临极大的风控挑战稍有不慎API 接口就会被成千上万的黑客爬虫薅秃。为了支撑这个无摩擦体验OpenAI 在后台悄悄部署了一套自研的 Sentinel 浏览器指纹校验系统并配合 Cloudflare 在 CDN 层面做拦截。这套指纹系统会在页面加载时静默收集浏览器的底层环境参数合成出独一无二的设备签名在网络底层完成无感的人机校验。正是这层隐藏在水面下的高强度安全盾牌才让水面上的普通用户能够免去点选“哪里有红绿灯”的验证码折磨实现秒开即用的爽快感。写在最后务实的工程美学逆向完 ChatGPT 网页版比起它表面上用到的高深黑科技最让我感慨的反而是它骨子里对细节的务实。性能优化 and 优秀的前端架构往往不需要靠物色多么偏门、新潮的冷门框架也不靠在 Repo 里塞满自研的 kpi 轮子。相反把最普通的 React and 开源路由调优好在边缘计算、动态预加载、极端懒加载 and 字体精简上花死功夫你同样能给十亿用户呈现出一款秒开、丝滑的前端大作。 常见问题解答FAQ问ChatGPT 网页版为什么不继续使用 Next.js 了答Next.js Pages Router 已经能满足其早期需求但随着流量飙升Next.js App Router 的复杂度和性能开销超出了他们的预期。而 React Router 7合并 Remix 后提供了一个更纯粹、开销更低、完全由 Vite 驱动的 SPA 与流式 SSR 的融合方案更贴合他们“轻框架、重调优”的极简架构。问把营销落地页 and 聊天应用同构在同一个单页 Repo 里不会导致首屏打包体积过大吗答不会。这是因为 React Router 7 基于 Vite 实现了精细的路由分包Code Splitting。只有用户实际访问的页面组件才会被加载未访问页面的 JS and CSS 资源完全处于按需拉取状态。这种大仓同构反而换来了“从落地页到应用客户端无缝跳转”的极佳体验。问Sentinel 指纹系统会对用户的日常使用造成隐私泄露或卡顿吗答不会。该系统是一套运行在底层的轻量级无感人机对抗算法它只提取浏览器软硬件配置的交叉特征如 Canvas 渲染特征、系统字体等来合成唯一的设备签名在网络握手时完成验证不会收集敏感隐私且运行耗时在毫秒级完全不影响渲染性能。
)
