低一度

顶部横幅

10个CSS常识减少系统资源占用

2010-10-28 - diyidu - css应用 - Views

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

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

<style>
p {
background-color:expression(altBgcolor(this));
}
</style>
<script type = "text/javascript">
function altBgcolor(elem) {
elem.style.background-color = (new Date()).getHours() % 2 ? "#F08A00" : "B8D4FF";
}
</script>

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

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

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

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

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

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

关键词 // css教程 css 系统资源 网页设计
出处：低一度，链接：http://www.diyidu.cn/post/10css_skills.html

上一篇：如何将PageCookery的内容调用到WP 下一篇：Z-blog深蓝色调主题“sl_dyd”发布

随机推荐

to "10个CSS常识减少系统资源占用"

  • 111golf
    #1 111golf 回复该留言 2010-10-28 9:20:55
    以前学过网页设计，但从没认真去思考过这些问题，对于网站打开速度我很是老火，桶哥可以看看为什么我的网站 www.111golf.com 打开速度那么慢吗？我用的是ecshop程序，而且我发现百度不收录我网站的商品详情页，请桶哥指点方法。
    桶哥 于 2010-10-28 9:29:12 回复
    恩，你的页面加载速度还是不错的，慢是因为图片太多，这也是没办法的事。至于内页不收录，我建议你写个Robots文件强调下，另外，描述、关键词、标题等都不太合理，也需要优化。
    seo工具 于 2010-10-28 15:16:26 回复
    桶哥，现在我把主机搬到国内了，写个Robots文件强调下是强调什么？我已经禁止搜索引擎收录很多无用的页面了！
  • 晓潘博客
    #2 晓潘博客 回复该留言 2010-10-28 9:56:00
    嘿嘿，不错哦！这些资料太有用处了。我决定转载，嘿嘿嘿。
    桶哥 于 2010-10-28 9:57:15 回复
    汗！要先等我收录哦。
    seo工具 于 2010-10-28 15:15:17 回复
    我又忘记了，好像我刚才也转载了，不好意思！
    桶哥 于 2010-10-28 16:04:14 回复
    你个王八蛋，每次都背后阴我！原文出处加了吗？
    seo工具 于 2010-10-29 23:38:31 回复
    你个王八蛋，每次都背后阴我！原文出处加了吗？什么意思，我没有加出处吗？我没有写明文章来源于低一度吗？只是我文章后自动加了我本文的链接好不好？不明白就乱说，而且我转到百度空间是在29号，你的文章是在28号上午加的，而且在百度空间我文章加的时候也写了来源于低一度，就是没有加你本文的链接罢了！我承认我转载你的文章，但你这样说我，我受不了，不管怎么说你在业界也是这么有名的！是我不对，转载了你的文章，但我转载时也没有多想，也没有在百度看你的文章有没有收录再转载！就算我有错，你说我两句就行，何必这么骂人？
    seo工具 于 2010-10-29 23:42:53 回复
    我尊重你是我前辈，我也很喜欢你的文章与作品，我以后一定注意就是了，但你作为业界这么有名的人，我觉得你这样子骂人我受不了！而且我也发誓再也不转载你的文章了，请收回你的话语！自己仔细看清楚我有没有过加你文章的链接，如果不信你去看百度或者谷歌快照！伤心，一个自己尊重的人说出这样的话！我从没有打算阴任何人！自己有点儿激动！
    桶哥 于 2010-10-30 0:31:43 回复
    请你看仔细才对，我说你没加的是“原文出处”。你加了吗？要知道，对于一篇文章而言，原文链接才是最重要的，你加个出自低一度，对我真没什么用。
    seo工具 于 2010-10-30 10:19:44 回复
    哦，但我加来源于低一度加的是锚文本链接呀，原来加原文出处才最重要，学习了！
  • tuzibaobei
    #9 tuzibaobei 回复该留言 2010-10-28 19:19:32
    桶哥，还记得兔子吗？我想分享一下你制作的CMS zblog模版，可以吗？谢谢。
  • 广州SEO
    #11 广州SEO 回复该留言 2010-10-28 22:12:00
    我的博客打开速度感觉有点儿慢，桶哥帮我检查下看可以修改哪些地方能够加快打开速度？
  • jieetong
    #12 jieetong 回复该留言 2010-10-29 9:25:02
    别在HTML中缩放图片，这点不赞同哦。因为很多地方必须放，不过还是学习到不少加速网页加载的知识！
  • 林钦
    #14 林钦 回复该留言 2010-10-29 17:00:48
    桶哥，谢谢分享。一直想学div+css的。只是老是很懒，拖来拖去都还是没入门。主要工作上也没有用到。想问下系统地学习大概需要多久。没有太多固定时间的。
    桶哥 于 2010-10-29 17:08:48 回复
    严格点说，是没有“DIV+CSS”这玩意儿的，应该叫“HTML+CSS”。学这个其实不难，如果你真有兴趣，一天挤一点时间Q我吧，我一天教你一点儿，积少成多。
    林钦 于 2010-11-1 16:28:26 回复
    很感谢桶哥这么热心帮助，怎么好意思打扰桶哥。我还是自己学习。有不懂的再来向桶哥请教吧。
  • 享客
    #19 享客 回复该留言 2010-10-31 15:11:06
    谢谢楼主分享，又学到东西了哈，以后会经常来踩踩的。
  • 听说
    #25 听说 回复该留言 2010-11-3 16:37:56
    背景图片那条，我感觉不是按你这样解释的吧，呵呵，我认为很多不用1px*1px，是因为那个重复起来也不能达到效果，因为很少有背景图片的基本单位是1px*1px的。
  • Mucid
    #26 Mucid 回复该留言 2010-11-3 18:35:11
    哇，原来boder：0也不行啊。哈哈，其他的还没怎么使用啊！这个就很有深度啦。
  • kurizi
    #28 kurizi 回复该留言 2010-11-4 18:35:14
    学习了，文章很棒，这些技巧一般被人忽略了，这样做就可以减少系统资源浪费。
  • Dawnson
    #32 Dawnson 回复该留言 2010-11-16 13:36:12
    我的CSS文件合并后我就是用@import导入的，真没必要首先导入主题的样式表文件？
  • NikeDunkSB
    #36 NikeDunkSB 回复该留言 2010-11-21 17:44:28
    归纳的很细致。呵呵。学到了不少知识。
    diyidu 于 2010-11-22 1:32:18 回复
    过奖。
  • 创意人
    #38 创意人 回复该留言 2011-1-5 17:36:09
    收益，不过ie6被无视了只是被搞网站的无视和鄙视了，但普通大众网民还是很多用的是ie6。

Add comment

验证码