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

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

           

           

          下拉列表優(yōu)化

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

           

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

           

          右下的數(shù)據(jù)列表延遲加載

          右下方的數(shù)據(jù)列表,默認只顯示基本信息,當用戶點擊的時候才展開詳細信息,一般用戶只有在編輯和刪除的時候才會用到詳細信息,大部分情況可能不會用編輯和刪除,也就不需要展開詳細信息。之前的做法就是在加載列表的時候就把詳細信息的html都生成好,只是隱藏一下,所以加載列表就比較慢。把詳細信息改成延遲加載,當用戶單擊某行數(shù)據(jù),才去生成對應的詳細信息html代碼,并展開顯示。

           

          png圖片轉(zhuǎn)gif

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

           

          延遲執(zhí)行ajax

          左邊每個分類前面有個選擇框,當用戶選擇(或去掉選擇)某個分類的時候,都會引發(fā)ajax刷新右邊的數(shù)據(jù)列表。這里就可能出現(xiàn)這種情況,比如用戶想選擇3個分類查看,需要點擊3次選擇,之前的做法,每次點擊都會觸發(fā)一次ajax,這樣就觸發(fā)了3個ajax了,其實對于用戶來說,只有最后一次ajax是有用的,前面2次不但浪費資源,而且影響性能。當然你可能會想到我們可以abort前面的ajax請求,但要注意abort只是abort客戶端的執(zhí)行,服務器端還是會接收到請求并執(zhí)行完畢。于是對這個ajax做了個延遲,每次點擊后延遲0.5秒執(zhí)行,如果用戶在0.5秒內(nèi)再一次點擊,則取消之前的ajax。這樣就可以避免一些不必要的ajax請求了。

           

          后語

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

           

          該頁面中經(jīng)過這些優(yōu)化后,頁面總的加載速度(包括資源下載、解析、執(zhí)行、頁面呈現(xiàn))提高了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/
          [聲明]:本博所有文章版權歸作者所有(除特殊說明以外),轉(zhuǎn)載請注明出處.
          英雄,別走啊,幫哥評論下:  

          精彩推薦 好文要頂 水平一般 看不懂 還需努力
          主站蜘蛛池模板: 京山县| 迭部县| 湟源县| 金门县| 滁州市| 台中县| 富阳市| 洛隆县| 娱乐| 汕头市| 青神县| 都安| 扬州市| 敦化市| 城固县| 乌鲁木齐市| 渭源县| 石屏县| 富民县| 青川县| 连州市| 南平市| 贡山| 昌吉市| 临朐县| 孟连| 昭平县| 和顺县| 合江县| 大同市| 英吉沙县| 壤塘县| 岢岚县| 韶关市| 彰化市| 黎川县| 阳江市| 台中市| 隆尧县| 山西省| 泰顺县|