一次真实项目中的界面提速经历
上个月接手了一个内部审批系统，页面打开要等三秒，下拉菜单点一下卡半秒，同事吐槽说像在用十年前的网页。其实功能不复杂，就是表单加列表，但用起来就是憋屈。后来花了一周做界面优化，加载时间压到800毫秒以内，操作也顺滑了。这里把踩过的坑和见效的办法说一说。
减少DOM层级，别堆砌div
原来的代码里一个按钮外面套了五层div，光是为了对齐又加padding又加margin。改成flex布局后，结构扁平多了。比如之前这样：
<div class="wrapper">
<div class="inner">
<div class="btn-container">
<button>提交</button>
</div>
</div>
</div>现在直接：
<div class="btn-group">
<button>提交</button>
</div>CSS里用display: flex; align-items: center; 就搞定居中，渲染效率明显提升。
防抖处理频繁触发事件
搜索框原来一输入就发请求，打字快的时候接口直接雪崩。加上防抖之后，等用户停0.5秒再查，服务器压力小了，页面也不卡了。实现起来也就几行代码：
let timer;
inputElement.addEventListener('input', function(e) {
clearTimeout(timer);
timer = setTimeout(() => {
search(e.target.value);
}, 500);
});图片懒加载不是摆设
列表页默认加载二十张缩略图，每张都上百KB，首屏根本用不上。换成懒加载，滚动到可视区域才加载图片。用原生的loading="lazy"就能解决：
<img src="thumb-1.jpg" alt="图片" loading="lazy">配合占位图，体验反而更流畅。
字体图标改用symbol方案
以前用iconfont引入整套字体，哪怕只用了三个图标也得下载全部。现在把需要的图标导出成svg symbol，内联到页面，其他地方用use引用：
<svg><use href="#icon-edit"></use></svg>文件体积小了几十KB，关键是图标渲染速度肉眼可见变快。
动画交给transform和opacity
有个弹窗动画原来是用top/left位移，滑动时掉帧严重。改成transform: translateY()之后，走的是GPU加速，低端笔记本也能60帧运行。跟同事开玩笑说，这相当于免费升级了显卡。
这些改动没用什么高深技术，都是日常能上手的招数。改完之后最直观的感受是，用户不再习惯性地重复点击按钮了——因为知道点一次就会有反应。