这几天分享一下我看《高性能 JavaScript》的学习笔记，希望能对大家有所帮助。
请求数据
一共 5 种从服务器请求数据的方式：
- XMLHttpRequest (XHR)
- 动态脚本注入
- iframe
- Comet
- Multipart XHR
其中 iframe 和 Comet 只有在特殊情况下会被使用。
XHR
XHR 是最最常用的数据请求工具了。它不止有 get 方法，还有 post、put、delete 这些方法。像 Axios 这类数据请求库就是 XHR 的封装。
动态注入脚本
动态注入脚本其实就是在 DOM 中添加指定 src 的 <script> 标签。
var scriptElement = document.createElement('script')
scriptElement.src = 'http://whale.ke.com/getList?name="123"&id=888'
document.getElementByTagName('head')[0].appendChild(scriptElement)
Multipart XHR
这种方案其实也是基于 XHR 的：
- 客户端使用 XHR 发起请求
- 服务器端响应多条数据的合成。
- 客户端收到响应后拆分数据、解析数据。
- 由于这种合成数据一般很大，我们可以使用轮询现有响应数据流来逐步获取数据。
发送数据
一共两种发送数据的方式：
- XHR
- 信标
XHR
上面我们提到了 XHR 能够发送各类 http 请求，所以给服务器发送数据必然没有问题。无论是 GET 还是 POST 都可以做到传输数据到服务器端。
但是 URL 是有长度限制的，在处理类似表单这类大量数据的提交时，最好还是用 POST 方法。
信标
信标的创建方法（类似于动态脚本注入）：
- 创建 Image 对象
- 为 Image 对象 src 定义 URL
var url = "/status_tracker.php"
var params = [
"step=2",
"time=1243879"
]
(new Image()).src = url + "?" + params.join('&')
这样就可以向服务器端发送 URL 拼接出的数据了。同样的，由于 URL 长度限制，无法传输大量数据。
优点：它是给服务器回传消息最有效的方式。性能消耗很小，且服务端错误不会影响客户端运行。
缺点：有 URL 长度限制，返回的信息很少。
那么提交数据的方式怎么选呢？
- 如果要提交大量数据，建议用 XHR
- 如果只是要发送简单数据到服务器端，用信标。
数据格式
常用的数据格式有以下几种：
- XML —— 笨重而完善的数据格式，兼容性很好，性能不佳。
- JSON —— 性能表现最好的数据格式
- JSON-P —— 动态注入的 JSON 脚本，解析快、能跨域、但不安全。
- HTML —— 特定场景下的数据格式
- 自定义格式 —— 自己约定的数据格式，性能好，但是需要约定解析方法。
总的来说，对于一般情况 JSON 是表现最好的数据格式。如果数据集很大并且对解析时间有要求，可以使用以下两种方案之一：
- JSON-P：使用动态脚本注入技术注入，通过执行 JavaScript 而非解析字符串的方式来获取数据。它解析速度极快、还可以跨域进行，但是不安全。
- 使用字符分隔的自定义格式，利用动态脚本注入或者 XHR 获取自定义格式数据后，通过
split()方法解析自定义字符串。这种方法速度快、数据文件小。
Ajax 性能优化
- 缓存数据，最快的请求就是没有请求。
- 设置 HTTP 头部信息
- 本地数据存储
- 注意使用 Ajax 类库会有一些局限，如不能访问 readyState 所以不能实现 MXHR。
小结
整体看下来，动态脚本注入来加载数据也是不错的数据获取方式。而 XHR + JSON 是现阶段最流行的数据传输方式。在性能上也表现不错。
更多 Ajax 的优化，还需要好好学习 HTTP 相关知识，如设置头部信息、设置缓存、过期时间、http2 等知识点。
网友评论