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

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

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

时间: 2024-10-12 23:05:32

性能优化之AJAX的相关文章

ajax性能优化

ajax性能优化 例: ajax性能优化 模块: A B C D 开销: 50%  3% 25%   22% 如果我们优化B就如同那些那些只执行一次的代码,性能·提高不到哪里去:反之,我们去优化A,比如去优化它的循环,减少循环的嵌套,就能很好的提高网站性能(当然,这必须建立在程序符合要求的前提下). 使用ajax技术(ajax库http://developer.yahoo.com/yui/) ajax实现方式:发送数据包到服务器(通常编码为json),然后服务端返回一个数据包(也就是json编码

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

雅虎35条性能优化建议

雅虎35条性能优化建议分7类,共35条: [内容]尽量减少HTTP请求数 [服务器]使用CDN(Content Delivery Network) [服务器]添上Expires或者Cache-Control HTTP头 [服务器]Gzip组件 [css]把样式表放在顶部 [js]把脚本放在底部 [css]避免使用CSS表达式 [js, css]把JavaScript和CSS放到外面 [内容]减少DNS查找 [js, css]压缩JavaScript和CSS [内容]避免重定向 [js]去除重复脚

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

如何进行网站性能优化

如何进行网站性能优化 雅虎Best Practices for Speeding Up Your Web Site: content方面 减少HTTP请求:合并文件.CSS精灵.inline Image 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件.方法:DNS缓存.将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 避免重定向:多余的中间访问 使Ajax可缓存 非必须组件延迟加载 未来所需组件预加载 减少DOM元素数量 将资源放到不同的域下:浏览器同时从一个域下载

web前端之性能优化

作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 首先我们从三个大类讲起:一,网络服务器.二,浏览器,三代码上面,针对这三个大类总结出了下面

jQuery性能优化

1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"> <li&

前端性能优化

前端性能优化的方法? content方面 1,减少HTTP请求:合并文件.CSS精灵.inline Image 2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件.方法:DNS缓存.将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 3,避免重定向:多余的中间访问 4,使Ajax可缓存 5,非必须组件延迟加载 6,未来所需组件预加载 7,减少DOM元素数量 8,将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量 9,减少iframe数

[开源]jquery-ajax-cache:快速优化页面ajax请求,使用localStorage缓存请求

项目:jquery-ajax-cache 地址:https://github.com/WQTeam/jquery-ajax-cache     最近在项目中用到了本地缓存localStorage做数据的缓存. 1.简单说下localStorage localStorage和cookies相比,在浏览器中存储的容量更大.另外最大的特点是不会附带在http请求中传给后台,不会像cookies一样导致http头部变大影响传输性能.基于这个原因,localStorage适合缓存一些常用的数据,无需平凡的