性能优化之AJAX

时间:2022-04-30 14:07:59

明天就放假啦~哈哈。四月份好像还没有输出呢,吓得我赶紧写点东西...

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头信息以确保你的响应会被浏览器缓存。

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

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