书写高效的CSS – 漫谈CSS的渲染效率http://www.52css.com/article.asp?id=787

CSS对Web页面载入效率的影响http://www.52css.com/article.asp?id=751

树型结构竖线用样式表（背景图）来实现，样式表背景图片只需要加载一次，而现在这个模式（用多个<img>）图片虽然有缓存机制，但还是有可以每张小图片都请求一次服务器的，所以我想用样式表来实现有多么的好呀，代码又精简，结构又清晰，效果又酷，但是结果我将近一个星期的测试，我这种设想彻底失败，原因就是样式表的渲染效率太差。新的构想没能实现，心情有些沮丧，但我想也应该让大家分享一下这个测试成果。

这里我再解释一下树型里的竖线，树的左边都有 ┌ ├ └ │ 这些竖线图表示树层次，我的1.0版里是用一张张的小图片堆积起来的，而这种使用样式表的是用<div class=”l2″></div> （l是字母L）这种代码来实现的，样式表负责填充背景图。

上面这段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_52css_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脚本时碰到的问题之一而已。今天我把这个测试结果共享出来是希望对大家以后写程序的时候有所借荐，在做设计的时候有所考虑。

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。

清除容器浮动

#main {
overflow:hidden;
}

期前也提到过这样的问题，更多信息可以看这里。

不让链接折行

a {
white-space:nowrap;
}

上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。

始终让 Firefox 显示滚动条

html {
overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用

body, html {
min-height:101%;
}

使块元素水平居中

margin:0 auto;

其实就是

margin-left: auto;
margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用

body{
text-align: center;
}

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea {
overflow:auto;
}

Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。

设置打印分页

h2 {
page-break-before:always;
}

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus {
outline:none;
}

Firefox 默认会在链接获得焦点（或者点击时）加上条虚线框，使用上面的属性可以删除。

最简单的 CSS 重置

* {
margin: 0; padding: 0
}

如果想“复杂”，参考YUI 的做法（还有这里）。原文留言中也有用户说了他们的观点

I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means “traverse every css element and give it these
attributes”. That is a very unnecessary strain on the server and
a bad semantic practice, as you have to give some elements
padding/margin again, after stripping them.

SEO是指搜索引擎优化，主要就是通过对网站的结构、标签、排版等各方面的优化，使搜索引擎更容易抓取网站的内容，并且让网站的各个网页在等搜索引擎中获得较高的评分，从而获得较好的排名。DIVCSS网页布局对SEO有着积极而富有意义的影响。看以下几个方面：

一、精简网页代码

使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。

代码精简所带来的直接好处有两点：一是提高Spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处；二是由于能高效的爬行，就会受到Spider欢迎，这样对收录数量有很大好处。

二、解决表格的嵌套问题

很多“网站如何推广”的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎相关的官方证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，Spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。

使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，Spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

而DIVCSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。

这虽然没有得到确认，但还是建议使用Table布局的朋友们，在设计时尽可能的不要使用多层表格嵌套，SEOer们在文章中说明了这一点，相信他们也不是没有依据。

三、提高访问速度

DIVCSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在Spider爬行时是非常有利的。过多的页面代码可能造成爬行超时，Spider就会认为这个页面无法访问，影响收录及权重。

另一方面，真正的SEOer不只是为了追求收录、排名，快速的响应速度是提高用户体验度的基础，这对整个搜索引擎优化及营销都是非常有利的。

四、对搜索引擎的排名

基于XTHML标准的DIVCSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但从本人的观点来看，非常有益。

我想，这样的情况可能不是排名规则，最大的可能还是spider爬行网站时，出现以上差异导致收录质量的不同。

建议建站或改版的朋友们，技术许可的情况下，还是选择DIVCSS布局为好。