2

我想知道是否更好

<link>A) 使用或包含外部 CSS 文件

B) 将 CSS 直接回显/刷新/打印到<head>.

就个人而言，我喜欢选项 B，因为它允许

  • 删除评论/缩小
  • 使用放在根目录上方的 css
  • 压缩多个 css 文件 = 更少的 HTTP 请求

在我把它付诸实践之前，我应该（不）有很大的理由吗？

4

6 回答 6

5

选项 A 会给你一个额外的 HTTP 请求，但浏览器会将 CSS 文件保存在缓存中，所以这没什么大不了的。

另一方面，即使选项 B 会为您保存一个 HTTP 请求，您的 HTML 页面也会相当大，如果您的 HTML 页面经常更改，浏览器将无法缓存它。所以你的服务器将不得不处理更多的数据传输。

对于内容很少更改的页面，请使用选项 B。否则，请使用选项 A。

于 2011-01-14T02:55:34.090 回答
2

如果您正在计划一个非常高流量的网站，那么选择 B（如下所述，这不是一个好主意，除非您的 html 几乎从不改变，例如谷歌首页）。我个人喜欢 A，因为它允许您将样式远离您的 html，并允许您将特定样式表用于不同的媒体，甚至可以轻松地从一种媒体切换到另一种媒体。此外，它易于维护（使用版本）和扩展。

如果您担心请求，请处理您的图像。您可以在 CSS 中将所有图像添加为 base64 并阻止许多请求，或者对多个图标使用图像平移技术。

您还可以离线缩小 css，并使用脚本或服务器端编码将所有 css 样式表放在一个文件中。

我的 5 美分。

于 2011-01-14T02:55:14.147 回答
1

最好使用选项 (A) 进行缓存，但不要害怕，您也可以获得选项 B 的好处！只需使用 php 扩展名命名您的 css 文件，然后将其包含在链接标记中。然后，PHP 将在将其发送到浏览器之前解析此文件，以便您可以删除评论/缩小它或包含服务器上任何位置的 css 文件。至于你的第三点，如果浏览器缓存它，那么它第一次是 2 个请求，但第二次只有 1 个请求，所以总的来说你得到的请求更少。

于 2011-01-14T02:55:49.503 回答
1

从长远来看，通过文档头部的标签加载外部样式表会更好。这允许浏览器在加载样式表后对其进行缓存，而您不必在每个页面请求时都下载它。

如果您担心缩小样式表，您可以使用许多工具来做到这一点 - 请参阅有关CSS 缩小器的任何建议？有很多建议。

于 2011-01-14T03:00:05.693 回答
1

简短的回答是你不应该使用方法 B。你可以在下面阅读为什么我认为你不应该那样做。

您应该使主 HTML 文件的文件大小尽可能小，因为您无法缓存该文件（大多数情况下是因为它的动态特性）。

在本地测试时不应该进行过早的优化。但是，当您部署代码时，您应该缩小 CSS 并将所有文件合并到一个文件中。也不要忘记给 CSS 文件一个遥远的未来过期标头（缓存非常重要）。

雅虎加速网站的最佳实践也为您提供了很多信息（我的很多答案都是基于该阅读）如何加速您的网站，并且是一本非常好的读物。

于 2011-01-14T03:02:57.073 回答
0

正确答案取决于页面的目的以及样式的结构。

在我工作的网站上，我们有几个关键页面，其中页面速度是一个关键因素（例如人们可以下载我们软件的登录页面），但我们还希望为看到多个页面的访问者缓存我们的 CSS 或可能会在不久的将来回来。

您也很少只有一个 CSS 文件，常见的设置可能是： 一个 css 重置文件 一个 template.css 文件，其中包含由所有页面共享的网站的一般样式 一个每页 css 文件，为页面定义特定规则需要缓存 IEfix css 文件以实现 Internet Explorer 兼容性

css 重置、template.css 和 IRfix 文件非常适合缩小为将被缓存的单个外部文件。

每页 css 文件是包含在标签中的一个很好的候选者，因为它不打算被重用，而且 http 请求的成本通常高于传输字节的时间成本。

如果您的页面具有未在整个站点中共享的特定样式，请内联所有内容。

于 2011-01-14T03:27:00.897 回答