性能优化之AJAX

明天就放假啦~哈哈。四月份好像尚未输出呢，吓得我赶忙写点东西...

Ajax是高性能JavaScript的基础。

Ajax，从最基本的层面来讲，是一种与服务器通讯而无需重载页面的方法。数据能够从服务器获取或发送给服务器。

最经常使用的三种用于向服务器请求数据的方法：

①XHR。

②动态脚本注入。

③multipart XHR。

XML HttpRequest

   这种方式，这里就很少说了。点这里能够了解。这里记录一下要注意的地方：

使用XHR时，POST和GET的对比。对于那些不会改变服务器状态，只会获取数据的请求。应该使用GET。经GET请求的数据会被缓存起来。若是须要屡次请求同一数据的话，它会有助于提高性能。可是也要注意使用这个特性一个比较容易踩的坑。

例如：你请求回来了一个数组。而后要随机选择其中的三个。按照通常的作法，就是随机生成一个长度内的数做为数组下标，取值。在原数组删掉该选项，再从新选择。以此类推。但因为数组是对象，若是只是简单的赋值给一个变量，在删除该变量的某个数组项时，原数组也会被改变。这个时候，刷新页面，ajax请求缓存了的前一次的请求。那么你获得的数组就是被删除了几项的数组了。

好吧，其实，主要仍是注意对象的修改问题。。。

当请求的URL加上的参数长度接近或超过2048个字符时，才应该用POST获取数据，是由于IE限制URL长度，过长时会致使请求的url被截断。

动态脚本注入

   这种方式也是用得不少的一种方式，特别是在jsonp跨域上。因此很少说了。

multipart XHR

  这是一种新点的技术，MXHR容许客户端只用一个HTTP请求就能够从服务器向客户端传送多个资源。它经过在服务器将资源（CSS文件、HTML片断、JavaScript代码或base64编码的图片）打包成一个由双方约定的字符串分割的长字符串并发送到客户端。而后用JavaScript代码处理这个长字符串，并根据它的mime-type类型和传入的其余"头信息"解析出每一个资源。

这种方式的缺点：

1）最大的缺点就是以这种方式获取的资源不能被浏览器缓存。

2）编写健壮的MXHR代码很复杂。能够从这里得到完整的类库：http://techfoolery.com/mxhr/。

可是某些场景下，仍是适用的：

1）页面包含了大量其余地方用不到的资源，所以也无须缓存，尤为是图片。

2）网站已经在每一个页面中使用一个独立打包的JavaScript或CSS以减小HTTP请求，由于对每一个页面来讲这些文件都是惟一的。并不须要从缓存中取。除非重载页面。

 传输数据格式

当考虑数据传输技术时，你必须考虑这些因素：功能集、兼容性、性能以及传输方向。当考虑数据格式时，惟一须要比较的标准就是速度。

一般来讲，数据越轻量越好。JSON和字符分隔的自定义格式是最好的。若是数据集很大而且对解析时间有要求，那么能够从以下两种格式做出选择：

1）JSON-P，使用动态脚本注入获取。解析速度快且能跨域。可是涉及敏感数据时不该该使用它。

2）字符分隔的自定义格式，使用XHR或动态脚本注入获取，用split()解析。这个大数据集比JSON-P略快，并且一般文件尺寸更小。

Ajax性能指南

·在服务端，设置HTTP头信息以确保你的响应会被浏览器缓存。

·在客户端，把获取到的信息存储到本地，从而避免再次请求。

 

 

 

好吧，拖了很久的一章书。终于看了。