性能优化之php gzencode请求压缩及前端处理及注意事项

在前端开发过程中，性能优化是非常重要的一部分，或许两到三秒的时间都将有不一样的体验；而且，对于目前前端开发，很多框架的使用，从而导致在开发过程中都会使用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);，即将所有数据进行循环分块解析；

综上，使用请求压缩的方式，可以减少很多的数据请求，对于性能中请求优化是一个很好的方式；在前端处理过程中，也有不少的坑；