BearRui(AK-47) 的Blog

上一篇 "記一復雜頁面的前端優化(1) - 不一樣的延遲加載", 說了下對彈出窗口的優化，接下來說說其他的優化，先把界面圖貼出來，方便對照：

下拉列表優化

然后創建自己的輸入框和彈出框。當頁面只有1，2個select的時候，沒發現有什么問題，但當頁面出現7，8個select的時候，熏染速度明顯慢了很多，可以看著1個個select變成input，主要原因還是js執行的太多了(動態生成html，綁定事件)等等。這個是影響頁面渲染速度的1個大問題，所以第一個要解決的就是這個select。因原始的select外觀是在是不行，而且又不能修改樣式，所以我們選擇了1個jquery的selectbox插件，該插件的實現原理：在頁面加載完畢后，隱藏原始的select,然后創建自己的輸入框和彈出框。當頁面只有1，2個select的時候，沒發現有什么問題，但當頁面出現7，8個select的時候，熏染速度明顯慢了很多，可以看著1個個select變成input.主要原因還是js執行的太多了(動態生成html，綁定事件)等等。這個是影響頁面渲染速度的1個大問題，所以第一個要解決的就是這個select。

目前的解決方案是服務器端和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倍左右。