爱说说技术原理:前端Javascript优化技巧

2011/6/24 12:50:31

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

本节，看一下前端的逻辑及优化事项[爱说说：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：定时器的策略，优化请求资源

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

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

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

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

具体：

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

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

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

原因：<a href="javascript:xxx()"...的方式的点击会引起iframe 的音乐链接重新加载，从而音乐自动切换了。

解决：<a href="###" onclick="xxx()"...换成这种方式即可以了。

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

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

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

相关文章：

1：爱说说技术原理方案的定选思考过程

2：爱说说技术原理:与TXT交互及MDataTable对Json的功能扩展

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

Autumn Garden is QBlog the official site, created by the passing autumn, based on the framework data layers developed cyqdata support multi-user, multi-language, multi-database (access, mssql, oracle), directory level url and other powerful blog system

LoveSpeak

Browse(4943)

Comment(1)

Tag 爱说说,秋色园,技术原理,前后台js优化