今天碰到一個問題，當點選某一行資料，顯示詳情時，由於詳情又有四個子tab，每個子tab都是一個表格，有各種各樣的請求，當點選該行資料顯示詳情時，所有的資料同時載入，導致頁面卡頓，此時做ExtjS的效能優化是很重要的。通過研究，瞭解了一下ExtJs的效能優化和前端的效能優化：extJs效能優化：1.儘量不適用panel，而去使用基類container，因為panel是一個比較大的元件，附加了一些不必要的屬性。2.在頁面渲染之後，儘量不要再去修改頁面，從而避免頁面reflow或者repaint。3.減少要載入的東西，少載入少解析、晚載入晚解析4.不必要的情況下，不要使用事件監聽，在監聽store的load時間的時候，應該監聽一次。5.避免元件封裝前端效能優化：

1. http新增Expires頭
2. 對http傳輸進行壓縮
3. 將css檔案放在頂部
4. 將Script放在底部

子tab資料延遲載入：利用tabPanel的屬性延遲載入：

 deferredRender:true,//延遲載入
 hideMode: "offsets",

使用tabPanel的tabchange事件延遲載入：

 logDetailTabPanel.on("tabchange",function(e,args){
            args.initialConfig.items.store.load();
        });

點選tab標籤的時候才載入

{
                xtype: 'panel',
                title: " 網路介面 ",
                autoScroll:true,
                items: new ACloudAge.vmNicAcl().createVmNicAclTabPanel(objectId),
                listeners: {
                    render:function () {
                    new ACloudAge.vmNicAcl().getVmNic('vms/' + objectId + '/nics','vmNicGridStoreId');
                    }
                }
            },{
                xtype: 'panel',
                title: " 訪問控制 ",
                autoScroll:true,
                items: new ACloudAge.accessControl().createAccessTabPanel(objectId),
                listeners: {
                    render:function () {
                    new ACloudAge.accessControl().getAccessControl('vms/' + objectId ,'accessControlStoreId',accessControlItem)
                    }
                }
            }
 

可以通過myrender方法檢視子tab的渲染順序：

    function myRender(p){
        Ext.Msg.alert("提示",p.title+"渲染成功") ;
    }