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

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

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

前言说明：

[b]1：前端没有使用JQ，采用原生的XmlHttp做为异步请求。
2：前端代码就不多贴了，直接查看页面源文件就能看到所有的代码了。[/b]

以下讲一下“爱说说”在这个过程中优化过的注意事项：
[PS：事隔这么久，好多都忘了，只能靠点回忆代码来写了]

一：基础优化

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

[b]不良用法：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;[/b]

2：定义的对象或变量，用完后，赋null值：
[b]var a;.....使用a.....a=null;//用完赋null值。[/b]

二：逻辑优化

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

[b]1：首次请求，加载1页数据40条消息，后面可以点击显示更多，每次40条消息。
消息显示难点：40条中可能包含回复，而回复的主留言可能在40之外，因此，对于回复，如果找不到父ID，即主留言，临时存储到数组中，等用户点击更多时，再看看有没有父ID存在，有就挂下去补充，没有继续存储等待更多...如果重复的说。
2：定时请求，请求从消息的尾步开始，每次请求后拿取maxID，下次根据maxID请求后续内容。[/b]

2：客户端基本优化策略

1：代码重用，函数封装，优化调用

2：定时器的策略，优化请求资源
[b] 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();//开始新的计时刷新
}
}
}[/b]
PS：从这段代码看，策略是对于不聊天的人群，采用步步拉大请求时间，节省服务器请求资源。

3：聊天策略，优化加载，聊天流畅

[b]原因：如果在打字的时候，刚好遇到消息回来并加载显示的过程，界面会变的相当的卡。
因此策略是：聊天时，停止消息加载，发布消息后，恢复消息加载。
具体：
光标定位到打字框时，设置标识
停止加载-》存储未加载的对象到数组中[到下次请求时一起显示]-》发表留言[恢复标识][/b]

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

[b]原因：<a href="javascript:xxx()"...的方式的点击会引起iframe 的音乐链接重新加载，从而音乐自动切换了。
解决：<a href="###" onclick="xxx()"...换成这种方式即可以了。[/b]

5：适当避开快速聊天，限制“发布”按钮

[b]发布消息时，将“发布”按钮置不可用，等下次消息回来时，再恢复“发布”按钮的可用状态，因此两次聊天的时间间隔是“1-8”秒之间。

本节就介绍到了，其它的不容易想，感兴趣的自行研究了。

相关文章：

1：爱说说技术原理方案的定选思考过程
2：爱说说技术原理:与TXT交互及MDataTable对Json的功能扩展
3：爱说说技术原理:前后台参数约定及逻辑代码
[/b] 本文出自 “路过秋天” 博客，请务必保留此出处http://cyq1162.blog.51cto.com/2127378/595640