性能優化之AJAX

明天就放假啦~哈哈。四月份好像尚未輸出呢，嚇得我趕忙寫點東西...

Ajax是高性能JavaScript的基礎。

Ajax，從最基本的層面來講，是一種與服務器通訊而無需重載頁面的方法。數據能夠從服務器獲取或發送給服務器。

最經常使用的三種用於向服務器請求數據的方法：

①XHR。

②動態腳本注入。

③multipart XHR。

XML HttpRequest

   這種方式，這裏就很少說了。點這裏能夠了解。這裏記錄一下要注意的地方：

使用XHR時，POST和GET的對比。對於那些不會改變服務器狀態，只會獲取數據的請求。應該使用GET。經GET請求的數據會被緩存起來。若是須要屢次請求同一數據的話，它會有助於提高性能。可是也要注意使用這個特性一個比較容易踩的坑。

例如：你請求回來了一個數組。而後要隨機選擇其中的三個。按照通常的作法，就是隨機生成一個長度內的數做爲數組下標，取值。在原數組刪掉該選項，再從新選擇。以此類推。但因爲數組是對象，若是隻是簡單的賦值給一個變量，在刪除該變量的某個數組項時，原數組也會被改變。這個時候，刷新頁面，ajax請求緩存了的前一次的請求。那麼你獲得的數組就是被刪除了幾項的數組了。

好吧，其實，主要仍是注意對象的修改問題。。。

當請求的URL加上的參數長度接近或超過2048個字符時，才應該用POST獲取數據，是由於IE限制URL長度，過長時會致使請求的url被截斷。

動態腳本注入

   這種方式也是用得不少的一種方式，特別是在jsonp跨域上。因此很少說了。

multipart XHR

  這是一種新點的技術，MXHR容許客戶端只用一個HTTP請求就能夠從服務器向客戶端傳送多個資源。它經過在服務器將資源（CSS文件、HTML片斷、JavaScript代碼或base64編碼的圖片）打包成一個由雙方約定的字符串分割的長字符串併發送到客戶端。而後用JavaScript代碼處理這個長字符串，並根據它的mime-type類型和傳入的其餘"頭信息"解析出每一個資源。

這種方式的缺點：

1）最大的缺點就是以這種方式獲取的資源不能被瀏覽器緩存。

2）編寫健壯的MXHR代碼很複雜。能夠從這裏得到完整的類庫：http://techfoolery.com/mxhr/。

可是某些場景下，仍是適用的：

1）頁面包含了大量其餘地方用不到的資源，所以也無須緩存，尤爲是圖片。

2）網站已經在每一個頁面中使用一個獨立打包的JavaScript或CSS以減小HTTP請求，由於對每一個頁面來講這些文件都是惟一的。並不須要從緩存中取。除非重載頁面。

 傳輸數據格式

當考慮數據傳輸技術時，你必須考慮這些因素：功能集、兼容性、性能以及傳輸方向。當考慮數據格式時，惟一須要比較的標準就是速度。

一般來講，數據越輕量越好。JSON和字符分隔的自定義格式是最好的。若是數據集很大而且對解析時間有要求，那麼能夠從以下兩種格式做出選擇：

1）JSON-P，使用動態腳本注入獲取。解析速度快且能跨域。可是涉及敏感數據時不該該使用它。

2）字符分隔的自定義格式，使用XHR或動態腳本注入獲取，用split()解析。這個大數據集比JSON-P略快，並且一般文件尺寸更小。

Ajax性能指南

·在服務端，設置HTTP頭信息以確保你的響應會被瀏覽器緩存。

·在客戶端，把獲取到的信息存儲到本地，從而避免再次請求。

 

 

 

好吧，拖了很久的一章書。終於看了。