QBlog官方博客

本博将记录与秋色园成长相关的历史路程及秋色园的开发进展等相关情况。
公告信息
欢迎光临秋色园官方博客,欢迎:下载与使用CYQBlog系统,并提出您的意见与建议。
文章档案
文章
爱说说技术原理:前端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:定时器的策略,优化请求资源

 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”秒之间。

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

相关文章:

秋色园是QBlog的官方站点,由路过秋天创建,基于cyqdata数据层框架开发的支持多用户、多语言、多数据库(access,mssql,oracle)、目录级url等功能强大的博客系统
新浪微博粉丝精灵,刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"
 爱说说系列    浏览(3037)    评论(1)    关键字 爱说说,秋色园,技术原理,前后台js优化
henrycomein : 2011/6/24 13:55:56
一直没怎么留意秋色园旗下的爱说说,光去理解博客源码了,呵呵
回复呵呵,把博客园源理解好了,也是很重要的,闲时就到爱说说听下音乐。
  
Copyright © 2010-2020 power by CYQ.Blog - 秋色园 v2.0 All Rights Reserved