posts - 36, comments - 419, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

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

          Posted on 2010-07-20 15:54 BearRui(AK-47) 閱讀(2186) 評論(0)  編輯  收藏 所屬分類: WEB

          上一篇 "記一復雜頁面的前端優化(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倍左右。

           

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


          [作者]:BearRui(AK-47)
          [博客]: http://www.aygfsteel.com/bearrui/
          [聲明]:本博所有文章版權歸作者所有(除特殊說明以外),轉載請注明出處.
          英雄,別走啊,幫哥評論下:  

          精彩推薦 好文要頂 水平一般 看不懂 還需努力
          主站蜘蛛池模板: 兴业县| 台中县| 德州市| 怀宁县| 越西县| 阳西县| 土默特右旗| 洛宁县| 云林县| 怀安县| 抚州市| 阳西县| 陈巴尔虎旗| 南木林县| 东辽县| 上饶县| 应城市| 惠州市| 中江县| 乐都县| 札达县| 梓潼县| 三亚市| 开封县| 龙南县| 阜阳市| 屯门区| 云南省| 类乌齐县| 桐城市| 盐池县| 澄城县| 故城县| 威远县| 南投市| 娱乐| 东山县| 新竹市| 定南县| 汝南县| 西昌市|