"爱说说"技术原理:前端Javascript优化技巧（四）

上一节:爱说说技术原理:前后台参数约定及逻辑代码 中,讲解了“爱说说”的后台简单的逻辑处理代码。

本节,看一下前端的逻辑及优化事项[爱说说:http://speak.cyqdata.com/ ]

前言说明:

1:前端没有使用jq,采用原生的xmlhttp做为异步请求。

2:前端代码就不多贴了,直接查看页面源文件就能看到所有的代码了。

以下讲一下“爱说说”在这个过程中优化过的注意事项:

[ps:事隔这么久,好多都忘了,只能靠点回忆代码来写了]

一:基础优化

1:避免直接用控件循环加载html,而用变量组合html,最后一次给控件的innerhtml赋值:

不良用法:for(i in json.data){$('div').innerhtml+=json.data[i].name;}

正规用法:var html;for(i in json.data){html+=json.data[i].name;}$('div').innerhtml=html;

2:定义的对象或变量,用完后,赋null值:

var a;.....使用a.....a=null;//用完赋null值。

二:逻辑优化

1:客户端基本请求策略:

1:首次请求,加载1页数据40条消息,后面可以点击显示更多,每次40条消息。

消息显示难点:40条中可能包含回复,而回复的主留言可能在40之外,因此,对于回复,如果找不到父id,即主留言,临时存储到数组中,等用户点击更多时,再看看有没有父id存在,有就挂下去补充,没有继续存储等待更多...如果重复的说。

2:定时请求,请求从消息的尾步开始,每次请求后拿取maxid,下次根据maxid请求后续内容。

2:客户端基本优化策略

1:代码重用,函数封装,优化调用

2:定时器的策略,优化请求资源

function getnewmsgcallback(result,callbytimer)

{

loadcallback(result,callbytimer);

if(callbytimer)//系统定时器

{

idletimes++;//设置空闲次数

switch(idletimes)

{

case 8://1分钟没发言,将会16秒刷新一次

case 16://3分钟没发言[又过了16*8秒],将会32秒刷新一次

case 24://7分钟没发言[又过了32*8秒],将会64秒刷新一次

handletime=handletime*2;//定时器时间加倍

cleartmer();//取消刷新

timer();//开始新的计时刷新

break;

case 75://1小时没反应,自动刷新。

location.href=location.href;

break;

}

}

else

{

idletimes=0;//用户发表信息,恢复定时器

if(handletime!=8000)

{

handletime=8000;//定时器时间还原

cleartmer();//取消刷新

timer();//开始新的计时刷新

}

}

}

ps:从这段代码看,策略是对于不聊天的人群,采用步步拉大请求时间,节省服务器请求资源。

3:聊天策略,优化加载,聊天流畅

原因:如果在打字的时候,刚好遇到消息回来并加载显示的过程,界面会变的相当的卡。

因此策略是:聊天时,停止消息加载,发布消息后,恢复消息加载。

具体:

光标定位到打字框时,设置标识

停止加载-》存储未加载的对象到数组中[到下次请求时一起显示]-》发表留言[恢复标识]

4:小技巧避开“点击”,引发音乐切换

原因:解决：5：适当避开快速聊天。
       限制“发布”按钮发布消息时。
       将“发布”按钮置不可用。
       等下次消息回来时。
       再恢复“发布”按钮的可用状态。
       因此两次聊天的时间间隔是“1-8”秒之间。 本节就介绍到了。
       其它的不容易想。
       感兴趣的自行研究了。 相关文章：1：爱说说技术原理方案的定选思考过程

2:爱说说技术原理:与txt交互及mdatatable对json的功能扩展

3:爱说说技术原理:前后台参数约定及逻辑代码

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/