网站优化之Ajax优化及相关工具web前端的优化除了页面优化外,对于ajax的使用优化也是一个比较大的问题。
web2.0大量的ajax的使用,提高了ui交互的效率,但是过度的滥用会带来不少的问题。
ajax使用注意事项:
1 尽量避免使用同步ajax调用。在一些登录的场合常常使用同步调用服务器的登录接口。
同步调用,需要将页面上的所有元素给锁定住,代价高昂。
2 ajax调用时多使用超时设置,目前许多ajax框架如jquery都会提供超时参数的设置。
利用超时,可以很好的完善ui的交互,同时避免对服务器造成压力。
3 针对业务特性开启ajax缓存。不需要重新拉取的东东,尽量的缓存起来。
4 发送请求前对发送的数据进行pre验证,一方面可以做到对用户友好,另一方面避免太多的异常。
不小心的异常数据会导致服务器down掉。
5 对于服务器返回的数据也要仔细处理,不要相信其数据一定是格式化和验证好的。譬如对于json的数据,需要先判断相应的key是否存在,再进行操作,
否则会出现undifined的情况。
ajax请求处理一般的ui交互流程是这样的:
1 当发起ajax请求时,更新ui,譬如出现一个高亮的tip,提示用户操作开始进行
2 锁住需要更新的ui部份,同时提醒用户会什么会锁住,譬如将原div隐藏,加载一个正在加载的gif图标
3 数据成功返回后,更新ui,解除对ui的锁定
4 如果服务器返回失败,提示用户友好的失败信息
ajax使用中一些提示:
1 由于浏览器的同时向一个域名发起请求的并发数是有限制的,如ie默认的是2个,如果同时发起的ajax太多的话,是会被阻塞的。
2 返回的数据类型选择json而不是xml,一方面json数据格式会更小一些,另一方面接送封装成为一个js对象,操作起来性能会更好一些
3 尽量缓存能够缓存的内容,避免重复的发起请求
1)使用全局对象
2) flash的本地存储
3)google gears
4) ie的userData
网站优化过程常用的工具:
1 firebug和yslow,ff下常用的两个工具了
2 httpwatch和fiddler,对于网络时间的检测也不错
3 Task manager
4 js内存泄漏检测工具
5 观看优化的工具:
1)AjaxView
2)JsLex
3)YUI profiler
网站优化之页面优化
效率和开始的节奏以及功能的丰富彼此相互制约。最近忙着做功能,明知道有些地方可以优化的也得先放放,但是老大一关注,你的马上去做。
在老大的眼中,一次优化好后就可以不再优化,或者只需要很少的时间来维护,却不知道,优化是一个持续的过程,想法赶不上变化。
做人难,做事情更难!
优化如何开始,怎么开始,以及做些什么还是值得思量的。
优化的一些准则:
1 优化是持续存在的,当你开始做一个功能的时候,优化就开始了。而我们往往认为新做的功能就是一个优化好的功能,殊不知这个功能或者会影响到其他的功能,
或者先把功能做到70%,稍后再去优化也不迟。
2 不到万不得已的时候不要去优化。用户对于性能是有一定的忍耐性的,有时一个小小的加载图标就能让用户感到很满足的。
3 优化时需要写下用例来驱动,什么条件下测试的结果如何,有了测试用例,我们才能做到有的放矢;优化时需要保存系统的一个快照;有了这些历史信息我们才能更好的去对比,去寻找不足和需要继续优化的地方。
4 优化需要针对的是系统的瓶颈所在,找到系统的性能瓶颈,攻破他,我们得到的是事半功倍的效果。
对于一个网站的页面优化又该从何入手呢?
一个web网站的页面的生命周期有3个阶段:
1 加载
2 渲染
3 响应用户的交互
针对这三个阶段需要采取不同优化策略:
1 对于加载阶段:
加载的核心是网络传输,因此重点就是将页面折腾到最小、放到离用户最近的地方,这样加载就快了。具体的实施细则可以参考:yahoo的14条建议
摘要如下:
折腾小的话,需要将页面中无用的信息去掉,gzip压缩。
1)采用yui compressor来进行压缩css和js等
2)合并js和css文件,使用jsmin等工具
3)压缩图片,合并背景图。常用工具PngCrush、PngOptimizer。
4)延迟加载,等用户用到了相应的素材时才对素材进行加载。
离用户最近的话,那就是用户的浏览器cache了,所以要设置页面元素的尽量长的过期时间,能够cache的统统cache住,能够放到cdn的都放到cdn上去
2 对于渲染阶段:
渲染阶段的核心是让用户尽快的看到页面的展现,能够与页面进行交互,因此重点是显示首屏的内容,让用户提早的能够看到页面,感受交互。
1 页面首屏先显示出来的话,需要将js代码的事件处理在dom树构建好之后,如同jquery的ready事件。
2 对于html中一些默认可以不关闭的标签,尽早的关闭掉,这样也有助于提高渲染的速度。如果让浏览器去判断何时关闭才是ok的,那需要不少的回溯操作,花费不少的代价。
msdn上有详细的描述 Close Your HTML Tags
Unlike XML, HTML has the notion of implicitly closed tags. This includes frame, img, li, and p. If you don't close these tags, Internet Explorer renders your pages just fine. If you do ...