我应该针对更少的HTTP请求或更多的可缓存的CSS文件？ [英] Should I aim for fewer HTTP requests or more cacheable CSS files?

问题描述

我们得知，每个网页载入的HTTP请求数量较少，这是一件好事。 CSS的极端形式是每页有一个唯一的CSS文件，每个文件中都有重复的共享站点范围样式。

We're being told that fewer HTTP requests per page load is a Good Thing. The extreme form of that for CSS would be to have a single, unique CSS file per page, with any shared site-wide styles duplicated in each file.

但是有一个贸易。如果您有单独的共享全局CSS文件，则可以在加载前端页面时缓存一次，然后在多个页面上重复使用，从而减少特定于页面的CSS文件的必要大小。

But there's a trade off there. If you have separate shared global CSS files, they can be cached once when the front page is loaded and then re-used on multiple pages, thereby reducing the necessary size of the page-specific CSS files.

那么，在现实世界的实践中哪一个更好？

So which is better in real-world practice? Shorter CSS files through multiple discrete CSS files that are cacheable, or fewer HTTP requests through fewer-but-larger CSS files?

推荐答案

通过可缓存的多个离散CSS文件缩短CSS文件，或通过较小但较大的CSS文件减少HTTP请求您的第一个呼叫港口正在使用 YSlow 或 Google Speed ，找出您网站上发生的最慢的问题。有时一个严重压缩（大）的图像或两个可以减慢整个事情。你被告知要减少HTTP请求，因为每个请求都有一个相关的设置成本，但如果采取极端，可能会导致性能下降。在你的情况下，每个页面都有一个CSS文件是不好的形式，因为这意味着浏览器更难缓存。

Your first port of call is using YSlow or Google Speed to figure out what is going slowest on your site. Sometimes a badly compressed (large) image or two can be slowing the entire thing down. You are told to reduce HTTP requests because each request has a setup cost associated with it but if taken to the extreme can lead to worse performance. In your case having a CSS file for each page is bad form as it means it is harder for browsers to cache.

一个方法极端是坏习惯，你应尝试从广角处理此问题，例如：

Taking one method to the extreme is bad practice and you should attempt to approach this problem from a wide angle such as:

• 正确压缩图像或使用CSS sprites（减少HTTP请求）


• 使用Expres，ETag等实施正确的网络缓存（因此客户端不必重新请求所有内容）


• 使用 YUI 或其他类似工具


• 改进CSS / javascript代码性能。某些CSS选择器可能导致浏览器呈现网页需要较长时间。


• 用可能的纯CSS替换图片，例如背景颜色等。


• 使用GZip压缩任何文本输出即html，css，js

• Properly compress images or use CSS sprites (reduces HTTP requests)
• Implement proper web caching using Expres, ETag etc (so clients don't have to rerequest everything)
• Optimise your CSS and Javascript files using YUI or another similar tool
• Improve your CSS / javascript code for performance. Certain CSS selectors can lead to the browser taking longer to render a page
• Replace images with pure CSS where possible i.e. background colors etc.
• Use GZip compression on any text output i.e. html, css, js

如果有疑问，请查看Google主页的源页面。他们优化了这个页面，它会给你很好的线索，做什么。

If in doubt, look at the source page for the Google home page. They optimise that page heavily and it will give you good clues on what to do.

这篇关于我应该针对更少的HTTP请求或更多的可缓存的CSS文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！