在前端开发过程中，性能优化是非常重要的一部分，或许两到三秒的时间都将有不一样的体验；而且，对于目前前端开发，很多框架的使用，从而导致在开发过程中都会使用ajax和json的方式进行前后台的数据交互，在这过程中，如何优化ajax请求就非常重要；
我们在微信页面项目中，使用vue进行架构，vue resource进行ajax请求；由于做的企业服务；公司组织架构数据量就会因为公司的人员较多而导致数据量过大，请求时间过于长而导致体验很差；
所以最后后台尝试使用php gzencode对请求进行数据压缩；根据后台测试，对压缩后数据量，能够达到只有没有压缩之前数据量的十分之一，效果相当不错，后面的就是前端如何解析数据；
我们前端架构中，使用了node js中间层，主要负责前端页面路由及与后台php进行请求中转；
在使用请求压缩过程中，前端处理以下几个注意事项：
1、在node层中转时，由于需要能够正确返回已经进行压缩后的数据，即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模块时，因为需要能够正确返回压缩数据，需要在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数据后，需要将其转换成正常的string数据；此时，就使用了一个pako进行数据解析:
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); //注意事项3会解释
} catch (e) {
console.log(e)
}
return strData;
} catch (e) {
return data;
}
}
return data;
};
3、通过2中方式，可以正确解析数据，但是，当数据量过大时，pako会报错误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;
}
在注意事项2中，将var strData = String.fromCharCode.apply(null, array);这段代码换成var strData = handleCodePoints(array);，即将所有数据进行循环分块解析；
综上，使用请求压缩的方式，可以减少很多的数据请求，对于性能中请求优化是一个很好的方式；在前端处理过程中，也有不少的坑；
网友评论