网站优化之Ajax优化及相关工具

柯南在世

柯南在世

2016-02-19 17:07

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的网站优化之Ajax优化及相关工具教程,一起来看看吧!超容易上手~

  web2.0大量的ajax的使用,提高了ui交互的效率,但是过度的滥用会带来不少的问题。

  ajax使用注意事项:

  1 尽量避免使用同步ajax调用。在一些登录的场合常常使用同步调用服务器的登录接口。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  同步调用,需要将页面上的所有元素给锁定住,代价高昂。

  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太多的话,是会被阻塞的。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  2 返回的数据类型选择json而不是xml,一方面json数据格式会更小一些,另一方面接送封装成为一个js对象,操作起来性能会更好一些

  3 尽量缓存能够缓存的内容,避免重复的发起请求

  1)使用全局对象

  2) flash的本地存储

  3)google gears

  4) ie的userData

展开更多 50%)
分享

猜你喜欢

网站优化之Ajax优化及相关工具

Web开发
网站优化之Ajax优化及相关工具

网站优化之页面优化

Web开发
网站优化之页面优化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网站优化之数据库优化

Web开发
网站优化之数据库优化

网站优化之服务器配置优化

Web开发
网站优化之服务器配置优化

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网站优化之系统瓶颈查找

Web开发
网站优化之系统瓶颈查找

android内存优化之图片优化

编程语言 网络编程
android内存优化之图片优化

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

EXCEL查找并返回最后一个相同值

EXCEL查找并返回最后一个相同值

Excel批量替换公式的绝招

Excel批量替换公式的绝招
下拉加载更多内容 ↓