扒光 OpenAI 前端：十亿用户的 ChatGPT 网页版，底层居然这么“普通”？-拓冰建站

我们总觉得像 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 7：OpenAI 的前端折腾史

回看 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 7，ChatGPT 也完成了它们的第二次进化。在现在的网页源码中，我们可以清晰地看到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 的融合方案，更贴合他们“轻框架、重调优”的极简架构。