PHP CSS - 更快/更好地加载外部文件或回显到头部？答案

【问题标题】：PHP CSS - faster/good practice to load external file or echo into head?PHP CSS - 更快/更好地加载外部文件或回显到头部？
【发布时间】：2011-06-08 22:06:25
【问题描述】：

我想知道是否更好

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

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

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

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

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

【问题讨论】：

(A) 将有利于样式表缓存并减少进入的 HTML 页面的大小。更不用说它会消除标记有效性问题。
@Bolt - 你能详细说明一下：标记有效性问题吗？我认为 echo-ing 缩小的 CSS 已经有效了？
实际上从头开始，我不确定它是否会破坏验证。
@Bolt - 注意。只是在<style> 中测试自己，验证似乎没问题。

标签： php css optimization inline head

【解决方案1】：

正确答案取决于页面的用途和样式的结构。

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

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

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

每页 css 文件非常适合包含在标签中，因为它不打算重复使用，而且 http 请求的成本通常高于传输字节的时间成本。

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

【讨论】：

【解决方案2】：

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

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

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

我的 5 美分。

【讨论】：

@lepe - 哇，喜欢这个形象创意 - 你有推荐的链接以供进一步阅读吗？
如果有一个大网站，那么选择 B 是一个非常糟糕的主意，因为您无法再正确缓存您的页面了。
@Steve：当然在这里：en.wikipedia.org/wiki/Data:_URI。我在我的项目中使用了一个代码，它将所有 css 文件压缩为一个（并缩小），并自动将所有 url() 替换为 base64（并将其存储在缓存中）。它适用于除 IE6 以外的所有浏览器。
@Alfred：我同意你的看法。我从不使用 B，所以我忘记了那个细节......呵呵（我相应地更新了我的答案）。
@Steve：没关系...我很高兴能帮上忙。

【解决方案3】：

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

你应该保持主 HTML 文件的文件大小尽可能小，因为你不能缓存那个文件（大多数时候因为它的动态特性）。

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

Yahoo! 的best practices for speeding up your website 还为您提供了很多信息（我的很多答案都基于该阅读）如何加快您的网站速度，并且是一本非常好的读物。

【讨论】：

+1 “无法缓存该文件” - 很好，现在我明白 @Marc-Franc 的意思了。

【解决方案4】：

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

如果您担心缩小样式表，您可以使用多种工具来做到这一点 - 请参阅 Any recommendations for a CSS minifier? 以获取大量建议。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

选项 B 会给你一个非常大的初始有效载荷，我认为这很糟糕！使用方法B时也很难缓存页面
这就是我在回答中所说的，不是吗？
最重要的是，如果非程序员必须在 CSS 中进行更改，选项 B 是不可行的，因为他们中的大多数人会害怕打开 .php 页面。如果您想要更多的灵活性（如变量），您可能需要考虑 lessCSS