WonderCSS

如何优化你的CSS样式表

电影功夫中的火云邪神说过:天下武功,唯快不破!在互联网界,及时带宽不断提速但我们仍在最求着“更快一些”的效果。对此,如果你想达到火云邪神那种速度境界还是看看这篇文章吧!

在网站的开发结束后我们的 HTML 和 CSS 页面都将成型,并实现了预定效果,但这并未结束工作,因为我们还要进行一个重要的收尾工作:网页优化。因为它能帮助你让你的网站更快。虽然会延长一些你的工作时间,但就算为用户节省了1秒的加载时间,但将所有浏览网站的IP加起来,每人1秒,日流量千人的话就是单击节省16分钟!很诱人吧。

对我们来说网站的优化大致分3部分,HTML代码和CSS样式表以及JS代码。今天我们先介绍CSS:

尽可能的合并CSS语句

之所以说是“尽可能”的合并CSS语句,是因为出于响应式布局的原因,我们很多情况要考虑到如果出现CSS重写,那么合并起来是否更高效。


page {
    background-color: #ccc;
    background-image: url(../images/body-bg.gif);
    background-repeat: no-repeat;
}
/* -- 合并 -- */
page {
    background: #ccc url(../images/body-bg.gif) no-repeat;
}

在此我们还有注意到在使用 CSS3 时,有些浏览器标注是否过时。比如圆角border-radius已经被各浏览器接纳统一而无需增加如 -webkit- 这样的浏览器内核标注了。及时的删掉无用语句会让CSS样式表更加轻盈!

压缩你的样式表

为了保持代码的可读性,最好的方法是在代码中添加注释和使用缩进,但这样只是对“人”而言,对于浏览器来说它不会在乎你的样式表有多么漂亮。因此在完成项目后发布到服务器时,我们需要对CSS样式表进行重新“格式化”。如将


hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin: 24px;
}
/* -- image -- */
img {
    border: 0;
}

去掉注释和缩进等无用字符,让浏览器解析更少的内容:


hr{background-color:#ccc;border:0;height:1px;margin:24px;}img{border:0;}

因此,通过自动化工具压缩你的CSS是非常有用的。这样做能够减小文件的大小,从而得到更快的下载、解析和执行。推荐一个 在线压缩 CSS 样式表工具类网站 CSS Minifier

合并多个css文件

对于样式的组织和维护,另一个好方法是将他们模块化。然而,这样每个CSS文件都需要出发一个HTTP请求(我们都知道,浏览器的并行下载数是有限的)。所以在发布的服务器前有必要合并你的CSS文件,文件数量的减少就会带来请求数量的减少和更快的页面加载速度。

使用 <link> 标签而不是 @import

两种方式可以引入一个外部的样式表:通过 <link> 标签:


<link rel="stylesheet" href="style.css" />

或者通过 @import 指令 (使用在一个外部样式表中或者页面内嵌的 <style> 标签中):


@import url('style.css');

当你在一个外部样式表中使用第二种方式时,浏览器无法通过并行下载的方式下载这个资源,这样就会导致其他资源的下载被阻塞。

By 于湛 发布于 2013.04.27 3,549 次浏览

如何优化你的CSS样式表》上有2条评论

  1. huakang

    在我们这行当做网站建设的美工,没几个能扣的这么细。

    回复
  2. Pingback引用通告: 如何优化你的HTML代码 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注