web前端开发笔记

昨天改一个老项目，端开发现页面上有个按钮死活点不动。发笔查了半天，端开发现是发笔某个早就离职的同事写的一行CSS：pointer-events: none;，加在一个压根不需要禁用的端开容器上。这种坑踩多了就明白，发笔前端这行，端开代码能跑和代码靠谱之间隔着十万八千里。发笔

很多人刚入行的端开时候觉得前端简单，不就是发笔写写页面嘛。HTML标签一摆，端开CSS一调，发笔JavaScript让按钮弹个窗，端开完事。发笔但真到了生产环境，端开你会发现麻烦从来不在“怎么写”，而在“为什么这么写”。

关于布局：别跟浏览器较劲

Flexbox现在已经是标配了，但还有人用float加clearfix。不是不行，是没必要。我见过一个后台管理系统，整个页面用绝对定位堆出来的，换个屏幕分辨率直接散架。问他为什么不改，他说“能显示就行”。这种心态迟早出事。

Grid布局处理二维结构比Flex顺手得多，尤其是仪表盘、卡片列表这类场景。但别为了用而用。一个简单的水平居中，margin: 0 auto就够了，犯不上套三层Flex容器。

JavaScript的“惊喜”

类型转换是前端永远的痛。举个真实的例子：

console.log([] == false); // true console.log({ } == false); // false console.log('' == 0); // true

第一次看到这个结果的人，表情基本都一样——眉头先皱，然后嘴角抽一下。所以现在项目里我全用===，不给自己留任何幻想空间。TypeScript能解决一部分问题，但别指望它万能。类型断言写多了，跟写any没区别。

异步处理也是重灾区。Promise链写长了跟回调地狱长得差不多，async/await确实清爽，但别忘了加try/catch。我见过一个接口请求失败后页面直接白屏的，就是因为没做错误处理，一个未捕获的rejection把整个渲染流程打断了。

性能：别等用户骂了才管

首屏加载超过三秒，用户就开始流失。这不是什么新鲜结论，但很多人不当回事。图片不压缩、字体图标全量引入、第三方SDK无脑塞——这些操作加起来，一个本来能跑满分的页面能给你拖到及格线以下。

有个项目我接手的时候，首页加载了1.8MB的JavaScript。打开一看，整个lodash库引进来只用了_.debounce。改成手动实现之后，体积直接砍掉一大半。不是lodash不好，是用法不对。

懒加载、代码分割、Tree Shaking，这些词听着高级，做起来其实就是配置的事。Webpack和Vite都帮你把路铺好了，你只需要别把路堵死。

浏览器兼容：该放弃就放弃

IE已经入土了，别再为它写polyfill。2024年还在兼容IE的项目，要么是特殊行业，要么是技术债太多不敢动。如果是后者，建议排期重构，别修修补补。补丁摞补丁的结果就是没人敢碰那段代码。

移动端适配倒是值得花时间。viewport标签、rem和vw的选择、安全区域适配——这些细节直接影响用户体验。特别是iPhone的刘海屏，底部导航栏不加padding-bottom: env(safe-area-inset-bottom)，在全面屏上就是会被横条挡住。

最后说点实在的

前端工具链更新快得离谱，今天学的新框架明天可能就过时了。但底层的东西——HTTP协议、浏览器渲染原理、数据结构——这些不会变。花时间啃这些，比追新框架划算得多。

写代码的时候多问自己一句：这段逻辑三个月后我还看得懂吗？如果答案是否定的，那就重写。代码是写给人看的，顺便让机器执行。