内部与外部CSS

Question

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

Answer 1

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

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

内部CSS的一个缺点是它可以增加html的下载大小。

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

与缓存到期设置相结合的优势： Web应用程序的“外观和感觉”受以下因素控制：

• 您通常希望在所有页面中保持相同的“感觉”
• 内容比样式更容易发生变化

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

Answer 2

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

因此，您首先需要一个额外的请求（外部样式表），但在进一步的请求中传输的数据会更少。

Answer 3

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

Answer 4

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

我偶尔会使用内部CSS，它非常特定于页面，在其他地方没有用。不要把它们放在一条直线上;内联CSS很难维护。