大家好，我是双越老师，也是 wangEditor 作者。
我正开发一个 Node 全栈 AIGC 知识库 划水AI，包括 AI 写作、多人协同编辑。复杂业务，真实上线，大家可以去注册试用，围观项目研发过程。
关于前端性能优化的困惑
前端性能优化是前度面试常考的问题，答案说来复杂，其实总结下来就是：减少或拆分资源 + 异步加载 现在都搞成八股文了，面试之前背诵一下。
还有缓存。
但纯前端的缓存其实作用不大，使用场景也不多，例如 Vue computed keep-alive，React useMemo 在绝大部分场景下都用不到。虽然面试的时候我们得说出来。
HTTP 缓存是网络层面的，操作系统和浏览器实现的，并不是前端实现的。虽然作为前端工程师要掌握这些知识，但大多数情况下并不需要自己亲自去配置。
实际工作中，其实绝大部分前端项目，代码量都没有非常大，不拆分代码，不异步加载也不会有太大的影响。
我这两年 1v1 评审过很多前端简历，大家都会有这样一个困惑：问到前端性能优化，感觉工作几年了，也没做什么优化，而且也想不出前端能做什么优化。
其实这是正常的，绝大部分前端项目、前端工作都不需要优化，而且从全栈角度看，前端能做的优化也很有限。
但面试是是面试，工作是工作。面试造火箭，工作拧螺丝，这个大家都知道，不要为此较真。
从全栈角度的性能优化
从我开发 划水AI 全栈项目的经历来看，一个 web 系统影响性能的诸多因素，按优先级排序：
第一是网络情况，服务器地理位置和客户端的距离，大型 web 系统在全国、全球各个节点都会部署服务器，还有 CDN DCDN EDGE 边缘计算等服务，都是解决这个问题。
第二是服务端的延迟，最主要的是 I/O 延迟，例如查询数据库、第三方服务等。
第三是 SSR 服务端渲染，一次性返回内容，尽量减少网络情况。
第四才是纯前端性能优化，使用 loading 提示、异步加载等。其实到了纯前端应该更多是体验优化，而不是性能优化。
网络
网络是最重要的一个因素，也是我们最不易察觉的因素，尤其初学者，甚至都没有独立发布上线过项目。
划水AI 之前部署在海外服务器，使用 Sentry 性能监控，TTFB 都超过 2s， FCP 接近 3s ，性能非常糟糕。
原因也很明显，代码无论如何优化，TTFB 时间慢是绕不过去的，这是网络层面的。
还有，之前 CDN 也是部署在香港的，使用站长工具做测试，会发现国内访问速度非常慢。
文档的多人协同编辑，之前总是不稳定重新连接。我之前一直以为是代码哪里写错了，一直没找到原因，后来发现是网络不稳定的问题。因为协同编辑服务当时是部署在亚马逊 AWS 新加坡的服务器。
这两天我刚刚把 划水AI 服务迁移到国内，访问速度从感知上就不一样了，又快又稳定。具体的数据我还在跟踪中，需要持续跟踪几天，过几天统计出来再分享。
服务端响应速度
首先是数据库查询速度，这是最常见的瓶颈。后端程序员都要熟练各种数据库的优化手段，前端不一定熟练，但要知道有这么回事。
现在 划水AI 数据库用的是 Supabase 服务，是海外服务器。国内目前还没有类似的可替代服务，所以暂时还不能迁移。
所以每次切换文档，都会有 1s 左右的 loading 时间，体验上也说的过去。比用之前的 AWS 新加坡服务器要快了很多。
其次是第三方服务的速度，例如 AI 服务的接口响应速度，有时候会比较慢，需要等待 3s 以上。
但 deepseek 网页版也挺慢的，也得 loading 2-3s 时间。ChatGPT 倒是挺快，但我们得用中转服务，这一中转又慢了。
还有例如登录时 GitHub 验证、发送邮件验证等，这个目前也不快，接下来我会考虑改用短信验证码的方式来登录。
第三方服务的问题是最无解的。
SSR 服务端渲染
服务端获取数据，直接给出结果，或者判断跳转页面（返回 302），而不是前端 ajax 获取数据再做判断。
后者再如何优化，也会比前者多一步网络请求，50-100ms 是少不了的。前端压缩、拆分多少资源也填不上这个坑。
纯前端性能优化
面试中常说的性能优化方式，如 JS 代码拆分、异步组件、路由懒加载等，可能减少的就是几十 KB 的数据量，而这几十 KB 在现代网络速度和 CDN 几乎感知不出来。
而且还有 HTTP 缓存，可能第一次访问时候可能慢一点点，再次访问时静态资源使用缓存，就不会再影响速度。
最后还有压缩，网络请求通常采用 GZIP 压缩，可把资源体积压缩到 1/3 大小。例如，你把 JS 减少了 100kb，看似优化了很多，但实际在网络传输的时候压缩完只有 30kb ，还不如一个图片体积大。
而有时候为了这些优化反而把 webpack 或 vite 配置的乱七八糟的，反而增加了代码复杂度，容易出问题。
但前端可以做很多体验优化的事情，例如使用 loading 效果和图片懒加载，虽然速度还一样，但用户体验会更好，使用更流畅。这也是有很大产品价值的。
最后
一个 web 系统的性能瓶颈很少会出现在前端，前端资源的速度问题在网络层面很好解决。所以希望每一位前端开发都要有全栈思维，能站在全栈的角度去思考问题和解决问题。
有兴趣的同学可关注 划水AI 项目，Node 全栈 AIGC 知识库，复杂项目，真实上线。