读书笔记-高性能js-Ajax

请求数据

请求数据的方式：

1. XMLHttpRequest(XHR) 【常用】
2. Dynamic script tag insertion 动态脚本注入【常用】
3. iframes
4. Conmet
5. Multipart XHR【常用】

XMLHttpRequest

流

通过监听readState 等于 3， 可以和正在传输的服务器响应进行交互。这就是所谓的流。
这时候能接收到部分信息，但不是所有信息。
低版本ie不支持流，不会提供3状态。

get

不改变服务器状态，只获取数据
get会被缓存，可以提高性能。
只有当url加上参数的长度接近或者超过2048才需要使用post。ie现在了url长度，过长会被拦截。

动态脚本注入

特点：能跨域请求数据。Hask。
缺点：

1. 不能设置请求头信息。
2. 参数只能使用get。
3. 不能使用post。
4. 不能设置超市处理或重试。
5. 不能访问请求头信息。
6. 不能把响应信息作为字符串处理。
7. 响应信息作为脚本标签的源码，必须是可执行的js，并且必须封装在回调函数中。

安全问题，如果数据是来自无法控制的服务器需要多加小心。

Multipart XHR

允许客户端用一个请求就可以从服务端向客服端传送多个资源。
它通过在服务端将资源（html片段，css文件，js代码，base64图片）打包成一个
由双方约定的字符串分割的长字符串并发送到客户端。
然后用js代码处理字符串，根据他的mime-type类型和传入的头信息解析出资源。

const splitImgages = function(imageString) {
  let imageData = imageString.split('\u0001')
  let imageElement;
  for (let i = 0, len = imageData.length; i < len; i++) {
    imageElement = document.createElement('img')
    imageElement.src = 'data:image/jpeg;base64,' + imageData[i]
    document.getElementById('container').appendChil(imageElement)
  }
}
let req = new XMLHttpRequest()
req.open('GET', '', true)
req.onreadystatechange = function() {
  if(req.readystate === 4) {
    splitImgages(req.responseText)
  }
}
req.send(null)

$images = array('1.jpg', '2.jpg', '3,jpg');
foreach($images as $image) {
  $image_fh = fopen($image, 'r')
  $image_data = fread($image_fh, filesize($image));
  fclose($image_fh);
  $payloads[] = base64_encode($image_data)
}
$newline = chr(1);
echo implode($newline, $payloads);

这里同时传了三张，也可以同时传更多，响应消息更大，但只使用了一次http请求。

MXHR类库：http://rechfoolery.com/mxhr/

缺点：获取的资源不能被浏览器缓存

应用场景：

1. 页面包含了大量其他地方用不到的资源，因此也无需缓存。
2. 网站已经在每个页面中使用一个独立打包的js或者css文件来减少http请求，因为对每个页面来说这些文件都是唯一的
   不需要从缓存中读取数据，除非重载页面。

一次请求比多次请求速度快。

发送数据

1. XHR（适用大数据传送和不同的返回数据类型
2. 信标（beacons)（适用极少的返回信息，上传

信标

let url = 'test.php'
let params = [
  'step=2',
  'time="1111112233'
]
let beacon = new Image()
beacon.src = url + '?' +  params.join('&')
beacon.onload = function() {
  if(this.width === 1) { // 假设图片宽度为1是成功
    // ... 成功
  } else if(this.width === 2) {
    // ...失败重试
  }
}
beacon.onerror = function() {
  // 出错重试
}

服务器会接受到数据并保存下来，它无须向客户端发送任何消息，因此没有图片会实际显示出来。
性能消耗小，服务端的错误不会影响客户端。

Image对想的load事件可以监听返回的数据。比如告诉你服务器是否成功接受数据。

如果不需要返回信息，可以发送一个不带消息正文的204 No content 状态码。

缺点：能接受的响应类型有限。不能使用post上传。

数据格式

推荐： json，传输尺寸小，解析速度快。

数据传输技术因素：

1. 功能集
2. 兼容性
3. 性能
4. 方向（接受还是发送）

数据格式：考虑速度

1. XML
2. XPath
3. json
4. jsonp
5. html
6. 自定义

json的三种写法

1. 标准

[
  {
    "id": 1,
    "uname": 'a'
  },
  ...
]

2. 简化

[
  {
    "i": 1,
    "u": 'a'
  },
  ...
]

3. 数组

[
  [ 1, 'a' ],
  ...
]

可读性换取速度,所以有的框架依靠约定来获取速度，且以维护文档的形式来维护代码之间的映射关系。

JSON-P

最快是数组的jsonp

注意问题：不可存放敏感信息，可能被插入到任何网站。

自定义格式

使用字符串分隔符split(),它是最快的支持操作方式之一。

适用数据量非常大的情况，这种形式比json略快。通用文件尺寸更小。

性能

缓存数据

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

1. 服务端，设置http头信息以确保你的响应会被浏览器缓存
2. 客户端，把获取到的信息存储到本地，从而避免再次请求。

设置http头信息

get请求
Expires 设置缓存过期时间。图片或者其他静态资源集
比本地数据存储更好。
实现容易，跨页面，跨会话

本地数据存储

把响应的文本保存到一个对象中，以url作为键值索引。
手工管理，移动设备

局限性

封装的ajax没有提供状态控制，比如3的情况来控制流。
使用原生的XHR并做兼容即可操作流。

总结：

1. 减少请求数，合并js和css文件，使用MXHR
2. 使用ajax获取次要文件
3. 服务端处理错误
4. 使用时机。