"爱说说"技术原理:前端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：小技巧避开“点击”，引发音乐切换

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

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

 

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

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

 

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

 

相关文章：

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

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

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