>只关闭正在查看的页面所需的CSS. (因为太多的CSS规则导致渲染速度慢)
>始终缩小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文件都有不同的文件名,因此是一个单独的文件,即使它们中的一些包含相同的内容.
那么我们应该打破哪条规则呢？
我要横渡的那个是：
我认为将我的网站的所有CSS缩小/组合起来更加简单和实用,并且可以一次性完成.
至于这可能造成的性能问题,我认为它们会因以下事实而减少：
>现代浏览器在处理CSS规则方面变得越来越快,所以如果你在内存中有很多未被使用的规则,那么很快就会无所谓.
>当你用户浏览需要这些规则的页面时,将所有CSS缓存的速度提高的速度远远超过你从中遗漏不必要的规则所获得的任何改进,这些规则将被加载.
我在这儿吗？
解决方法
您的解决方案必须与您的客户进行基准测试.
但是,只要我可能,我可能只会坚持一个css文件.如果您的网站长到如此奢侈的大小,您需要两个不同的文件尝试在两个截然不同的网站部分site_general和logged_in中使用它们.
不过,有些事情可能对你有所帮助：
>用YUI Compressor压缩css(给我最好的结果)
>拥有apache(或其他)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示例deflating is smaller than gzipping正如Jeff在他的博客上为我们所做的那样.
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>
希望能帮助到你！
