```html

Web前端

上周帮朋友改一个企业官网，打开控制台，红色报错刷了满屏。仔细一看，三个 Uncaught TypeError 全是因为同一个变量名在四个不同作用域里被重复声明。这事让我想起刚入行时，总觉得前端就是写写页面，画几个按钮。真干起来才发现，浏览器比女朋友还难伺候——你永远不知道她下一秒会用什么姿势渲染你的代码。

前端这行当，表面看是 HTML、CSS、JavaScript 三件套。实际上呢？昨天调一个 flex 布局，在 Chrome 上完美居中，到了 Safari 就偏了 2px。查了半天，发现是 align-items: center 在 Safari 15 里对 min-height 的计算有 bug。这种破事没人能提前告诉你，只能踩坑、记笔记、下次绕道走。

我见过不少新人抱着《JavaScript高级程序设计》啃了三个月，结果连一个购物车加减功能都写不利索。问题出在哪？前端是门手艺活，不是理论课。 你背熟了原型链、闭包、事件循环，但没亲手处理过移动端 300ms 点击延迟，没被 z-index 层级搞到凌晨两点，那些概念就永远是飘在空中的。

“为什么我的弹窗被视频盖住了？”——因为视频用了硬件加速，独立合成层，z-index 再高也白搭。这种知识，文档里不写，只有做过视频网站的人才知道。

工具链也是个无底洞。五年前大家用 jQuery 一把梭，现在呢？Webpack、Vite、Rollup、esbuild……名字都记不全。我上个月想搭个简单的静态页，装了 Vite，结果光 vite.config.js 就写了四十行，各种插件配置、路径别名、代理设置。回头一想，这页面就三个 HTML 加一个 CSS 文件，直接扔服务器上不就完了？

但话说回来，前端最有意思的地方也在这儿。你写 document.querySelector，浏览器真的去 DOM 树里找；你改 element.style，它立刻重绘。这种即时反馈，比后端编译十分钟再跑单元测试爽多了。我至今记得第一次用 requestAnimationFrame 做出一个平滑滚动动画时，盯着屏幕傻笑了五分钟。

---

性能优化是个永恒话题。有个电商项目，首页图片加起来 8MB，老板说“加载慢就加个 loading 动画”。我打开 Network 面板一看，好家伙，每张图都是 2000px 宽的原图，直接塞进 300px 的卡片里。压缩、转 WebP、加 loading="lazy"，三下五除二，体积降到 600KB。老板问怎么做到的，我说“把大象放进冰箱”。

框架之争更是热闹。React 和 Vue 的粉丝互相瞧不上，Angular 在旁边默默更新版本。我的看法很朴素：能按时交付、方便同事接手、出 bug 能快速定位的，就是好框架。 去年接手一个用 React 16 写的后台，class 组件混着 hooks，状态管理用 Redux 又套了一层 MobX。改一个按钮颜色，要翻五个文件。这种代码，框架再牛也是灾难。

移动端适配是另一道坎。设计师给个 750px 的设计稿，你得考虑 iPhone SE 的 320px 和 iPad Pro 的 1024px。rem、vw、百分比、媒体查询，每种方案都有坑。我现在的习惯是——先写移动端，再往上加断点。因为手机屏幕小，逼着你把核心内容排明白。反过来先做桌面端，往往到手机上一团糟。

最后说个真事。前阵子面一个三年经验的前端，简历上写着“精通 Vue 源码”。我问他：v-model 在自定义组件上怎么实现的？他愣了一下，说“就是双向绑定啊”。我又问：那 .sync 修饰符和 v-model 有啥区别？他沉默了。后来我让他回去等通知。不是故意刁难，而是——你可以不精通源码，但不能连天天用的语法都说不清。

前端变化快，今天学的明天可能就过时。但有些东西不会变：对细节的敏感、对用户体验的在意、遇到问题能静下心查文档的能力。这些比会背多少 API 重要得多。

```