ajax优化

1.选择数据传输方式

（1）请求数据

• XHR

  • 可以异步和同步发送和接受数据，可以在请求中添加头部信息，并读取响应报文所有头信息，以及响应文本
  • 可以监听readyState,确定响应信息正在传输中
  • 不能从外域请求数据
  • 经GET请求的数据会被缓存起来（需要服务段添加expires头部信息）
  • GET请求参数长度接近和超过2048个字符，才使用POST请求

• JSONP

  • 能跨域请求数据，本质为动态加载脚本，运行脚本中的回调函数
  • 只能发送GET请求，不能设置请求报文头部信息，不能访问响应头部信息
  • 响应消息作为js执行，并非字符串，解析速度相当快
  • 安全问题

• Multipart XHR

  • 客户端用一个Http请求，从服务端详客户端传输多个资源，服务端将资源打包成一个约定字符串分割的长字符串，再用js代码处理这个长字符串
  • 获取的资源无法被浏览器缓存
  • 减少HTTP请求数量能提升页面性能

（2）发送数据

• XHR
  • 发送到服务其是重要数据时，在失败时重试

xhr.onerror=function(){
        fail(xhr.status);
        //发送重要数据时重试
        setTimeout(function(){
            xhrPost(url,param,success,fail);
        },1000);
    };

• 发送数据时，GET方式更快，只用发送一个数据包，而POST方式，至少要发送两个数据包，一个装载头信息，另一个装载POST正文，POST更适合发送大量数据到服务器

2.选择数据格式

• 数据格式越轻量级越好，一般使用JSON，有极好的通用性
• 数据集较大且对解析时间有要求可以采用
  • JSONP，是可执行js而不是字符串，解析速度极快，可以跨域使用，不可传输敏感数据，任何人都可以获取到
  • 字符分割的自定义格式，用split解析，解析速度相当快，且通常文件尺寸更小

3.ajax性能优化

最快的ajax请求就是没有请求：

• 设置HTTP头信息
  使用GET请求，在服务端添加Expires头部信息，告知浏览器资源要缓存响应多久，通过浏览器缓存
• 本地数据存储
  手动缓存资源，可以手动操作缓存，且在移动设备上浏览器缓存较小

//手动缓存区
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.其他优化

• 减少请求数，合并js和css文件，或使用MXHR
• 缩短页面加载时间，页面主要内容加载完成后，用ajax获取那些次要的文件
• 确保代码错误不会输出给用户，在服务端做好异常处理
• 使用成熟的ajax类库