还在维护老项目？jQuery 的几条性能习惯值得捡起来

接手一个十年老系统，前端还是 jQuery。第一反应是重写，评估完工期只能作罢。既然要长期共处，就把 jQuery 该有的性能习惯捡起来——这些老规矩放在今天照样成立。

选择器有快慢之分。ID 选择器最快（底层就是 getElementById），class 次之，属性选择器和伪类最慢。另外，选择器从右往左解析，".item img" 先找所有 img 再过滤——缩小右侧范围比缩小左侧更有效。

// 慢：每次都重新查找，链路上反复遍历
$("#list .item").hide();
$("#list .item").addClass("off");

// 快：缓存一次，链式操作
var $items = $("#list").find(".item").hide().addClass("off");

缓存查找结果是性价比最高的一条：同一个元素要在多处操作，存到变量里。规范里约定 jQuery 对象用 $ 开头命名，一眼分清哪些变量是对象哪些是原始值。

批量改 DOM。循环里逐个 append 会导致反复重排。先把字符串或片段拼好，一次插入； thousand 行列表用文档碎片或 detach 离线操作再放回去。页面卡顿时开 Performance 面板看紫色 Layout 条，重排热点一眼可见。

事件委托是另一条省内存的老技巧：1000 行列表每行绑一个 click，不如在列表容器上绑一个，靠 e.target 分发。内存省了，动态增删行还不用重新绑。

老框架不可怕，可怕的是用老框架还不知道它吃力在哪。这几条都做到，jQuery 项目跑出 60 帧不稀奇。