上一节:爱说说技术原理:前后台参数约定及逻辑代码 中,讲解了“爱说说”的后台简单的逻辑处理代码。
本节,看一下前端的逻辑及优化事项[爱说说: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值:
二:逻辑优化
1:客户端基本请求策略:
1:首次请求,加载1页数据40条消息,后面可以点击显示更多,每次40条消息。
消息显示难点:40条中可能包含回复,而回复的主留言可能在40之外,因此,对于回复,如果找不到父ID,即主留言,临时存储到数组中,等用户点击更多时,再看看有没有父ID存在,有就挂下去补充,没有继续存储等待更多...如果重复的说。
2:定时请求,请求从消息的尾步开始,每次请求后拿取maxID,下次根据maxID请求后续内容。
2:客户端基本优化策略
1:代码重用,函数封装,优化调用
2:定时器的策略,优化请求资源
{
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:小技巧避开“点击”,引发音乐切换
原因:<a href="javascript:xxx()"...的方式的点击会引起iframe 的音乐链接重新加载,从而音乐自动切换了。
解决:<a href="###" onclick="xxx()"...换成这种方式即可以了。
5:适当避开快速聊天,限制“发布”按钮
发布消息时,将“发布”按钮置不可用,等下次消息回来时,再恢复“发布”按钮的可用状态,因此两次聊天的时间间隔是“1-8”秒之间。
本节就介绍到了,其它的不容易想,感兴趣的自行研究了。
相关文章:
版权声明:本文原创发表于 博客园,作者为 路过秋天 本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。 |
个人微信公众号![]() |
Donation(扫码支持作者):支付宝:![]() |
Donation(扫码支持作者):微信:![]() |
![]() |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)