在使用ExtJs過程中,性能一直是一個比較頭疼的問題,從用戶的角度來看,就一個字:慢。從技術的角度來說,這個“慢”字可以分為兩種,加載“慢”和渲染“慢”。想分辨這兩種情況很容易:如果居于網不慢而互聯網上慢,說明是加載慢;如果Chrome不慢而IE慢,就是渲染慢。還有另一種情況:越用越慢,這個“慢”通常是內存泄露造成的。
針對以下這三種情況討論一下解決方案:
1,加載慢
1.1 減少要加載的東西
不要動不動就ext-all.js,extjs是可以定制的,如果你用不到tree,就不要包含這個組件了。ExtJs的官網上有詳細的定制方法和工具。
1.2 給出合適的用戶提示
把Js后置,然后前面做一個加載的提示。如果像Gmail那樣給出進度條,或者像很多網游那樣來點圖片或者Tips啥的就更好了,說不定用戶還會覺得怎么加載這么快,我還沒看清楚呢,呵呵。
1.3 用的時候再加載
動態加載,參考使用ExtJs開發MIS系統(2):Js的動態加載。
1.4 只加載一次
別用iframe了,如果你的靜態內容過期做的不好,瀏覽器會經常再不厭其煩的從服務器下載同樣的東西。
1.5 對你的Js添加過期標記
ext-base.js、ext-all.js都可以設置很長的過期時間,甚至永不過期(如果你不換extjs的版本)。這點對所有靜態內容都很有用,如何設置過期標記請垂詢Google。
2,渲染慢
2.1 少加載少解析、晚加載晚解析
1.1,1.3,1.4都對改善渲染慢的情況有效——加載的少了自然渲染的快了。
2.2 別用iframe
iframe不僅僅可能會使瀏覽器加載兩遍,還一定會使瀏覽器解析兩遍,放棄它吧,真的。
2.3 精心設計你的Js代碼
例如緩存getElementByID()的結果、編譯查詢表達式之類的東西,這個純看Js功力。
2.4 可能的話,讓用戶換個瀏覽器吧
Chrome比IE的Js渲染快是數量級上的差異!構造一個40列,50行的復雜GridPanel試試,你就會深有體會了……對于企業內部的MIS系統,換瀏覽器還是具有可能性的。
3,內存泄露
Ext性能調優方案
1. 將JS進行合并壓縮。
使用yahoo的yui-compress.jar進行壓縮JS,去掉過多的空格和注釋,并合并,減少IO的支出。
2. 將前后臺傳輸的數據進行GZIP壓縮。
大數據量的數據傳輸,通過GZIP的壓縮方案,可以減少到25%,有些數據可能會更多。
3. 對大量的JS分析依賴關系,進行動態加載。
這個是關鍵,通過分析所有的JS中的依賴關系,減少了JS加載的數量。從很大程度上提高了性能。
4. 另外對部分頁面進行緩存,而非真正的關閉。
還有一個外部的因素,由于系統使用的客戶機環境上的復雜,我們在多個瀏覽器上進行了測試,只有IE是最慢的,尤其是IE6,后來發現不是IE6要比IE7慢,是因為發現MS發布了腳本引擎cscript 5.7, 而大部分的ie6系統都裝的是5.6, 這個版本上的升級,不僅僅是修改了BUG,在JS的執行速度上也有了較大的提升,于是我們在環境因素上又加上了一條,要求客戶安裝cscript5.7,也大大的提升了頁面的打開時間。