像黑客一样的页面代码

我见过一个电商详情页，像黑加载速度比同类型页面快三倍。客样翻开源码，面代码没有花哨的框架，没有层层嵌套的组件树。整个页面用不到200行CSS完成布局，HTML结构干净得像手术刀切出来的。关键细节：所有图片用标签做了格式降级，懒加载用原生loading="lazy"，连JavaScript都省了。这不是炫技，是知道浏览器怎么工作，然后顺着它的脾气写。

大多数前端开发者写代码是在“堆”——加依赖、加抽象层、加设计模式。黑客思路反过来：先问哪里可以不加。一个按钮的hover效果，用CSS的:hover就够了，非要挂个React状态。一个响应式布局，用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))一行搞定，非要写三套媒体查询。代码量每多一行，浏览器就多一次解析、多一次重排。黑客在乎这个。

有个真实案例。某新闻网站首页原本用Vue渲染，首屏时间2.8秒。一个工程师把首页改成纯静态HTML加少量原生JS，首屏降到0.6秒。做法很简单：把服务端渲染的结果直接输出，交互部分用addEventListener挂在document上做事件委托。没有虚拟DOM，没有diff算法，没有 hydration。页面代码里甚至能看到注释写着“// 这里不用框架，因为不需要”。

这种写法有个前提：你得真正理解DOM。知道document.querySelector返回的是静态NodeList还是动态HTMLCollection，知道innerHTML和insertAdjacentHTML在重排上的差异，知道requestAnimationFrame该放在哪一帧。这些细节，框架帮你屏蔽了，也帮你遗忘了。

安全层面也一样。普通开发者依赖框架的XSS防护，黑客思路的开发者会在输出前手动转义< > & " '，会在innerHTML赋值前过一遍textContent。他们不信任任何自动防护，因为知道绕过方式。一个javascript:伪协议链接，框架可能放行，手动过滤反而更可靠。

写这种代码的人有个共同习惯：打开DevTools比打开编辑器还频繁。他们看Performance面板的火焰图，看Network面板的瀑布流，看Elements面板的computed样式。代码写出来是给浏览器执行的，不是给同事看的。注释可以少，但每一行都得有存在的理由。

你可能会说这是倒退，是重复造轮子。但轮子分两种：一种是你知道它怎么转，一种是你只知道它转。黑客思路的页面代码属于前者。它不反对框架，只是拒绝在不需要框架的地方用框架。一个静态博客，一个活动落地页，一个内部工具，这些场景里，原生HTML+CSS+JS就是最优解。

下次写页面之前，先别急着npm install。打开一个空白HTML文件，从<!DOCTYPE html>开始写。你会发现，浏览器比你想象的能干得多。那些你以为必须靠框架解决的问题，其实一行CSS、一个原生API就解决了。这不是怀旧，是清醒。