web前端心得体会

第一次用 `position: absolute` 把弹窗居中，端心得体我写了四行 CSS，端心得体调了半小时。端心得体后来发现 `transform: translate(-50%,端心得体 -50%)` 两行搞定。那会儿没人告诉我这些，端心得体全靠 F12 一行行试出来。端心得体前端这行，端心得体很多知识就是端心得体这样——看十遍教程不如自己踩一次坑。

刚入行时我特别迷信“最佳实践”。端心得体网上说要用 Flexbox 布局，端心得体我就把所有 `float` 都换掉；说 CSS-in-JS 是端心得体未来，我立马把项目里的端心得体 `.scss` 全删了。结果一个简单的端心得体响应式卡片列表，用 Grid 写出来只有 8 行，端心得体维护起来比之前 30 行的端心得体 Flexbox 嵌套清晰得多。但另一个后台表格页面，我强行上 Grid 反而把代码搞复杂了——列宽不固定、内容动态增减，最后还是退回 `

浏览器兼容性是个绕不开的坎。2021 年我接了个政府项目，要求兼容 IE11。`Promise` 要引 polyfill，`flex` 布局得写 `-ms-` 前缀，连 `Object.assign` 都得自己包一层。最坑的是 `input` 的 `placeholder` 颜色，IE 下得用 `:-ms-input-placeholder` 伪类，而且不支持透明度。那段时间我养成了一个习惯：写完样式先在 Chrome 看效果，再切到 IE 看有没有崩。后来项目上线，用户里用 IE 的不到 3%，但就是这 3% 决定了验收能不能过。现在虽然 Edge 都换 Chromium 了，可每次看到 `can I use` 上那些红黄绿格子，还是会条件反射地多留个心眼。

性能优化这事，我吃过一次大亏。有个电商详情页，图片多、评价列表长，首屏加载 4 秒多。我第一反应是压缩图片、上 CDN，折腾一圈只降到 3.8 秒。后来用 Lighthouse 一跑，发现主线程被一个 200KB 的第三方统计脚本堵了 1.2 秒。把它改成 `defer` 加载，又用 `content-visibility: auto` 把首屏外的评价模块延迟渲染，直接干到 1.9 秒。教训就是：别凭感觉猜瓶颈，工具比人准。现在我做任何页面，DevTools 的 Performance 面板必开，录制一遍看火焰图，哪里长任务一目了然。

框架学多了反而容易迷糊。Vue 的 `v-model` 用着顺手，React 的 `useState` 写多了也习惯，但有一次我同时维护两个项目，一个 Vue2 一个 React18，改完 `this.$set` 转头去写 `setState`，脑子差点短路。后来我强迫自己回归基础：不管什么框架，本质都是操作 DOM、管理状态、处理事件。把原生 JS 的 `addEventListener`、`querySelector` 写熟了，再看框架的响应式原理，反而更通透。现在新人问我先学什么，我都说先把 `document.getElementById` 和 `fetch` 玩明白，框架三天就能上手。

前端变化快，但有些东西没变。语义化标签、可访问性、代码可读性，这些跟用什么工具无关。我见过用最新技术栈写出来的页面，`div` 套 `div` 套了七层，屏幕阅读器读出来全是“分组”。也见过老项目用 jQuery 写的表单，`label` 和 `input` 关联得清清楚楚，键盘 Tab 顺序完全符合直觉。技术会过时，但对用户体验的尊重不会。

写了六年页面，最大的心得就一句：别把前端当画图工具。每一个像素背后都有逻辑，每一次交互都在跟用户对话。你写的不是代码，是别人打开浏览器那三秒钟的体验。