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

 

以下讲一下“爱说说”在这个过程中优化过的注意事项：

[PS：事隔这么久，好多都忘了，只能靠点回忆代码来写了]

 

一：基础优化

 

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

正规用法：var html;for(i in json.data){html+=json.data[i].Name;}$(div).innerHTML=html;

消息显示难点：40条中可能包含回复，而回复的主留言可能在40之外，因此，对于回复，如果找不到父ID，即主留言，临时存储到数组中，等用户点击更多时，再看看有没有父ID存在，有就挂下去补充，没有继续存储等待更多...如果重复的说。

2：定时请求，请求从消息的尾步开始，每次请求后拿取maxID，下次根据maxID请求后续内容。

            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：聊天策略，优化加载，聊天流畅

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

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

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

前端网络、JavaScript优化以及开发小技巧 YSlow有23条规则，中文可以参考这里。这几十条规则最主要是在做消除或减少不必要的网络延迟，将需要传输的数据压缩至最少。
JavaScript深入浅出第4课：V8引擎是如何工作的？ 作为JavaScript程序员，只有极少数人有机会和能力去实现一个JS引擎，但是理解JS引擎还是很有必要的。本文将介绍一下V8引擎的原理，希望可以给大家一些帮助。
【干货合集】让我们聊一聊如何用世界上最流行的脚本语言——JavaScript写出优美的代码 近年来，随着 HTML5 和 Node.js 的发展，JavaScript 在各个领域遍地开花，已经从“世界上最被误解的语言”变成了“世界上最流行的语言”。本文中也为大家精选了云栖社区上与JavaScript相关的诸多干货，希望能够对于正在学习JavaScript的你有所帮助！