css - 内部与外部 CSS

Question

内部与外部 CSS 的优缺点是什么，考虑速度、请求、缓存等。就我个人而言，我不确定动态页面上的内部 css 是否会缓存..？

Answer 1

内部 CSS 的优点： - 更快的下载：请记住，您拥有的每个外部样式表都会有一个额外的 HTTP 请求

外部 CSS 的优点： - 网站在其所有页面上都有共同的“主题”是很常见的。您可以将所有这些常见样式集中在外部文件中，一次下载即可获得可在多个页面中使用的所需样式：节省下载时间 - 您还可以缓存外部样式并设置适当的到期日期。

反对内部 CSS 的一件事是它可以增加 html 的下载大小。

最佳方法： - 根据差异页面中使用的样式混合使用内部 + 外部样式 - 确保在外部样式上设置过期设置并缓存它们。

与缓存过期设置结合的优势：Web 应用程序的“外观”受以下因素支配：

• 您通常希望在所有页面上保持相同的“感觉”
• 内容比样式更容易频繁更改

如果您将样式放在外部 CSS 文件中并设置缓存到期时间为 1 个月，那么在此期间所有用户的“启动”延迟将非常低，因为只会下载已更改的内容：样式将从您的浏览器缓存。过期后有人第一次尝试访问您的页面时，浏览器将自动请求刷新。

Answer 2

如果页面是可缓存的，则该页面的内部 CSS 也是可缓存的（因为它是页面的一部分）。但是外部样式表的优点是它们可以用于许多页面，并且在可缓存时只被请求一次。

因此，您首先有一个额外的请求（外部样式表），但随后需要在进一步请求时传输较少的数据。

Answer 3

不，他们不会。外部 CSS 可以跨多个页面/请求缓存，此外，您通常可以使用 gzip 压缩这些文件。

Answer 4

使用外部 CSS 可确保您所有页面的外观保持一致，至少如果您为整个网站使用 1 个 CSS 文件。第一个页面可能会降低速度，但从那时起 CSS 文件会被缓存，因此后续页面实际上会加载得更快。

我偶尔会使用内部 CSS，它非常特定于页面，在其他地方没有用处。切勿将它们排成一行；内联 CSS 很难维护。