为了提高性能,请使用一个或多个css文件?

时间:2010-06-27 18:58:51

标签: css performance

我想知道为CSS文件创建一个或多个文件是否更好?

我总是看到网站上有大量的css文件,但seems better只能使用一个大文件。

你有什么建议?

12 个答案:

答案 0 :(得分:24)

性能方面,你最好使用单个文件,因为它会导致一个连接和对服务器的请求(这些操作往往是昂贵的,时间紧迫)。

这就是minifying框架存在的原因,它将每个页面的所有CSS(和JavaScript)文件合并在一起,并在一个请求中提供它们。

答案 1 :(得分:6)

我的策略很简单。 我将生产与开发分开,包括CSS文件和JS文件。 在开发中,我可以拥有多达20个JS文件和10个CSS文件,组织非常灵活,我总是知道一切都在哪里。

在生产中,所有文件都缩小为1js和1css文件,在开发过程中总是进行更改,然后“暂存”到生产中,这样我就可以获得应用程序的可维护性和生产中的性能。

我使用Yahoo minifier缩小文件,但你可以使用任何方便的东西。

祝你好运

答案 2 :(得分:3)

拥有一个CSS文件不仅有助于HTTP请求,它还可以为您提供更好的压缩(压缩一个大文件应该比压缩多个较小的文件提供更好的结果)。

答案 3 :(得分:2)

不同的HTTP请求几乎不是瓶颈,文件大小最终是。最好尽可能地分解的原因是因为如果你想改变网站的某些感觉,比方说,所有标题的字体,你只想更改一个文件/设置,并且想要该文件尽可能小。

对于大型和包含CSS,我会针对所有不同的东西制作不同的CSS文档,例如布局,类的处理等等,另一个优点是,如果你有多个页面需要与主页面,他们只需链接到另一个CSS文件,而不是一个完全不同的文件,大多数是他们共享。

答案 4 :(得分:2)

不要使用太多不同的css文件,或者至少尝试将它们放在其他域上以加快浏览器下载它们的速度。我还建议您使用minification tool

Grz,Kris。

答案 5 :(得分:2)

如果效果对您很重要

然后

如果您的网站很小但流量很大,那就选择一个css文件

如果网站是个人或商业网站,但流量较少,那么请转到多个css


如果CSS文件的可维护性对您很重要

然后

如果您的网站很小,页面不同,那么请选择一个css文件。

如果网站很大,那就选择多个css http://www.killersites.com/blog/2008/how-to-organize-css/


CSS文件的HTTP请求不会对小网站的性能产生很大影响。

答案 6 :(得分:1)

嗯,和雅虎一样:用一个来减少HTTP请求的数量。

答案 7 :(得分:1)

为了最快速地下载和呈现页面,Yahoo性能规则是正确的。您希望尽可能少的http请求。

然而,在许多网站上,拥有一个大型CSS文件根本不方便。最好的办法是将CSS组织成任意数量的文件,然后使用服务器端脚本来连接文件。 GZIP这个文件也有很长的路要走。

答案 8 :(得分:1)

你应该使用多个css文件,而不是使用一个大文件。它可以帮助您在维护您的站点时在不同的css中使用不同的定义(classe或id名称),否则它将采用稍后声明的那个。

但是为了获得性能,你可以使用一个大文件,因为, 一个大的CSS文件可以减少HTTP请求,从而提高性能。

几个较小的文件使组织更容易,这将使开发和维护更便宜,更容易。

答案 9 :(得分:0)

多个文件适合组织,但对服务器的一个请求绝对是最好的。如果您观看来自Google的效果视频,他们会建议尽可能少的HTTP请求。如果您希望自己的网站速度很快,那么每个HTTP请求都会在握手中产生开销,而您不希望这样做。

查看这个很棒的脚本,它会将你的多个CSS / JS文件转换成一个文件:

http://code.google.com/p/minify/

答案 10 :(得分:0)

答案 11 :(得分:0)

称量它。

一个CSS文件的优点

  • 减少延迟。每个可下载组件都有少量延迟。少文件=>减少延迟
  • 单点压缩

多重

的优点
  • 更改一个文件不需要重新下载所有css。另一个css可以从缓存中提供
  • 结构
  • 只下载您需要的内容。例如,如果您的页面上没有任何表单,则无需下载forms.css