ajax数据传输优化

使用 XHR 时,POST 和 GET 的对比

发送数据到服务器时,GET 方式会更快,因为对于少量数据而言,一个 GET 请求往服务器只发送一个数据包。而 POST 请求至少发送两个数据包,一个装载头信息,一个装载 POST 正文。POST 更适合发送大量数据到服务器,一是因为它不关心额外数据包的数量,二是 IE 对 URL 的长度有限制。

对于不会改变服务器状态,只获取数据(幂等行为)的请求应该使用 GET。经过 GET 请求的数据会被缓存起来,有助于提高多次请求的性能。

动态脚本注入是什么?有什么特点?

var scriptElement = document.createElement('script')
scriptElement.src = 'http://xxx.com/lib.js'
document.getElementsByTagName('head')[0].appendChild(scriptElement)
function jsonCallBack(jsonString) {
    var data = eval('(' + jsonString + ')')
}


// lib.js
jsonCallBack({"status":1})

利用 JS 创建一个新的脚本标签,并设置 src 属性为不同域的 URL,可以进行跨域请求数据。

不能设置请求头,只能使用 GET 方式,必须等待所有数据返回才可以访问。

响应消息必须是可执行的 JS 代码

使用脚本注入到页面中的任何代码都可以控制页面,包括修改内容和重定向到其它网站,因此引入外部来源的代码需要小心

MXHR(Multipart XHR) 有什么特点?

能把多次的 http 请求合并成一次请求,减少请求的数量会提升页面的性能。

元素使用data:URL的方式创建,因此不能被浏览器缓存,当网站在每个页面使用一个独立打包的 Js 或者 CSS 文件时不会受此影响,比如单页面使用时,从外部加载一次 CSS 就可以了。

Beacons(网络信标) 是什么?

使用 JavaScript 创建一个 Image 对象,并把 src 属性设置为服务器上脚本的 URL,URL 包含需要传输的键值对数据。

var url = '/status_tracker.php';
var params = ['userName=yosgi','step=2'];
(new Image).src = url + '?' + params.join('&');
// 这段代码会对/status_tracker.php?step=2&time=23311  发送请求

它无需向客户端返回信息,没有图片会实际显示出来。

虽然性能消耗很小,但因为 URL 长度有最大值,所以可以发送的数据长度很少。只能靠监听 Image 对象的 onload 事件判断服务器是否已经接受数据。

JSON JSON-P 的区别

在使用 XHR 时,JSON 数据被当成是字符串返回,紧接着字符串被 eval()转换成原生对象。

而 JSON-P 数据被当成另一个 Js 文件并作为原生代码执行。

JSON-P 可以跨域使用,涉及敏感数据的时候不应该使用它

关于自定义格式

创建自定义格式的例子:

'John;Jack;David'

只需要简单的把数据用分隔符链接,接收后使用 split()即可

创建自定义格式时,最好是使用一个单字符,而且不应该存在于数据之中,ASCII 字符表的前几个字符在大多数服务器语言能够正常工作。

\u0001 \u0002

总结优化 Ajax 的方法:

减少请求数,合并 JS 和 css 文件,或者使用 MXHR
缩短页面的加载时间,页面主要内容加载之后,使用 Ajax 获取次要的
知道何时使用成熟的 Ajax 类库,以及何时编写自己的底层 Ajax 代码(大多数 javascrpt 类库不允许直接访问 readystatechange 事件)