1

我正在开发一个网络应用程序；其中一个屏幕需要一些非常特定于该页面的 CSS （即，它不会在应用程序/站点的其他任何地方使用）。

所以 - 我有三个选择：

  1. 将其包含在全局 CSS 文件中
  2. 将其包含在特定于页面的 CSS 文件中
  3. 将其包含在<head>页面中

选项 1 的缺点是当用户访问应用程序的任何屏幕时将加载 CSS，即使她从未访问过该特定屏幕（这很有可能）。

选项 2 的缺点是它是一个单独的 HTTP 请求；由于 CSS 本身非常小（<1kb） - http 请求本身的开销似乎比下载数据的实际带宽更糟糕。

选项 3 的缺点是用户每次访问页面时都会下载 CSS（即 CSS 不会被缓存）。但由于这是一个不常查看的页面（并且很少重新访问页面），这似乎是次要的。

对我来说 - 似乎选项 3 可能是最好的。但我读到的一切似乎都不鼓励这种方法。

考虑到专家们如何努力推动 CSS sprite 来最小化 http 请求，同样的逻辑难道不适用于一个很小的 ​​CSS 文件吗？那么，为什么#3 不是一个好的选择呢？还有其他我错过的注意事项吗？

对于它的价值——似乎同样的问题适用于任何特定于页面的 JavaScript；我可以将它包含在<script>页面末尾的标记中，或者包含在单独的 .js 文件中。

提前致谢。

4

2 回答 2

1

把它放在头上，然后继续解决其他问题。:)

“程序员浪费大量时间去思考或担心他们程序中非关键部分的速度，而在考虑调试和维护时，这些效率上的尝试实际上会产生强烈的负面影响。我们应该忘记小的效率，说97% 的时间：过早的优化是万恶之源。但我们不应该放弃关键的 3% 的机会。” ——唐纳德·克努斯

于 2013-02-19T20:00:09.490 回答
1

如果您在单个页面中使用它，则最好将其<head>直接包含在其中。它会导致更少的 HTTP 请求通过，更少的带宽使用，以及稍微更快的加载。

您还可以考虑使用内部样式表和外部样式表的组合：对于您可能在站点范围内使用的东西，例如 、 、 等的样式h1，h2链接h3到外部样式表。对于特定于一页的内容，例如background-image，将样式放入<head>.

于 2013-02-19T21:14:20.523 回答