快速业务通道

网页CSS背景图片使用的测试结果

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-04
解。运用样式表之后,果真精简了许多,每个节点的生成也够快,但我发现,当我的树节点量达到,比如说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稍微要快些。

  通过上面的这些现象我得出这么一个结论:样式表在动态渲染的时候效率并不高;在父容器发现状态变化的时候会引起它的所以子孙对象

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号