前端做完项目学到了什么

前端项目收尾那天，前端我盯着浏览器里那个自己写了三周的做完页面，突然发现最值钱的项目学东西不是跑通的代码，而是前端调试时踩过的那些坑。

比如那个登录表单。做完最初我按设计稿做，项目学输入框、前端密码框、做完按钮排得整整齐齐，项目学校验规则也写得清清楚楚。前端结果一测试，做完用户用手机浏览器输入时，项目学虚拟键盘弹出来把按钮挡住了。前端我改了一个小时，做完加滚动、项目学调布局、换单位。后来才明白，问题出在我没想过“用户手指头比鼠标粗”这件事。代码没问题，是假设错了。

样式命名也是。我一开始用 .box1、.box2 这种名字，写到后面自己都忘了哪个是哪个。改一个颜色要找半天，改完又怕影响其他模块。后来学乖了，用语义化命名，比如 .user-card、.order-total。现在回头看，那不是规范问题，是给未来的自己留的活路。

还有一次，接口返回的数据结构跟我预期的不一样。后端同事说“你容错处理一下就行”，我心想这不就加个判断嘛。结果一写，发现要处理的情况比正常流程还多——字段可能为空、数组可能超长、状态码可能不在文档里。那一刻我才懂，所谓“健壮性”，不是代码写得漂亮，而是对别人的不确定性有耐心。

跟设计稿较劲也让我学会一件事：像素级还原不等于好体验。那个按钮，设计稿上是 20px 的圆角，我调成 16px 后看着更协调。跟设计师商量，她说“你看着办吧”。后来我悟了，设计稿是参考坐标，不是铁律。真正的标准是用户看着舒服、点着顺手。

性能这块，我用的是最笨的办法。图片懒加载、代码分割、CDN 加速，这些都是网上抄来的方案。真正让我有感觉的是，我拿 Chrome 的 Lighthouse 跑了一遍，发现首屏渲染要 2.8 秒。我删掉了几个没用到的动画库，压缩了几张背景图，降到 1.2 秒。数字不会骗人，那个优化前后的对比，比任何教程都直观。

最烦的是调浏览器兼容性。IE 已经没人管了，但 Safari 偶尔闹脾气，flex 布局里 gap 属性不支持，我折腾了半个下午。最后用 margin 代替，问题解决。这事给我长了个记性：新技术好用，但得先看看你的用户用什么浏览器。技术选型不是追新，是选稳。

项目上线那晚，我守着监控面板看有没有报错。前半小时一切正常，我刚准备松口气，一条报错弹出来——某个用户上传了超大的图片，把内存搞爆了。我连夜加了图片压缩逻辑，第二天早上再去看，一切平稳。那种感觉，怎么说呢，就像你养了只猫，它半夜吐了，你得爬起来收拾，但收拾完它又蹭你腿，你就不气了。

做完这个项目，最大的收获不是学会了某个框架，而是开始习惯用“真实用户”的视角去审视每一行代码。写的时候多问自己一句：如果这个人用的是旧手机、弱网、粗手指，他还能顺利操作吗？

前端这行，技术迭代快得让人焦虑，但底层的东西没变过——你写的每一行代码，最终都是给一个具体的人用的。那个人可能正站在地铁里单手刷手机，可能眼神不太好，可能网速很烂。你能做的，就是别让他觉得难用。这个认知，比任何技术栈都值钱。