表面一切正常：聊聊被遗忘的前端基本功

Photo by Alessandro Bianchi on Unsplash

最近审查一段前端代码时，我发现了一件很别扭的事。

从视觉上看没有任何问题。界面排版整齐，交互流程顺畅。点击按钮，弹窗准时出现，数据提交也一切正常。如果在浏览器里体验，你挑不出任何毛病。

但打开源码一看，感觉完全变了。

能跑，但经不起推敲

那是一段用来实现自定义下拉选择和简单弹窗的逻辑。作者用了一长串嵌套的 <div>，手写了近两百行 JavaScript 来监听点击事件、计算坐标、切换隐藏状态，甚至还为了让键盘能聚焦，打了一堆 tabIndex 和自定义键盘事件监听的补丁。

实际上，浏览器的原生 <dialog>、<details> 标签，配合近几年成熟的 CSS @popover 属性，十几行代码就能原生搞定。

这让我陷入了思考。现在的软件开发环境里，“把东西做出来”的门槛比以往任何时候都低。框架、UI 库和 AI 编程工具像乐高积木一样随手可得。只要你把 prompt 输入进去，或者把现成组件生硬拼接起来，屏幕上立刻就能渲染出看似专业的 UI。

它确实能跑，但开发者真的知道它在底层是怎么运转的吗？

抽象层的甜蜜与代价

现代技术栈的层层封装，带来效率的同时，也在诱惑开发者偷懒。

很多人写了几年页面，却从未深入理解过：

• 浏览器是如何解析 DOM 树与 CSSOM 树的
• 为什么一次简单的 DOM 操作会导致昂贵的回流（reflow）与重绘（repaint）
• 无障碍访问树（Accessibility Tree）是如何向视障用户的屏幕阅读器传递语义的
• 为什么滥用 div 会彻底破坏原生的键盘交互与触控行为

当一切风平浪静时，这种“黑盒式编程”看起来无伤大雅。大家都在追求排期，产品要赶着上线，管理层只看演示效果。

真正的代价往往在边缘场景集中爆发：页面滑动突然掉帧卡顿、低端移动设备内存崩溃、视障用户完全无法操作、某个第三方库一旦停更整套系统陷入瘫痪。此时，那些只懂得拼装组件的人往往束手无策，只能继续往上叠抽象层，用更多的 JavaScript 去给前人糟糕的代码打补丁。

我为什么依然迷恋“知其所以然”

我喜欢知道事情的本质。

知道一个属性背后的底层机理，知道浏览器平台规范的演进历史，知道网络数据包如何在 TCP 握手中传输，这并不是食古不化的学院派情结。

掌握底层知识，会带给你两样极为珍贵的东西：

1. 极度的克制与简洁
   真正懂平台的人，写出的代码往往极其精简。他们不需要为每个基础功能都安装一个几百 KB 的 npm 包。利用原生 Web 标准解决问题，不仅加载飞快、天然具备无障碍支持，还能十年如一日地稳定运行。

2. 解决复杂问题的直觉
   当系统出现未知的性能瓶颈、内存泄漏或难以复现的怪异 bug 时，AI 给不出准确答案，Stack Overflow 也搜不到完全一致的案例。此时唯一能救场的，就是你对底层运行时、渲染机制和内存模型的深刻认知。

自动化浪潮下的真正护城河

当生成一段能跑的代码变得像呼吸一样简单，单纯编写“看起来能用”的胶水代码，已经没有任何职业壁垒可言。

工具越强大，对“判断力”的要求反而越高。你必须知道机器生成的东西是不是垃圾，必须知道某种架构方案是否存在隐藏的性能炸弹，必须知道在什么场景下原生方案远胜于繁琐的框架抽象。

钻研那些底层的规范、协议、算法和数据结构，看似在走慢路，实则是在构筑最坚固的技术底座。知道底层原理的运作方式，依然是作为一名工程师最大的乐趣，也是在这个时代不被淘汰的唯一底气。