网页架构设计

一个网页崩了，网页用户刷新十次还是架构白屏。技术群里吵翻了天，设计有人说是网页服务器扛不住，有人说是架构数据库锁死了，最后查出来是设计前端代码里一个死循环把浏览器主线程卡死了。这事让我想起一个道理：网页架构设计，网页从来不是架构后端工程师的专利，它从你写下第一行HTML标签时就开始了。设计

你看那些小网站，网页首页一个HTML文件，架构CSS和JS全塞在里头，设计图片直接丢在根目录。网页这种架构能跑，架构但改起来要命。设计上周帮朋友改他三年前写的个人博客，光是找一个按钮的颜色样式，就得翻四百多行内联CSS。这哪是架构，这是毛线团。

真正的网页架构，第一层是物理结构。目录怎么分，文件怎么命名，静态资源放哪，API路径怎么规划。这些听着琐碎，但决定了项目活多久。我见过一个团队，所有图片都扔在/img下，后来图片多了，不得不改成/img/2024/06/产品图-01.png这种带日期和分类的命名。改一次，全站引用全崩，加班三天。早干嘛去了？

第二层是逻辑分层。现在流行前后端分离，前端又拆组件、状态、路由、服务层。但很多人拆是拆了，边界画得跟幼儿园小朋友涂鸦似的。组件里直接写fetch请求，状态管理里塞业务逻辑，路由守卫里调接口。我见过最离谱的，一个按钮的点击事件里，直接new了一个XMLHttpRequest。这种代码，三个月后没人敢动，谁动谁背锅。

第三层才是性能架构。这层最容易被忽略，但用户感知最强。去年双十一，某电商网站活动页首屏加载花了8秒，用户流失率直接飙到67%。后来他们把首屏拆成静态骨架+异步数据填充，把图片改成懒加载，把非关键JS加defer，首屏压到1.2秒。流失率降了一半。性能不是优化出来的，是架构设计时就得留好口子。

我见过最聪明的做法，是一个小团队做的官网。他们把页面静态化，扔到CDN上，后端只负责处理表单提交和评论。整个站扛住了十万并发，服务器成本一个月才两百块。你说他们懂架构吗？他们不懂什么微服务、容器编排，但他们懂一个道理：能用静态解决的，就别上动态；能在浏览器端算的，就别发到服务器。

但架构设计也有翻车的时候。有个朋友公司做SaaS，一开始图省事，所有客户共用一套数据库，表名加前缀区分。客户少时没事，客户一多，查询慢得像蜗牛。后来不得不拆库，迁移数据那两周，天天凌晨三点爬起来看脚本跑完没。这教训告诉我：架构设计时，多想想未来一年、三年、五年，别只看眼前能跑。

说到底，网页架构设计不是什么高深理论，就是给代码找个合适的家，给请求找条顺畅的路，给改动留个不疼的口子。它像房子的承重墙，平时看不见，地震时才显真章。那些写完就跑的代码，迟早要还债。你与其祈祷别出问题，不如一开始就多花半小时想想：这个文件放哪，这个函数归谁管，这个请求走哪条链路。

最后说个真事。有个外包项目，客户要求改个文案，前端工程师找了半天，发现文案写在构建配置里。他花了三十分钟改完，又花了四十分钟重新构建部署。客户问为什么这么慢，他说架构就这样。客户后来把项目转给了另一家公司，那家公司把文案挪到了JSON配置文件里，改完刷新就生效。

你看，架构设计的差距，平时看不出来，一改需求就现原形。