美文网首页
ajax优化

ajax优化

作者: 星月西 | 来源:发表于2017-04-09 11:09 被阅读107次

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类库

相关文章

  • 前端性能优化指南

    前端性能优化指南 AJAX优化 缓存AJAX: 请求使用GET:当使用XMLHttpRequest时,而URL长度...

  • 前端性能优化

    AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...

  • ajax优化

    1.选择数据传输方式 (1)请求数据 XHR可以异步和同步发送和接受数据,可以在请求中添加头部信息,并读取响应报文...

  • 性能优化

    ajax优化 1、缓存ajax:a、异步并不等于及时2、请求使用GETa、- 当使用XMLHttpRequest时...

  • jquery使用(一):ajax

    一、ajax基本参数配置 二、ajax数据缓存优化 1.$.ajax不缓存版: 要解决:清除缓存,可以有三种解决方...

  • AJAX 请求优化

    避免请求缓存,在url后面拼接随机字符串

  • 利用Ajax提升网页渲染速度——以Highcharts为例

    先来看看速度优化对比 AJAX = Asynchronous JavaScript and XML(异步的 Jav...

  • 学习掌握清单

    Yii2 框架JavascriptJqueryMysql 优化Apache 环境搭建Ajax趋势图导入artDi...

  • ajax方法的封装

    用JavaScript封装了一个ajax的get,post两种方法的请求 优化

  • SuperAgent使用简介

    SuperAgent SuperAgent是轻量级更为优化的ajax API,对比大量糟糕的现存的API,Supe...

网友评论

      本文标题:ajax优化

      本文链接:https://www.haomeiwen.com/subject/cvyrattx.html