包子

在一个展示页面有个配置按钮。点击后会加载所有商品，以前是比较卡，因为一些原因，商品数据量从2000个剧增到5万个。这时页面打不开了，过了半天没反应，cpu飙升。

Margin带来的开销

在测试环境（1.8万个商品），经过js打印时间调试发现

console.log(Date())
tags = Ext.create('Ext.window.Window', {
html:'XX1XX2',
}
tags.show();
console.log(Date())

展示占用了31秒。经过排查，注释了样式/margin: 3px;/，这部分时间缩短到1秒。

遍历绑定li元素的开销

看代码发现，遍历5w个li绑定点击事件也是消耗性能。目前extjs没找到类似jQuery的委托方案，就只能请出jQuery

tags.body.select('li').on('click'， func）
// 改为，缩短了3秒
$('.goods').delegate('li', 'click',{}, func);

修改后上线，整个过程8秒消耗左右。

Ext.MessageBox.wait('请稍等', '正在加载…');

因为这是后台很少用的一个按钮，加入loading弹窗，基本可以接受。

以上是简单记录一次优化旧的后台页面的过程。这是一个比较复杂的后台，也不打算大改了。