1. 檢查你定義的時間監聽器
正確的設定事件監聽器對效能會有很大的影響。 舉例來說， 在定義一個store的時候，設定一個load 的事件去觸發從後台讀取資料，如果設定single 的值為true的話，則load的事情就只有在第一次取資料的時候會觸發了。
listeners: { load: onFirstLoadData, single: true}
給一個完整的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="extjs/ext-all.js"></script><link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" /><script>var myStore;Ext.onReady(function(){Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'firstName', type: 'string'}, {name: 'lastName', type: 'string'} ]}); myStore = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url: 'users.json', reader: { type: 'json', root: 'users' } }, autoLoad: true, listeners:{ single: true, load: function(){alert("store load event");} } }); Ext.create('Ext.grid.Panel', { title: 'Sample', store: myStore, columns: [ { text: 'SurName', dataIndex: 'lastName' }, { text: 'Name', dataIndex: 'firstName' } ], height: 200, width: 400, renderTo: Ext.getBody() });});function loadStore(){myStore.load();}</script></head><body><input type=button value="load Store" onclick="loadStore()"><div id="my-div"></div></body></html>
注意 ext 的 js 和 css 檔案需要下載匯入.
這裡實現的效果就是點擊 load Store 按鈕， 如果加了single: true， 則load 這個事件就不會執行了。
另外一個需要注意的事件是 afterrender, 它在所有的DOM元素存在時觸發。在渲染後修改元素會迴流和降慢程式。 相反的，可以使用beforerender在渲染之前調整類和設定樣式。而一些必須在渲染後啟動並執行代碼，在 Ext JS 4.1 中有提供一個新的事件 -- boxready, 它運行在一個組件大小被確定之後。
2. 移除doLayout 和 doComponentLayout 呼叫
盡量移除高代價的呼叫。 在Ext js 4之前的版本中，doLayout 是用來告知架構你已經完成了一個組件或容器，接下來去計算它的布局。 在Ext JS 4.0 中這些呼叫也有時用來處理直接的DOM更新或是解決一些特定的缺陷。
在Ext JS 4.1中， 布局的觸發方式改變了，你的代碼不需要呼叫 doLayout 或doComponentLayout。 如果你還需要呼叫這個方法來處理缺陷，請提交缺陷報告給sencha吧。
3. 減少容器嵌套
每一個容器都是只需時間去初始化，渲染和布局。嵌套越少，程式的速度就會越快。舉例來說：
{ id: 'container1', items: [{ id: 'container2', items: [{ id: 'component3' }] }]}
完全可以使用以下方式替換：
{ id: 'container1', items: [{ id: 'component3' }]}
4. 使用 Containers ，而少使用Panels
Ext JS的Panels 比 Containers 功能更強大，當然代價也更高。顯示指定 xtype:'container'，避免預設使用 'panel',類似
{ xtype: 'container', // defaultType is 'panel' items: [ ... ]}
5. 減少邊界布局嵌套
在Ext JS 4.1 中，有很多方法來替代邊界布局嵌套。移除這些嵌套可以減少初始化，渲染和布局組件的時間。在Ext JS的早期版本中，有些狀況是必須使用嵌套，舉例來說，在同一個區塊有兩個或更多的執行個體，如果在中心地區上需要兩個北邊的地區，就需要嵌套邊界布局了。 現在，可以直接指定兩個北邊地區作為一個邊界布局的部分。
在Ext JS 4.1 中，地區可以動態方式添加，而不需要一次把所有區塊定義出來，不用的時候，又把他們隱藏起來。還可以使用weight 的屬性設定地區的優先順序--舉例來說，
設定西邊的優先順序高於北邊。
6. 減少DOM的讀寫
Ext JS 4.1 已經調整了布局和DOM的互動以儘可能的減少DOM的讀寫。客制的代碼也應該盡量遵循這個規則，因為DOM的讀寫會降低程式的速度， 高的開銷和混寫導致
迴流。 盡量使用beforerender 控制樣式和類，避免使用 setStyle,addCls,removeCls或其他DOM元素修改的方式。
作為一般規則， 操縱在DOM讀寫時分批次的操作會對效能有一定的提升。
使用Ext JS 4.1 提供的兩個新的方法 Ext.suspendLayouts 和dExt.resumeLayouts來減少額外的
布局。這兩個方法有助於協調更新到多個組件和容器。
Ext JS 4.1 提供了一個新的工具用來分析應用程式的效能。使用它可以快速的測量系統系統並對相關的代碼做更改。頁面分析器有許多功能還是實驗性的，但是布局標籤最佳化是比較有用的效能最佳化的功能。
可以在開發套件的以下路徑找到這個工具
./examples/page-analyzer/page-analyzer.html因為瀏覽器安全的原因，頁面分析器只允許在同一台伺服器上使用， 所以使用時需要把整個 page-analyzer的檔案夾複製到應用程式的相關目錄下。
另外， 要確保頁面分析器的版本和你構建Ext JS版本要匹配，否則它是不能正常啟動並執行。
接下來，看一下如何使用頁面分析器：
1. 在瀏覽器中通過URL開啟頁面分析器
2. 輸入需要分析的頁面地址
3. 點擊"load "， 展現結果。
4. 點擊 Layout 的標籤，可以看到：
5. 但單個組件上有多個布局時， 在代碼中減少不必要的布局會提升系統的效能。
網格最佳化使用Ext JS grid會遇到一個特別的效能問題，特別是在處理大型的資料集的時候。當處理小型的資料，速度不是問題。但當grid 處理"無限滾動"展現時，就會出現效能瓶頸了。因為無限滾動依賴於頁面的緩衝。
當使用者在滾動時，快取資料變成可見的接著有消失在頁面的頂部並且不再儲存在DOM中了。調整這個的主要方法是儘可能的讓DOM盡量小，在用戶端快取資料進而減少資料在服務端的往返。
滾動術語
當一個 data store 的buffered 配置成true的時候，一個PagingScroller 的對象會被建立出來用於監控視圖的滾動（網格被配置成data views），同時用來為下一步提供快速的資料。
在中，使用者滾動視圖向下查看資料集，PagingScroller維護了滾動方向的一段前面地區的記錄和一段後面地區的記錄。
PagingScroller 要求data store保證trailingBufferZone和leadingBufferZone都已經在緩衝中。
滾動的時候，如果資料已經在緩衝中就直接顯示，如果不再就要通過ajax 方式擷取，這個時候頁面會mask 住。如何設定緩衝的大小，可以使用 Infinite Grid Tuner這個工具
使用例子像以下這樣
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
