性能优化之AJAX

Posted 2020-09-08 小蚊

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

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

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

 

 

 

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