在前端開發(fā)過程中支子，性能優(yōu)化是非常重要的一部分创肥，或許兩到三秒的時間都將有不一樣的體驗(yàn)；而且值朋，對于目前前端開發(fā)叹侄，很多框架的使用，從而導(dǎo)致在開發(fā)過程中都會使用ajax和json的方式進(jìn)行前后臺的數(shù)據(jù)交互吞歼，在這過程中圈膏，如何優(yōu)化ajax請求就非常重要；
我們在微信頁面項(xiàng)目中篙骡，使用vue進(jìn)行架構(gòu)稽坤，vue resource進(jìn)行ajax請求丈甸；由于做的企業(yè)服務(wù)；公司組織架構(gòu)數(shù)據(jù)量就會因?yàn)楣镜娜藛T較多而導(dǎo)致數(shù)據(jù)量過大尿褪，請求時間過于長而導(dǎo)致體驗(yàn)很差睦擂；
所以最后后臺嘗試使用php gzencode對請求進(jìn)行數(shù)據(jù)壓縮；根據(jù)后臺測試杖玲，對壓縮后數(shù)據(jù)量顿仇，能夠達(dá)到只有沒有壓縮之前數(shù)據(jù)量的十分之一，效果相當(dāng)不錯摆马，后面的就是前端如何解析數(shù)據(jù)臼闻；
我們前端架構(gòu)中，使用了node js中間層囤采，主要負(fù)責(zé)前端頁面路由及與后臺php進(jìn)行請求中轉(zhuǎn)述呐；
在使用請求壓縮過程中，前端處理以下幾個注意事項(xiàng)：
1蕉毯、在node層中轉(zhuǎn)時乓搬，由于需要能夠正確返回已經(jīng)進(jìn)行壓縮后的數(shù)據(jù)，即The encoded string字符代虾；所以在通過看request api;有如下：
encoding:
- Encoding to be used onsetEncoding of response data. Ifnull, thebody is
returned as aBuffer. Anything else**(including the default value ofundefined)**
will be passed as the[encoding(http://nodejs.org/api/buffer.html#buffer_buffer)
parameter totoString()(meaning this is effectivelyutf8 by default).
(**Note:**if you expect binary data, you should setencoding: null.)
可以看出进肯，在node中使用request模塊時，因?yàn)樾枰軌蛘_返回壓縮數(shù)據(jù)棉磨，需要在node端請求php時：
request({
headers: headers_params,
uri: serviceURL,
method: 'GET',
encoding: config.isCompress ? null : undefined,
timeout: 180000
}, function (error, response, body) {
})
即江掩，如果需要壓縮，則encoding: null乘瓤；如果不需要壓縮频敛，則encoding: undefined;
2、在前端馅扣，ajax正確返回encoded數(shù)據(jù)后，需要將其轉(zhuǎn)換成正常的string數(shù)據(jù)着降；此時差油，就使用了一個pako進(jìn)行數(shù)據(jù)解析:
var compressToString = function (data) {
if (window.pako) {
try {
var binData = new Uint8Array(data);
var _data = pako.inflate(binData);
try {
var array = new Uint16Array(_data);
var strData = String.fromCharCode.apply(null, array);
//var strData = handleCodePoints(array); //注意事項(xiàng)3會解釋
} catch (e) {
console.log(e)
}
return strData;
} catch (e) {
return data;
}
}
return data;
};
3、通過2中方式任洞，可以正確解析數(shù)據(jù)蓄喇，但是，當(dāng)數(shù)據(jù)量過大時交掏，pako會報(bào)錯誤Maximumcallstacksizeexceeded;所以需要如下方式處理：
function handleCodePoints(array) {
var CHUNK_SIZE = 0x8000; // arbitrary number here, not too small, not too big
var index = 0;
var length = array.length;
var result = '';
var slice;
var arr = [];
for (var i = 0, _i = array.length; i < _i; i++) {
arr[i] = array[i];
}
while (index < length) {
slice = arr.slice(index, Math.min(index + CHUNK_SIZE, length)); // `Math.min` is not really necessary here I think
result += String.fromCharCode.apply(null, slice);
index += CHUNK_SIZE;
}
return result;
}
在注意事項(xiàng)2中妆偏，將var strData = String.fromCharCode.apply(null, array);這段代碼換成var strData = handleCodePoints(array);，即將所有數(shù)據(jù)進(jìn)行循環(huán)分塊解析盅弛；
綜上钱骂，使用請求壓縮的方式叔锐，可以減少很多的數(shù)據(jù)請求，對于性能中請求優(yōu)化是一個很好的方式见秽；在前端處理過程中愉烙，也有不少的坑；
