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

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

          Posted on 2010-07-20 15:54 BearRui(AK-47) 閱讀(2185) 評論(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/
          [聲明]:本博所有文章版權歸作者所有(除特殊說明以外),轉載請注明出處.
          英雄,別走啊,幫哥評論下:  

          精彩推薦 好文要頂 水平一般 看不懂 還需努力
          主站蜘蛛池模板: 高密市| 武义县| 新巴尔虎左旗| 富顺县| 湖南省| 健康| 蓬安县| 沅陵县| 青龙| 商洛市| 云梦县| 出国| 霍林郭勒市| 深圳市| 阳朔县| 宜都市| 阳山县| 清流县| 宜兴市| 桐柏县| 土默特右旗| 珲春市| 金溪县| 西乌珠穆沁旗| 怀远县| 巩留县| 定结县| 广宁县| 隆尧县| 山西省| 乌鲁木齐市| 沙坪坝区| 芜湖县| 岳阳县| 白水县| 扎兰屯市| 临澧县| 镇远县| 安多县| 临夏县| 改则县|