1.選擇數(shù)據(jù)傳輸方式
（1）請求數(shù)據(jù)
-
XHR
- 可以異步和同步發(fā)送和接受數(shù)據(jù)挫望，可以在請求中添加頭部信息，并讀取響應(yīng)報(bào)文所有頭信息蛉幸，以及響應(yīng)文本
- 可以監(jiān)聽readyState,確定響應(yīng)信息正在傳輸中
- 不能從外域請求數(shù)據(jù)
- 經(jīng)GET請求的數(shù)據(jù)會被緩存起來（需要服務(wù)段添加expires頭部信息）
- GET請求參數(shù)長度接近和超過2048個字符奕纫，才使用POST請求
-
JSONP
- 能跨域請求數(shù)據(jù)，本質(zhì)為動態(tài)加載腳本又固，運(yùn)行腳本中的回調(diào)函數(shù)
- 只能發(fā)送GET請求仰冠，不能設(shè)置請求報(bào)文頭部信息洋只，不能訪問響應(yīng)頭部信息
- 響應(yīng)消息作為js執(zhí)行肢扯，并非字符串，解析速度相當(dāng)快
- 安全問題
-
Multipart XHR
- 客戶端用一個Http請求铭腕，從服務(wù)端詳客戶端傳輸多個資源累舷，服務(wù)端將資源打包成一個約定字符串分割的長字符串，再用js代碼處理這個長字符串
- 獲取的資源無法被瀏覽器緩存
- 減少HTTP請求數(shù)量能提升頁面性能
（2）發(fā)送數(shù)據(jù)
- XHR
- 發(fā)送到服務(wù)其是重要數(shù)據(jù)時只怎，在失敗時重試
xhr.onerror=function(){
fail(xhr.status);
//發(fā)送重要數(shù)據(jù)時重試
setTimeout(function(){
xhrPost(url,param,success,fail);
},1000);
};
- 發(fā)送數(shù)據(jù)時尝盼，GET方式更快，只用發(fā)送一個數(shù)據(jù)包殿漠，而POST方式，至少要發(fā)送兩個數(shù)據(jù)包莲蜘，一個裝載頭信息票渠，另一個裝載POST正文问顷，POST更適合發(fā)送大量數(shù)據(jù)到服務(wù)器
2.選擇數(shù)據(jù)格式
- 數(shù)據(jù)格式越輕量級越好肠骆，一般使用JSON，有極好的通用性
- 數(shù)據(jù)集較大且對解析時間有要求可以采用
- JSONP莉钙，是可執(zhí)行js而不是字符串胆胰，解析速度極快蜀涨，可以跨域使用厚柳，不可傳輸敏感數(shù)據(jù)，任何人都可以獲取到
- 字符分割的自定義格式碳想，用split解析胧奔，解析速度相當(dāng)快龙填，且通常文件尺寸更小
3.ajax性能優(yōu)化
最快的ajax請求就是沒有請求：
- 設(shè)置HTTP頭信息
使用GET請求岩遗，在服務(wù)端添加Expires頭部信息，告知瀏覽器資源要緩存響應(yīng)多久窘拯，通過瀏覽器緩存 - 本地?cái)?shù)據(jù)存儲
手動緩存資源，可以手動操作緩存暇番，且在移動設(shè)備上瀏覽器緩存較小
//手動緩存區(qū)
var cache={};
function xhrGet(url,success,fail){
if(cache[url]){
return success(cache[url]);
}
var xhr=new XMLHttpRequest();
xhr.onerror=function(){
fail(xhr.status);
};
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if((xhr.status>=200 && xhr.status<300)|| xhr.stauts===304){
cache[url]=xhr.responseText;
success(xhr.status,xhr.responseText);
}
else{
fail(xhr.status);
}
}
};
xhr.open('GET',url,true);
xhr.send(null);
}
4.其他優(yōu)化
- 減少請求數(shù)黍氮，合并js和css文件，或使用MXHR
- 縮短頁面加載時間，頁面主要內(nèi)容加載完成后纲辽，用ajax獲取那些次要的文件
- 確保代碼錯誤不會輸出給用戶，在服務(wù)端做好異常處理
- 使用成熟的ajax類庫
