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

时间:2021-03-29 16:12:34

I'm wondering if it's better to make one or several files for CSS files ?

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

I always see websites with a plenty of css files, but it seems better to use only one large file.

我总是看到有大量css文件的网站,但最好只使用一个大文件。

What's your advice ?

你的建议是什么?

12 个解决方案

#1


24  

Performance wise, you are better off with a single file, as it results in one connection and request to the server (these tend to be expensive operations, time wise).

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

This is why minifying frameworks exist, that merge together all the CSS (and JavaScript) files for each page and serve them in one request.

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

#2


6  

My strategy on this is simple. I separate production from development, both in CSS files and in JS files. in development, I can have up to 20 JS files and 10 CSS files, organization is super slick and easy, I always know where everything is.

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

In production, all files are minified into 1js and 1css file, changes are always made in development and then "staged" to production so I gain the maintainability of the application and the performance in production.

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

I use Yahoo minifier to minify my files but you can use whatever is convenient for you.

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

Good luck

祝你好运

#3


3  

Having one CSS file doesn't just help with HTTP requests, it will also give you better compression (compressing one big file should give you better results than compressing multiple smaller files).

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

#4


2  

Different HTTP requests are hardly the bottleneck here, file size ultimately is. The reason it's best to split things up as much as possible is because if you want to change a certain thing of your site's feel, let's say, the font of all headers, you want to change one file / setting only for that, and want that file to be as small as possible.

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

For large and encompasing CSS, I would make different CSS documents for all different things like the layout, the treatment of classes, and so on, another advantage is that if you've multiple pages that need a slightly different look from the main page, they only have to link to one other CSS file, not to a completely different one, the majority they an share.

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

#5


2  

Use not too much different css files or at least try to put them on other domains to speed up downloading them by the browser. I also suggest you use a minification tool.

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

Grz, Kris.

格兹,克里斯。

#6


2  

If performance does matters to you

如果表现对你很重要

Then

然后

If your site is small but gets huge traffic then go for one css file

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

if site is small personal or business sites then but with less traffic then go to multiple css

如果网站是个人或商业网站,但流量较少,那么去多个CSS


If CSS files maintainability does matters to you

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

Then

然后

If your site is small with less different pages then go for one css file.

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

if site is big then go for multiple css http://www.killersites.com/blog/2008/how-to-organize-css/

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


HTTP request of CSS files will not make big difference in performance of small site.

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

#7


1  

Well, the same as Yahoo!'s: Use one to reduce the number of HTTP requests.

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

#8


1  

For the quickest download and rendering of a page, the Yahoo performance rules are correct. You want as few http requests as possible.

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

However, on many sites, it's simply not convenient to have a single large CSS files. Your best bet is to organize your CSS into as many files as you'd like, and then use a server side script to concatenate the files. GZIP'ing that file goes a long way, too.

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

#9


1  

you should use more than one css file rather using one big file. It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.

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

But for performance reasone you can use one large file because, One large CSS file leads to fewer HTTP requests, which can improve performance.

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

Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.

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

#10


0  

Multiple files are good for organization, but one request to the server is definitely best. If you watch the performance videos from Google they suggest the least amount of HTTP requests possible. Each HTTP request has overhead in the handshake that you do not want to incur if you wish your site to be fast.

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

Check out this great script which will take your multiple CSS/JS files and turn them into one file:

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

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

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

#11


0  

Proper way to use multiple stylesheets...so it WORKS?

使用多个样式表的正确方法......所以它有效吗?

#12


0  

Weigh it up.

称重它。

The advantages of one CSS file

一个CSS文件的优点

  • Reduced latency. Each downloadable component comes with a small amount of latency. Less files => less latency
  • 减少延迟。每个可下载组件都有少量延迟。减少文件数量=>减少延迟
  • Single point of compression
  • 单点压缩

Advantages of multiple

多重的优点

  • Change one file won't require all css to be re-downloaded. The other css can be served from the cache
  • 更改一个文件不需要重新下载所有css。另一个css可以从缓存中提供
  • Structure
  • 结构体
  • Only download what you need. If you don't have any forms on your page for example you don't need to download forms.css
  • 只下载你需要的东西。例如,如果您的页面上没有任何表单,则无需下载forms.css

