記一複雜頁面的前端優化(2) - 其他優化

下拉清單優化

　　目前的解決方案是伺服器端和js結合使用，通過jsp的标簽(net應該叫自定義控件)生成html代碼,并不生成任何js來綁定事件，而且當使用者第一次點選input的時候，才綁定所有事件，彈出下拉視窗。這樣就完全解決了渲染的問題，因為不需要js來生成html，也不需要頁面加載的時候去綁定所有事件。

右下的資料清單延遲加載

　　右下方的資料清單，預設隻顯示基本資訊，當使用者點選的時候才展開詳細資訊，一般使用者隻有在編輯和删除的時候才會用到詳細資訊，大部分情況可能不會用編輯和删除，也就不需要展開詳細資訊。之前的做法就是在加載清單的時候就把詳細資訊的html都生成好，隻是隐藏一下，是以加載清單就比較慢。把詳細資訊改成延遲加載，當使用者單擊某行資料，才去生成對應的詳細資訊html代碼，并展開顯示。

png圖檔轉gif

　　這個頁面用了很多PNG圖檔，比如收入、支出的圖示，左邊分類的圖檔，選擇框的圖示。而png圖檔在ie6下要做單獨處理，為了提高性能，跟設計師商量後，把一些圖檔轉成gif的。雖然gif的轉了後效果沒PNG的好看，但還可以接受，而且也是透明的，于是就通過CSS HACK,讓在IE6下使用gif圖檔，在其他浏覽器下使用png圖檔。這樣就可以提高IE6下的速度，而又不用降低其他浏覽器的界面效果。

延遲執行ajax

 左邊每個分類前面有個選擇框，當使用者選擇(或去掉選擇)某個分類的時候，都會引發ajax重新整理右邊的資料清單。這裡就可能出現這種情況，比如使用者想選擇3個分類檢視，需要點選3次選擇，之前的做法，每次點選都會觸發一次ajax，這樣就觸發了3個ajax了，其實對于使用者來說，隻有最後一次ajax是有用的，前面2次不但浪費資源，而且影響性能。當然你可能會想到我們可以abort前面的ajax請求，但要注意abort隻是abort用戶端的執行，伺服器端還是會接收到請求并執行完畢。于是對這個ajax做了個延遲，每次點選後延遲0.5秒執行，如果使用者在0.5秒内再一次點選，則取消之前的ajax。這樣就可以避免一些不必要的ajax請求了。

後語

 今天這篇文章隻是介紹優化的方法，并沒寫任何代碼，個人覺的這種方法不需要寫代碼，大家一看應該就知道。

 該頁面中經過這些優化後，頁面總的加載速度(包括資源下載下傳、解析、執行、頁面呈現)提高了3倍左右。

本文轉自BearRui(AK-47)部落格園部落格，原文連結：  http://www.cnblogs.com/BearsTaR/archive/2010/07/16/Tally_Optimization2.html  ，如需轉載請自行聯系原作者