最佳做法 - 只下载您需要的CSS，或使用缩小过程？ [英] Best practices - Only download CSS you need, or use a minification process?

问题描述

在改善整体网站效能（下载和呈现速度）的上下文中，以下两个最佳做法之间似乎存在矛盾：

1. 只能删除正在查看的页面所需的CSS。 （因为太多的CSS规则导致渲染缓慢）




2. 始终缩小CSS并将其合并到一个文件中。 （因为更多请求意味着页面加载更慢）

现在说我决定遵守规则1。 b
$ b

出现以下问题：

如果2页共享一组CSS规则会怎么样？ / p>

在这种情况下，我需要将这些规则放在单独的文件中，并从两个页面引用该文件。

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

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

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

但是，我们不能通过将每个页面的所有CSS合并为单独的每页CSS文件来解决这个问题？

会产生其他问题。

如果两个页面共享一个CSS片段，即使我们压缩它的地狱，我们仍然要重复下载该片段，每次我们请求CSS中包含该片段的网页。

由于我们已按网页压缩CSS

浏览器缓存在这里没有好处，因为在浏览器中，每个CSS文件都有不同的文件名，而且因此是一个单独的文件，即使它们中的一些包含相同的内容。

那么哪条规则应该中断？

我要交叉的是：

1。您应该只删除正在查看的页面所需的CSS。

我认为这很简单，更实用

$

至于性能问题这可能会创建，我认为他们被以下事实减少：

• 现代浏览器在处理CSS规则时变得越来越快，




• 使用所有的CSS缓存可以提高速度当用户浏览需要这些规则的网页时，您可以省略不必要的规则，这些规则将会被 加载。

我在这里吗？

解决方案

b

但我可能坚持只有一个css文件，只要我可能。如果你的网站增长到这样一个奢侈的大小，你需要两个不同的文件尝试使用它们在两个非常不同的网站部分 site_general 和 logged_in

但是，有些事情可能会帮助你：

• 使用 YUI Compressor （给我最好的结果）压缩css


• 有apache（或其他） deflate 您的css文件


• ，最重要的是，确保该文件已缓存。

保持CSS清除

在网站上进行多次开发后， Dust-Me选择器 a

巧妙使用精选（渲染速度！ p>

可能所有的选择器引擎从右到左，使得 .parent div.myclass 比 .parent .myclass 。当写你的CSS记住这一点。还要记住，ID的＃比类快得多。除此之外，它是通常的，避免通用的选择器，不要悬停在非链接元素，...

Firefox的扩展程序 - 网页速度 ，可以为您提供有关慢速选择器的详细信息等等。

Apache放气示例 deflating小于gzipping ，因为Jeff在他的博客上给我们。 / p>

  LoadModule deflate_module modules / mod_deflate.so 
< FilesMatch\。（js | css | html | htm | PHP | xml）$> 
 SetOutputFilter DEFLATE 
< / FilesMatch> 
  

Apache缓存示例

 ＃根据页面速度推荐在媒体文件上设置缓存1个月
< FilesMatch\。（gif | jpg | jpeg | png | swf | js | css）$> 
 ExpiresDefault A2629744 
头附加缓存控制public，proxy-revalidate
头附加VaryAccept-Encoding：*
< / FilesMatch> 
  

希望它有帮助！

In the context of improving overall site performance (downloading and rendering speed) there appears to be a contradiction between the following two best practices:

1. Only bring down the CSS that you need for the page being viewed. (Because too many CSS rules cause slow rendering)

2. Always minify CSS and combine it into one file. (Because more requests means slower page load)

Now say I decide to follow rule 1.

The following issues come up:

What if 2 pages share 1 set of CSS rules?

In this case, I need to put those rules in a separate file and reference that file from both pages.

However, if I begin to have a lot of these "shared rules", I might end up referencing a lot of separate files from each page, and thus, breaking rule 2.

For example, page A might depend on CSS 1 and 2, while pages B and C both depend on CSS 2 and page D depends on CSS 1.

In this scenario, it's impossible to have exactly one CSS per page or even multiple CSS's per page, since some pages will need to share some CSS files with other pages.

But can't we solve this problem by combining all the CSS for each page into a separate per-page CSS file?

We could, but this would create other problems.

If two pages shared one fragment of CSS, even if we compress the hell out of it, we're still going to download that fragment repeatedly, every time we request a page who's CSS contains that fragment.

Because we've compressed the CSS by page, we've allowed redundancies to occur where a CSS fragment is shared by two or more pages.

Browser caching does us no good here because to the browser, each CSS file has a different filename, and is thus a separate file, even if some of them contain content that is the same.

So which rule should we break?

The one I'd cross off is:

1. You should only bring down the CSS that you need for the page being viewed.

I think it's much simpler and more practical to minify/combine the hell out of all the CSS for my site, and bring it down in one go.

As for the performance problems this might create, I think they're lessened by the following facts:

• Modern browsers are getting faster at processing CSS rules, so pretty soon it won't matter if you have a lot of rules in memory that aren't being used.

• Having all your CSS cached will improve speed a lot more than any improvement you'd gain from leaving out unnecessary rules, which are going to get loaded anyway, when the user browses to the pages that require those rules.

Am I right here?

解决方案

Like always both cases are valid.

Your solution has to go with benchmarking your costumers.

But I would probably stick to just one css file for as long as I possible could. And if your site grows into such an extravagant size were you need two different files try to use them in two very different site sections site_general and logged_in for example.

Nevertheless, some things may help you:

• compress css with YUI Compressor (gives me the best results)
• have apache (or whatever) deflate your css files
• and the most important of all, make sure the file is cached by the user!

Keep CSS Clean

One thing you may find useful after having several developing runs on a site is Dust-Me Selectors a Firefox extension that covers your site for unused selectors.

Use Selectors Wisely (render speed!)

Probably all selector engines go from right to left making .parent div.myclass faster than div.parent .myclass. When writting your CSS keep this in mind. Also remember that ID's # are much faster than classes. Apart from that it's the usual, avoid universal selectors, don't hover on non link elements, ... Google has a great article on it.

On top of that run Firefox's Extension - Page Speed that gives you a very detailed info on slow selectors and much, much more.

Apache Deflating Example deflating is smaller than gzipping as Jeff so kindly put for us on his blog.

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

Apache Caching Example

# 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>

Hope it helps!

这篇关于最佳做法 - 只下载您需要的CSS，或使用缩小过程？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！