#1


24  

Performance wise, you are better off with a single file, as it results in one connection and request to the server (these tend to be expensive operations, time wise).

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

This is why minifying frameworks exist, that merge together all the CSS (and JavaScript) files for each page and serve them in one request.

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

#2


6  

My strategy on this is simple. I separate production from development, both in CSS files and in JS files. in development, I can have up to 20 JS files and 10 CSS files, organization is super slick and easy, I always know where everything is.

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

In production, all files are minified into 1js and 1css file, changes are always made in development and then "staged" to production so I gain the maintainability of the application and the performance in production.

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

I use Yahoo minifier to minify my files but you can use whatever is convenient for you.

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

Good luck

祝你好运

#3


3  

Having one CSS file doesn't just help with HTTP requests, it will also give you better compression (compressing one big file should give you better results than compressing multiple smaller files).

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

#4


2  

Different HTTP requests are hardly the bottleneck here, file size ultimately is. The reason it's best to split things up as much as possible is because if you want to change a certain thing of your site's feel, let's say, the font of all headers, you want to change one file / setting only for that, and want that file to be as small as possible.

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

For large and encompasing CSS, I would make different CSS documents for all different things like the layout, the treatment of classes, and so on, another advantage is that if you've multiple pages that need a slightly different look from the main page, they only have to link to one other CSS file, not to a completely different one, the majority they an share.

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

#5


2  

Use not too much different css files or at least try to put them on other domains to speed up downloading them by the browser. I also suggest you use a minification tool.

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

Grz, Kris.

格兹,克里斯。

#6


2  

If performance does matters to you

如果表现对你很重要

Then

然后

If your site is small but gets huge traffic then go for one css file

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

if site is small personal or business sites then but with less traffic then go to multiple css

如果网站是个人或商业网站,但流量较少,那么去多个CSS


If CSS files maintainability does matters to you

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

Then

然后

If your site is small with less different pages then go for one css file.

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

if site is big then go for multiple css http://www.killersites.com/blog/2008/how-to-organize-css/

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


HTTP request of CSS files will not make big difference in performance of small site.

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

#7


1  

Well, the same as Yahoo!'s: Use one to reduce the number of HTTP requests.

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

#8


1  

For the quickest download and rendering of a page, the Yahoo performance rules are correct. You want as few http requests as possible.

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

However, on many sites, it's simply not convenient to have a single large CSS files. Your best bet is to organize your CSS into as many files as you'd like, and then use a server side script to concatenate the files. GZIP'ing that file goes a long way, too.

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

#9


1  

you should use more than one css file rather using one big file. It helps you while maintaining your site also use different definitions (classe or id names) in different css otherwise it will take the one which declared later.

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

But for performance reasone you can use one large file because, One large CSS file leads to fewer HTTP requests, which can improve performance.

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

Several smaller files leads to easier organization which will make development and maintenance cheaper and easier.

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

#10


0  

Multiple files are good for organization, but one request to the server is definitely best. If you watch the performance videos from Google they suggest the least amount of HTTP requests possible. Each HTTP request has overhead in the handshake that you do not want to incur if you wish your site to be fast.

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

Check out this great script which will take your multiple CSS/JS files and turn them into one file:

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

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

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

#11


0  

Proper way to use multiple stylesheets...so it WORKS?

使用多个样式表的正确方法......所以它有效吗?

#12


0  

Weigh it up.

称重它。

The advantages of one CSS file

一个CSS文件的优点

  • Reduced latency. Each downloadable component comes with a small amount of latency. Less files => less latency
  • 减少延迟。每个可下载组件都有少量延迟。减少文件数量=>减少延迟
  • Single point of compression
  • 单点压缩

Advantages of multiple

多重的优点

  • Change one file won't require all css to be re-downloaded. The other css can be served from the cache
  • 更改一个文件不需要重新下载所有css。另一个css可以从缓存中提供
  • Structure
  • 结构体
  • Only download what you need. If you don't have any forms on your page for example you don't need to download forms.css
  • 只下载你需要的东西。例如,如果您的页面上没有任何表单,则无需下载forms.css