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