最佳实践 - 只需下载您需要的CSS，或使用缩小过程？

Question

在提高整体网站性能（下载和渲染速度）的情况下似乎有以下两个最佳实践之间的矛盾：

1. 只有打倒你需要的页面之中的CSS查看。 （因为太多的CSS规则会导致慢渲染）

2. 始终缩小CSS和它合并成一个文件。 （因为更多的请求意味着较慢页面加载）

现在说我决定遵循规则1.

以下问题上来：

如果2页共用1套的CSS规则？

在这种情况下，我需要把这些规则在一个单独的文件和参考来自两个页面文件。

但是，如果我开始有很多这样的“共享规则”，我可能最终会从每个页面引用了很多单独的文件，因此，打破规则2.

例如，网页A可能取决于CSS 1和2，而页面B和C都依赖于CSS 2，页面D取决于CSS 1.

在这种情况下，不可能每个页面只有一个CSS，甚至不能有多个CSS，因为有些页面需要与其他页面共享一些CSS文件。

但是我们不能解决结合所有的CSS的每一页到一个单独的每个页面的CSS文件这个问题？

我们可以，但是这会带来其他问题。

如果两个网页共享CSS的一个片段，即使我们压缩了地狱的话，我们还是会反复下载的片段，每次我们请求一个页面谁的CSS时间包含片段。

由于我们已将页面中的CSS 压缩，所以我们允许在CSS片段被两个或多个页面共享的情况下发生冗余。

浏览器缓存确实没有我们这里好，因为在浏览器中，每个CSS文件有不同的文件名，因此是一个独立的文件，即使他们中的一些包含内容是一样的。

那么我们应该打破哪条规则？

我划掉的一个是：

1.您应该只打倒你需要的网页正在查看的CSS。

我认为这是多简单，更实用来缩小/组合地狱所有的CSS为我的网站，并把它倒在一个去。

至于性能问题，这可能会创造，我认为它们是由以下事实削弱：

• 现代浏览器越来越善于处理CSS规则比较快，所以很快就没有问题，如果你在内存中有很多规则没有被使用。

• 拥有所有你的CSS缓存将提高速度比你从留出不必要的规则，这会得到任何改善多了很多获得加载反正，当用户浏览到需要这些规则的网页。

我就在这里吗？

Answer 1

1.你应该用gzip

alt text http://shup.com/Shup/376348/1106472221-My-Desktop.png

http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method

http://paulstamatiou.com/how-to-optimize-your-css-even-more

对于asp.net

http://web2asp.net/2009/01/introduction-one-of-big-complaints.html

编辑：

2.与编写CSS选择器有效

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

https://developer.mozilla.org/en/Writing_Efficient_CSS

3.并结合

http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html

RewriteEngine On 
RewriteBase/
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1 
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1 

4.回答这个问题CSS Performance issues

---

我不喜欢有多个CSS文件每一页的阅读建议。 4-5个css文件就足够了。

1. Common.css (with reset and common layout and typography and Form styling) 
2. pagespecific.css (css of home and other landing pages) 
3. print.css 
<---- ie only css --- > 
4. ie6.css 
5. ie7.css 
<--- > 

并且从CSS剥离空白将会使得通过FTP进行编辑更加困难。

这里是一个CSS或多个CSS的好文章 http://css-tricks.com/unique-pages-unique-css-files/

Answer 2

总是有取舍。如果你发现自己制作了很多CSS文件，并且存在太多的依赖关系，以便跟踪哪个CSS文件变得困难，那么最好制作一个（或最多两个）CSS文件并缩小它们。希望你的CSS文件不会太疯狂。

Answer 3

这是一个非常好的观点Mr.Jonathaxxx ..

是的，我同意你的看法，两个点，你把以上是重要的一点。我的一个关于你的第一点意见是..

1. 您只能打倒你需要的是 查看页面的CSS。 （因为太多的CSS规则 会降低渲染速度）。

我想我们也可以做到这一点。

在Web应用程序中，我们将拥有适用于所有应用程序视图的通用框架。我们可以说它是母版页。我们所有不同的页面/视图都采用它。所以所有页面之间都有一个共同的外观和感觉。在那种情况下，为什么我们不能为此制作一张样式表。所以它可以在所有页面/视图之间共享。这可以是一个布局文件。

这是一个CSS文件。

接下来，我们可以在页面中为控件生成另一个CSS，或者我们也可以在布局CSS文件中链接控件的样式。

在任何风格之后，可以得到不同的网页，我们可以为他们有不同的文件。这不会增加单个页面的CSS文件数量。最多一页将得到2或3个完全相关的样式表。

[编辑]

默认CSS文件将被永远缓存，将所有页面的应用程序/视图中使用。

Answer 4

像往常一样，这两种情况都是有效的。

你的解决方案必须与基准你的costumers。

但我可能会坚持只有一个CSS文件，只要我可能可以。并且，如果您的网站发展到如此奢侈的尺寸，那么您需要两个不同的文件尝试在两个截然不同的网站部分site_general和logged_in中使用它们。

然而，有些东西可以帮助你：

• 压缩CSS与YUI Compressor（给我的最好的结果）
• 有阿帕奇（或其他）deflate你的CSS文件
• ，最重要的全部，确保文件被用户缓存！

保持清洁CSS

有一件事你可能会发现在网站上有一些发展运行后有用的是Dust-Me Selectors覆盖您的网站未使用选择Firefox扩展。

使用选择明智（渲染速度！）

大概都选择发动机从右到左进行.parent div.myclass比div.parent .myclass更快。当写你的CSS记住这一点。还要记住ID的＃比类更快。除此之外，通常情况下，避免使用通用选择器，不要将鼠标悬停在非链接元素上，... Google has a great article就可以了。

在此运行之上Firefox's Extension - Page Speed它给你一个非常详细的慢速选择器和更多的信息。

Apache的通货紧缩时期例deflating is smaller than gzipping杰夫非常和善把我们在他的博客。

LoadModule deflate_module modules/mod_deflate.so 
<FilesMatch "\.(js|css|html|htm|php|xml)$"> 
    SetOutputFilter DEFLATE 
</FilesMatch> 

Apache的缓存实例

# Set up caching on media files for 1 month as recommended by page speed 
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$"> 
    ExpiresDefault A2629744 
    Header append Cache-Control "public, proxy-revalidate" 
    Header append Vary "Accept-Encoding: *" 
</FilesMatch> 

希望它能帮助！