网页CSS背景图片使用的测试结果_CSS教程_CSS_网页制作_

　　这篇文章主要讲了CSS对背景图片渲染效率的一些经验和研究，在jb51.net中，还有着类似CSS效率的相关文章。
　　树型结构竖线用样式表（背景图）来实现，样式表背景图片只需要加载一次，而现在这个模式（用多个）图片虽然有缓存机制，但还是有可以每张小图片都请求一次服务器的，所以我想用样式表来实现有多么的好呀，代码又精简，结构又清晰，效果又酷，但是结果我将近一个星期的测试，我这种设想彻底失败，原因就是样式表的渲染效率太差。新的构想没能实现，心情有些沮丧，但我想也应该让大家分享一下这个测试成果。
　　这里我再解释一下树型里的竖线，树的左边都有 ┌ ├ └ │ 这些竖线图表示树层次，我的1.0版里是用一张张的小图片堆积起来的，而这种使用样式表的是用 （l是字母L）这种代码来实现的，样式表负责填充背景图。
#www_jb51_com .l0{background:url(line0.gif) no-repeat center}
#www_jb51_com .l1{background:url(line1.gif) no-repeat center}
#www_jb51_com .l2{background:url(line2.gif) no-repeat center}
#www_jb51_com .l3{background:url(line3.gif) no-repeat center}
#www_jb51_com .l4{background:url(line4.gif) no-repeat center}
#www_jb51_com .ll{background:url(line5.gif) no-repeat center}
#www_jb51_com .pm0{background:url(plus0.gif) no-repeat center}
#www_jb51_com .pm1{background:url(plus1.gif) no-repeat center}
#www_jb51_com .pm2{background:url(plus2.gif) no-repeat center}
#www_jb51_com .pm3{background:url(plus3.gif) no-repeat center}
#www_jb51_com .expand .pm0{background:url(minus0.gif) no-repeat center}
#www_jb51_com .expand .pm1{background:url(minus1.gif) no-repeat center}
#www_jb51_com .expand .pm2{background:url(minus2.gif) no-repeat center}
#www_jb51_com .expand .pm3{background:url(minus3.gif) no-repeat center}
　　上面这段CSS是我在脚本里动态生成的一段样式的片段，我把它贴上来，有助于后面的讲解。运用样式表之后，果真精简了许多，每个节点的生成也够快，但我发现，当我的树节点量达到，比如说300-500个节点之后，节点生成的效率没有影响什么，但每个节点的展开/收缩很慢很慢，需要几秒钟以上甚至10秒，且这个期间的CPU占用率是100％。说明一下，树型的展开/收缩是设置父节点的 style.display = none|block 来实现的。我的电脑配置是：AMD2800 1GDDR400内存，配置不太差的。
　　我首先的反应是：是不是用了太多的影响了效率？因为我每一个节点都用了一个，但是我把换成了