10个可以减少CSS系统资源占用的技巧

网络整理 - 07-27

下面10条技巧，掌握后可适当的减少系统资源的占用。

1）0 像素边框。很多时候，当我们写样式，无边框都喜欢用 border:0; 来实现，但或许您并不知道，border:0; 只是定义边框宽度为零，而边框样式、颜色还是会被浏览器所解析，有解析势必占用资源，这是我们需要回避的。所以，当下回你再打算定义无边框时，建议你选择使用 border:none; 来实现。

2）* 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管正在用的还是不用的，过时的还是先进的，都一视同仁。这样，也是大大滴占用资源哦。要有选择地初始化标签，慎重使用 * 通配符。

3）当需要使用图片来平铺背景时，这个背景图片并非越小越好。这正是为什么许多人都不用 1px 的原因。算一下吧！宽*高=1px*1px 的图片，平铺出一个宽*高=200px*200px 的区域，需要 200*200=40,000 次，如此能不占用资源吗？更何况一个页面宽*高的尺寸岂止只有 200px*200px ？算起来很惊人哦。

4）十六进制颜色代码的写法。对于这个，不少同学都习惯了缩写或小写。但你有所不知的是，缩写或小写其实并非推荐的写法。缩写或小写虽然为的是减少解析所占用的资源，但同时它们也会增加文件体积。孰优孰劣，尚有待进一步考证。

5）样式内嵌，放置位置不妥。内嵌样式是不明智的，尽管目前很多超级门户站都喜欢内嵌，但你的站毕竟不是超级门户，所以还是规矩一点儿吧，用外链的形式调用。另外，样式调用最好出现在脚本顶部（即通常所说的HEAD区），别特立独行玩个性哦！要是脚本在上，样式在下，有什么负作用呢？自己想吧！

6）尽量使用 PNG 。PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。我知道你会说，IE6 对 PNG 的透明效果支持不好，可是，现在 IE6 不是快被无视了吗？目光要朝前看。

7）不要用 CSS 表达式；使用引用样式表，坚决不要通过 @import 导入。CSS 表达式有啥不好？这估计得内行的人才知道。浅显点儿说吧，下面给出的是一个用 CSS 表达式设置背景颜色的例子——

background-color:#B8D4FF; //传统的静态设置方式
background-color:expression((new Date()) . getHours % 2 ? "#B8D4FF" : "#F08A00"); //CSS表达式将背景颜色设置为每小时变化一次

可以看到，所谓的CSS表达式，就是在 expression 方法中接受一个 JavaScript 表达式。CSS 属性将被设置为对表达式求值的结果。而表达式的问题就在于对其进行的求值频率比人们期望的要高。它们不止在页面呈现和大小改变时求值，甚至当页面滚动，用户鼠标在页面上移过都要求值。统计显示，正常的用户浏览页面的操作一分钟内可让求值次数达到一百万次之多。2G 内存的电脑，在使用了 CSS 表达式的页面上移动鼠标（还没移动到超链接上去）就可以让 CPU 使用从 0% 上升到 35% 。而正常的页面，就算达到我 APM 的极限，在超链接和非超链接之间移动鼠标，也只能让 CPU 使用上升至 30% 。而若是没有超链接，则相应的值是 5% 。

但是有时候，就是得有样式动态变化（基于用户的操作）的需要。那我们可以利用一次性表达式或事件处理器来实现。比如——

这就是一次性表达式了，其实从程序语言的角度思考，我倒真不明白这样与 CSS 表达式有何区别，但是浏览器就把它们区别对待了，效果也确实起到了：表达式求值只会在页面加载时进行。

另外，还可以用 JavaScript 的事件处理器来设定根据事件改变样式，这样就只有用户激活相应事件后才会触发处理器。

至于 @import 导入样式的弊端是什么？这么说吧，在一个样式文件中使用 @import 会增加页面的总体加载时间，会引起文件的下载顺序被改变，从而导致样式文件需要花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。

8）别在 HTML 中缩放图片。一来不好看，二来占资源。

9）正文字号最好用偶数定义，12px、14px、16px……效果非常好。特例，15px。中文标点统一用全角。英文夹杂在中文中，左右空格，统一半角。中文字体的粗体和斜体，尽量少用。

10）block、ul、ol 等上下最好留出至少一倍行距，左侧至少两倍行距，右侧随意。段落之间，至少要有一倍行距。强行指定某些元素的 line-height 时，正文 1.6 倍于文字大小，标题 1.3 倍。