分享一个页面(extjs)性能优化过程

在一个展示页面有个配置按钮。点击后会加载所有商品,以前是比较卡,因为一些原因,商品数据量从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弹窗,基本可以接受。

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

分类 未分类

发表评论