页面优化的一些分享

最近开发即时比分(足彩比赛直播)的项目，这个项目对数据的及时性要求比较高，周末(周末球赛比较多)数据量比较大，因为产品设计的限制，页面不允许分页。这样一来，在完工后的第一个周末，问题就出来了，页面，连往下滚动都很卡，不到5分钟，IE就不响应了，还有根据联赛过滤比赛(比如只选择‘意甲’、‘欧冠’的比赛、反选，全选等等)，页面卡到提示js会影响页面响应，是否终止js的运行，看到这些，好是尴尬。如下图所示：

接下来的时间就是一直在琢磨着优化。先简单介绍下页面实现，开始只是想到页面赛事多，页面赛事列表都用freemaker静态化了，定时更新静态化的页面就好，为了方便加载后业务上的操作，除了tr上的id，还加了很多css选择器，比如根据状态的、联赛的、时间的等等，最后我查看了下生成的静态页面，发现周六的比赛能有3、4M，我的亲，网速不给力的兄弟，下载这个页面就得很久吧，悲剧啊，焦虑啊，不解决，哥寝食难安啊。

   

    优化的入口就是js定时请求timer，最笨的办法，排除法，一个一个的注释掉，看那个耗CPU。最后得出结论，单纯的数学计算，是不占用多少cpu的，占cpu比较多的是对文档的操作，比如用class选择器选择节点，改变节点等。

 

    比如所有赛事频道，进行中的比赛分为上半场的和下半场的，这两个状态的比赛会发起服务器请求，请求的数据是服务器时间、赛事改变；服务器时间是为了计算本地时间差，最后得到当前比赛的进度,在比赛状态旁边会有一个进度条显示当前比赛进行到的时间，比如32'，赛事改变是一个对象，用来及时变化比赛情况，比如进球(进球还会调用一个函数，如果用户有在功能设置里设置进球有弹层提示、声音提示，那么网站还会弹出提示层，并播放用户设置好的提示音)、红黄牌、状态变化(未开赛变为上半场等)。

 

    这里优化的内容仅仅是把分钟数后的那个闪闪的图片直接放在ftl末班文件里生成了，需要的时候打开他的显示属性。这个优化了，还是不行，那么开始瘦身，琢磨提高选择的性能。第一想法就是删除css选择器，但是删掉了，我怎么选择呢。

 

    这个问题的解决找到突破点了，生成数据的时候，我在文档的末尾生成一个二维数组，每个数组的元素就对应这一个比赛对象的属性(数组),如var A = Array(10);A[0] = ['a','b',......];这样，我只要tr的id能取到数组A[i]的第0个值，我就能取到所有的属性值，状态、联赛等等都能，这样，css选择器就可以在页面全部去掉，这样，文档除了多加了一个ID，其他的几乎不加东西，而且迭代数组别css选择器迭代文档速度快多了，消耗cpu小多了，这样，页面就瘦身很多了。附之去掉比赛进度的行，改成动态的生成(展开的时候生成一行，关闭的时候remove这行),如下图：

同样的思路，显示隐藏层也动态添加删除，不在静态化，这样页面就不在卡了，滚动都卡，确实好难为情啊。

附显示隐藏层的截图：

     这样优化就完了，总结下，两点，一、文档不要太大，尽量少在timer中改变文档结构(包括加一个图片，只做修改节点值或style没关系)；二、尽量少使用css 选择器，特别是大文档，效率相当低，在IE下几乎不可忍受。这次是领教了css选择器的效率了，我们在以后的页面开发中，尽量多利用节点之间的关系去选择节点对象，少用css去选择，比如，td中有span，span中有多选按钮，你选中了多选按钮，需要对tr或者td进行操作，完全可以用parent().parent()去选择，操作当前tr 的下一行的显示隐藏属性，可以再加个next()等等。就这么多了，一点优化心得，欢迎大家补充修正。