性能问题不是小事
新乡经开区有家汽车零部件企业，他们的B2B采购平台首页加载要4.7秒。老板觉得网站能用就行，直到看到数据：加载超过3秒，53%的用户会离开。我们做了两轮JS优化，首屏加载从4.7秒降到1.2秒，次月询盘量涨了31%。
踩过坑的人都知道，性能优化不是玄学，是有套路的。下面这些技巧都是实际项目里用过的，不是网上抄的理论。
DOM操作：少碰多批
DOM操作是性能杀手。每次你改DOM，浏览器都要重新计算布局、重绘页面。新乡高新区一个生物医药公司的数据看板，原来每条数据单独插入DOM，500条数据要渲染3秒。改成DocumentFragment批量插入后，500条0.3秒搞定。
具体做法：创建一个DocumentFragment，把所有节点先加到Fragment里，最后一次性插入DOM。10倍提升不夸张。
还有个技巧是用requestAnimationFrame替代setTimeout做动画。浏览器会在合适的时机调用，避免不必要的重绘。延津一家面粉加工厂的进销存系统，报表动画从卡顿到丝滑，就改了这一行代码。
事件处理：别到处加监听
列表里100个按钮，你会给每个按钮加click事件吗？别这么干。用事件委托，只在父元素上挂一个监听器，通过event.target判断点的是哪个。
封丘一个金银花经销商的电商小程序，商品列表200多个项，原来200个事件监听器，内存占用居高不下。改成事件委托后，监听器数量从200降到1，内存省了18MB。
防抖和节流：高频事件的刹车
搜索框输入、滚动加载、窗口resize——这些事件触发频率极高。不处理的话，用户打一个字可能触发10次请求。
防抖：触发后等一段时间没再触发才执行。搜索框用这个，用户停手了才发请求。
节流：固定间隔执行一次。滚动加载用这个，不管你滚多快，200ms才检查一次。
给原阳一家预制菜企业的供应链系统加搜索功能，没做防抖之前，用户输入"面粉"两个字发了6次请求，服务器压力很大。加了300ms防抖后，6次变成1次。
图片懒加载和代码分割
首屏以外的图片，别急着加载。loading="lazy"一个属性搞定，浏览器原生支持。新乡红旗区一个教育机构的课程列表页，30张课程封面图，加了lazy属性后，首屏加载数据量从2.1MB降到480KB。
代码分割用动态import()，路由页面按需加载。首屏只加载核心代码，其他页面用户点进去再加载。一个20页的Web应用，首屏JS从800KB降到180KB。
循环和数组操作的小细节
for循环比forEach快，这是事实。但差距在大多数场景可以忽略。真正要注意的是：别在循环里做DOM操作，别在循环里创建新对象。
还有一个常见问题：map和filter链式调用，每一步都创建新数组。数据量大的时候，先用for一次遍历搞定过滤和转换，能省一半内存。
卫辉化工企业的环保监测平台，实时数据流处理从filter().map()改成单次for循环后，处理1万条数据的时间从120ms降到35ms。
优化不是一次性的事。上线后用Chrome DevTools的Performance面板跑一遍，看看哪里的火焰图最长，针对性优化。性能监控应该是持续的过程，不是等用户投诉了才想起来的补救措施。新乡企业的网站和系统，多花点心思在性能上，用户体验和转化率会给你回报。