天天看點

ExtJS如何更好的應用于外網

 ExtJS的強大功能是大家有目共睹的,我不再介紹。但是,很多朋友在使用ExtJS的時候,往往會因為其龐大的體積望而卻步,特别是在外網,這個缺點更加明顯。

ExtJS 4.X  推出了一種新的技術,動态加載,即用到哪個類才下載下傳哪個檔案,這種方式确實可以大幅加快首次加載速度,但是本人并不喜歡這樣。

很多網友是以下結論是ExtJS根本無法應用于外網,但實際上,我們可以通過多種手段,來解決ExtJS的體積問題。今天我将大緻介紹幾種常用的方法,能夠極大的提高加載速度,在外網情況下,浏覽器首次打開頁面(包括下載下傳、渲染)的時間控制在1~3秒内,這個速度是完全可以接受的。

這裡提供一個線上體驗的位址:拓撲進銷存管理系統

點我線上體驗    賬号:csadmin 密碼:password

一、             盡量合并JS、CSS、圖檔,減少浏覽器與伺服器的請求次數,提高頁面加載效率。

二、             使用GZIP壓縮,這個大家應該都知道,在伺服器将檔案傳遞給浏覽器前,先進行壓縮,浏覽器接受到檔案後,對其進行解壓,這樣可以有效的降低檔案的體積。以ExtJS4.1舉例,其JS的檔案ext-all.js大小為1.23MB,進行GZIP壓縮後大小為380.79KB,體積大幅縮小。

三、             進入管理系統前一般都需要使用者輸入使用者名、密碼、驗證碼,在這個期間使用異步加載技術,加載ExtJS等大檔案。當使用者填寫完資訊進入管理首頁時,利用浏覽器緩存的原理,可以極快的打開管理首頁,這種方式是效果提升最明顯的(當然這種方式并不是每個人都喜歡,是以請那些不喜歡的人就一笑而過吧)。

以下這是我在外網環境下做的幾次測試,時間都在1秒左右。這個時間是完全可以接受的

ExtJS如何更好的應用于外網
ExtJS如何更好的應用于外網
ExtJS如何更好的應用于外網
ExtJS如何更好的應用于外網

本文僅做抛磚引玉之用,如果哪些朋友有還有别的方法,歡迎一起讨論。