#www_webjx_com .l1{background:url(line1.gif) no-repeat center}
#www_webjx_com .l2{background:url(line2.gif) no-repeat center}
#www_webjx_com .l3{background:url(line3.gif) no-repeat center}
#www_webjx_com .l4{background:url(line4.gif) no-repeat center}
#www_webjx_com .ll{background:url(line5.gif) no-repeat center}
#www_webjx_com .pm0{background:url(plus0.gif) no-repeat center}
#www_webjx_com .pm1{background:url(plus1.gif) no-repeat center}
#www_webjx_com .pm2{background:url(plus2.gif) no-repeat center}
#www_webjx_com .pm3{background:url(plus3.gif) no-repeat center}
#www_webjx_com .expand .pm0{background:url(minus0.gif) no-repeat center}
#www_webjx_com .expand .pm1{background:url(minus1.gif) no-repeat center}
#www_webjx_com .expand .pm2{background:url(minus2.gif) no-repeat center}
#www_webjx_com .expand .pm3{background:url(minus3.gif) no-repeat center}
上面这段CSS是我在脚本里动态生成的一段样式的片段,我把它贴上来,有助于后面的讲解。运用样式表之后,果真精简了许多,每个节点的生成也够快,但我发现,当我的树节点量达到,比如说300-500个节点之后,节点生成的效率没有影响什么,但每个节点的展开/收缩很慢很慢,需要几秒钟以上甚至10秒,且这个期间的CPU占用率是100%。说明一下,树型的展开/收缩是设置父节点的 style.display = none|block 来实现的。我的电脑配置是:AMD2800+ 1GDDR400内存,配置不太差的。
我首先的反应是:是不是用了太多的table影响了效率?因为我每一个节点都用了一个table,但是我把table换成了div、span等,效率没有什么改善,说明这个CPU占用率100%的问题不是HTML标签的问题,那么剩下来的问题就是这里使用了样式表。
以一个500节点的量来说吧,1.0里左边大概要堆积2000个左右的小图片。这种情况在浏览器端设置本地不缓存的时候会存在很大的问题,要加载这些多的小图片需要消耗不少的时间和服务器资源,所以我才会有这种新的用样式表来解决的想法,现在换成样式表法,也就是大概有2000个地方需要用样式表来渲染出背景图。我测试了各种情况,再对比1.0版的代码得出的结论是:CPU的点用率如此之高,唯一的原因也就只有这种渲染的耗时了。验证也非常简单,我把上面的样式表的左边 #www_webjx_com 这部分去掉,也就是去掉样式表的依托关系,测试的结果发现效率改善了很多,但耗时依然是可观的,有3-5秒之多。
另外我换了不同的浏览器,测试的结果也不太一样,在IE里最为恶心,比如说我在某个节点有500子节点,我将它收起(CPU100%,等待3-5秒),也就是display="none",这时候若我去收起这个节点的父节点(这个节点没有其它的同级节点,即它的父节点只有它这么一个子节点),照理说只有一个节点,收起应该是即时的事,但结果不然,结果又是3-5秒的CPU100%,这个让我狂郁闷,也就是说即使HTML对象被display="none"隐藏掉了,但是对它的父级进行任何操作的时候,IE会对这些被隐藏的对象用样式表重新渲染一遍,真是搞不懂IE的开发者当初是怎么想的。
我又到FIREFOX里测试了一下,在收起的时候(display=none)是瞬间的,可以肯定,FF对待被隐藏的对象不会再消耗精力。当然展开的时候所有的浏览器都一样:3-5秒的CPU100%,不过FF稍微要快些。
通过上面的这些现象我得出这么一个结论:样式表在动态渲染的时候效率并不高;在父容器发现状态变化的时候会引起它的所以子孙对象的样式表重新渲染;FireFox 对待被display=none隐藏的对象不会重新渲染而IE会。
那么这种样式表的渲染效率问题以前为什么一直没有被发现呢?嘿嘿,大家做网页的时候难得会做到这种极端的时候,一个页面里有几千个需要样式表渲染背景图。通常也就几个地方或者几十个地方了,所以感觉不出来渲染的效率,也感觉不出这方面在不同的浏览器之间的差别。但是在做树这些的控件的时候必定会碰到各种极端的问题,比如大数据量的数组,生成的HTML对象的多少等等,象这种渲染的效率差别也只是我在写JS脚本时碰到的问题之一而已。今天我把这个测试结果共享出来是希望对大家以后写程序的时候有所借荐,在做设计的时候有所考虑。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)