ExtJS 性能优化注意要点_extjs6 page-analyzer

---

1. 不要过度定义panel

2. 尽可能延迟HTMLElement创建

示例：renderTo的不必要使用

var window=new Ext.window({
   renderTo:document.body,
   title:'Title'
   }
);
window.show();
1
2
3
4
5
6

上面代码运行时，窗口就会创建并隐藏在body里，这是不必要的。

3. 挂起渲染

var tb = Ext.create('Ext.toolbar.Toolbar');
                                            tb.render('rbac_resource_js_module_toolbar');
tb.suspendLayouts();

tb.add({
    text: '新增',
    cls: 'x-btn-icon',
    clickEvent: 'mousedown',
    handler: function(){

    }
});
tb.resumeLayouts(true);
1
2
3
4
5
6
7
8
9
10
11
12
13

4.组件销毁

清理过程
- DOM中的HTMLElement
- 移除所有监听事件以避免内存泄漏
- 通过递归方式销毁所有子组件
典型的使用closeAction属性，对于不需要再显示的，应定义为close

var window = new Ext.Window({
    closeAction:'hide', //默认是destroy
    title:'The Untitled'
} ) ;
1
2
3
4

一般组件销毁使用destroy()方法。

5.使用MinifiedVersion

在需要时才加载
保持 ViewPort 整洁，不要把所有view都放
用轻量级的组件
使用缓存

6.挂起事件

store.suspendEvents();
store.remove(selection);
store.resumeEvents();
grid.reconfigure(store);
1
2
3
4

可与挂起渲染同时使用：

Ext.suspendLayouts();
store.suspendEvents();
store.remove(selection);
store.resumeEvents();
grid.reconfigure(store);
Ext.resumeLayouts(true);
1
2
3
4
5
6

减少网络影响

把js css images分别放在不同的域下，并行下载资源。
使用sencha sdk编译前端代码。

优化css性能

css解析是从右向左，如：
.HeaderContainer .nav span
这就是一种不好的书写方式。要写尽量简单、少层级的css代码，避免浏览器需要查找父元素。

优化js listeners

避免使用错误的监听。比如需要一次加载完再执行的代码，不要误写到每次刷新都要执行的代码。

尽量使用container替代panel

panel更强大，占的资源也更多。

减少border layout布局。

Extjs4.1以后，不需要专门放一个border layout。

使用Page Analyzer

http://khaidoan.wikidot.com/extjs-page-analyzer

避免js内存泄露

Ext.define('MyClass', {
    ...

    constructor: function(config) {
        ...

        this.store.on('load', function() {
            ...
        }, this);
    }
});
1
2
3
4
5
6
7
8
9
10
11

上面这段是典型的可能会引起内存泄露的代码。正确的写法是这样：

Ext.define('MyClass', {
    ...
    constructor: function(config) {
        ...
        this.store.on('load', this.onStoreLoad, this);
    },

    onStoreLoad: function() {
        ...
    }
});
1
2
3
4
5
6
7
8
9
10
11