前端开发工程师

一个前端开发工程师的日常，从打开浏览器 DevTools 那一刻就开始了。工程昨天我调一个 flex 布局，前端父容器设了 align-items: center，工程子元素死活不垂直居中。前端查了十分钟，工程发现是前端子元素上有个 margin: auto 0 在捣乱。删掉，工程好了。前端这种破事每天能遇上七八回，工程没脾气，前端习惯了。工程

很多人觉得前端就是前端写页面的。写页面不假，工程但“写页面”这三个字太轻了。前端我上周刚把一个列表页的渲染耗时从 420ms 压到 90ms，靠的是把 Array.prototype.map 里嵌套的 find 换成了 Map 查表。代码量少了，性能翻了四倍多。这活儿跟“画界面”没半点关系，纯粹是数据结构的事。

前端工程师得同时活在三个世界里。浏览器渲染引擎是一个——你得知道 transform 为什么比 top/left 快，合成层什么时候会炸，will-change 用多了反而卡。第二个世界是工程化。Webpack 的 splitChunks 配置我改过十几版，从 chunks: 'all' 到手动分包，最后用 cacheGroups 按路由拆。打包体积从 2.3MB 降到 680KB，首屏加载从 4.1 秒到 1.7 秒。老板不会管你用了什么 tree-shaking 还是 code-splitting，他只看到“快了”。

第三个世界最容易被忽略——产品逻辑和交互细节。按钮点下去要有反馈，哪怕只是 :active 时缩小 2%。表单校验不能等提交才报错，失焦就该提示。滚动加载要防抖，但防抖时间设 200ms 还是 300ms，得看用户手指离开屏幕的平均速度。这些事没人写进 PRD，前端不兜底，用户就骂“这破网站真难用”。

我见过一个刚入行的前端，把 v-if 和 v-show 用反了。列表项有 200 条，每条都用 v-if 控制显隐。切换筛选条件时页面直接卡死三秒。改成 v-show 后丝滑了。他没学过编译原理，但那次之后他记住了：频繁切换用 v-show，初始渲染用 v-if。

框架更新快得离谱。Vue 3 的 Composition API 刚摸熟，Vapor Mode 又出来了。React 那边 Server Components 还没整明白，use 钩子又进实验阶段。学不完，根本学不完。但底层的东西没怎么变——事件循环、原型链、闭包、HTTP 缓存。这些搞懂了，换框架就是换套语法的事。

薪资倒挂也挺有意思。一个能独立搭 Monorepo、配 CI/CD、写 E2E 测试的前端，在杭州能拿 35K。只会写 div 加 css 的，8K 都悬。差距不在写页面的速度，在于能不能把“页面”这两个字拆开再拼回去。拆开是渲染、网络、构建、状态管理、错误监控、性能指标。拼回去是一个用户点着不卡、看着舒服、用着不骂娘的产品。

我入行那年，jQuery 还是主流。现在写 document.querySelector 都觉得啰嗦。工具在变，需求在变，唯一不变的是：用户永远嫌慢，老板永远嫌贵，而你夹在中间，得用代码找到一个平衡点。这个平衡点，就是前端开发工程师的价值。

今天下午又有个 bug。移动端键盘弹起时，底部固定按钮被顶上去一半。试了 position: fixed 加 bottom: env(safe-area-inset-bottom)，iOS 上好了，安卓还有问题。最后用 visualViewport API 监听高度变化，动态调 transform。搞定。你看，又是这种破事。但搞定的瞬间，挺爽的。