"愛說說"技術原理:前端Javascript優化技巧（四）

前言說明：

1：前端沒有使用jq，采用原生的xmlhttp做為異步請求。

2：前端代碼就不多貼了，直接檢視頁面源檔案就能看到所有的代碼了。

[ps：事隔這麼久，好多都忘了，隻能靠點回憶代碼來寫了]

一：基礎優化

1：避免直接用控件循環加載html，而用變量組合html，最後一次給控件的innerhtml指派：

不良用法：for(i in json.data){$('div').innerhtml+=json.data[i].name;}

正規用法：var html;for(i in json.data){html+=json.data[i].name;}$('div').innerhtml=html;

2：定義的對象或變量，用完後，賦null值：

var a;.....使用a.....a=null;//用完賦null值。

二：邏輯優化

1：用戶端基本請求政策：

1：首次請求，加載1頁資料40條消息，後面可以點選顯示更多，每次40條消息。

消息顯示難點：40條中可能包含回複，而回複的主留言可能在40之外，是以，對于回複，如果找不到父id，即主留言，臨時存儲到數組中，等使用者點選更多時，再看看有沒有父id存在，有就挂下去補充，沒有繼續存儲等待更多...如果重複的說。

2：定時請求，請求從消息的尾步開始，每次請求後拿取maxid，下次根據maxid請求後續内容。

2：用戶端基本優化政策

1：代碼重用，函數封裝，優化調用

2：定時器的政策，優化請求資源

 function getnewmsgcallback(result,callbytimer)

 {

    loadcallback(result,callbytimer);

    if(callbytimer)//系統定時器

    {

        idletimes++;//設定空閑次數

        switch(idletimes)

        {

            case 8://1分鐘沒發言,将會16秒重新整理一次

            case 16://3分鐘沒發言[又過了16*8秒],将會32秒重新整理一次

            case 24://7分鐘沒發言[又過了32*8秒],将會64秒重新整理一次

                handletime=handletime*2;//定時器時間加倍

                cleartmer();//取消重新整理

                timer();//開始新的計時重新整理

                break;

            case 75://1小時沒反應，自動重新整理。

                location.href=location.href;

            break;

        }

    }

    else

        idletimes=0;//使用者發表資訊,恢複定時器

        if(handletime!=8000)

             handletime=8000;//定時器時間還原

             cleartmer();//取消重新整理

             timer();//開始新的計時重新整理

 }

ps：從這段代碼看，政策是對于不聊天的人群，采用步步拉大請求時間，節省伺服器請求資源。

3：聊天政策，優化加載，聊天流暢

原因：如果在打字的時候，剛好遇到消息回來并加載顯示的過程，界面會變的相當的卡。

是以政策是：聊天時，停止消息加載，釋出消息後，恢複消息加載。

具體：

光标定位到打字框時，設定辨別

停止加載-》存儲未加載的對象到數組中[到下次請求時一起顯示]-》發表留言[恢複辨別]

4：小技巧避開“點選”，引發音樂切換

原因：<a href="javascript:xxx()"...的方式的點選會引起iframe 的音樂連結重新加載，進而音樂自動切換了。

解決：<a href="###" onclick="xxx()"...換成這種方式即可以了。

5：适當避開快速聊天，限制“釋出”按鈕

釋出消息時，将“釋出”按鈕置不可用，等下次消息回來時，再恢複“釋出”按鈕的可用狀态，是以兩次聊天的時間間隔是“1-8”秒之間。

本節就介紹到了，其它的不容易想，感興趣的自行研究了。