下载完整的 CSS 后，我应该删除内联 CSS 吗？

Question

我一直在使用 Filament 的关键 CSS (https://github.com/filamentgroup/grunt-criticalcss)，并且对它的使用有疑问。

由于我一直在使用该工具，它会为我指向的每个页面生成一个“关键”表，以便我可以通过

中的

Answer 1

如果您确定用户缓存了样式表，这将是一种有效的方法，假设解析缓存的样式表或关键 css 的内联样式将花费相同的时间。

但是，您不能确定它是否存在于用户缓存中。由于关键的 css 也存在于样式表中，这不是问题，但它会使页面呈现速度变慢。

知道何时它可能有用的唯一方法是解析您的访问日志，尝试找出当特定用户请求特定页面时样式表也被请求的频率。使用它，您可以创建一个概率模型，以确定何时内联关键 CSS 有用。这似乎是为了小额收益而做的太多工作。我猜测使用内联关键 CSS 对登陆页面或病毒式传播页面最有用。

Answer 2

是的，现在通常只需要内联 CSS，当您希望它完全优先于外部样式表时，您无法控制 .JS 文件进行不必要的更改，从而覆盖您的样式表。这样做也有助于提高性能、带宽等。

Answer 3

我将在这里回答，因为最好这样做而不是在 cmets 中。

您遇到的问题很奇怪，因为您想用两个独立但相关的问题来涵盖所有可能的基础。

首先，您的绩效有所提升。由于您希望获得更高的性能，因此内联样式在技术上是正确的答案。有一些小的收获，因为你没有做请求。所有发出的请求都需要时间，并且根据服务器传达每个请求所需的时间，您将看到可能的性能下降。这就是为什么一些更大的请求被认为是过度的，Google 通常会通知您精灵图像或其他形式的连接。

另一部分是您希望易于访问并希望能够快速更新，这将由实际的 CSS 文件提供。您需要在某些时候调用此 CSS 文件，以便它可以按照您的预期缓存到浏览器中。您可以进行一些 cookie 检查，并根据用户是否访问过该站点，他们将有一个特定的呼叫，但这是主要问题：

在某些时候，您必须实际加载它。您将不得不拨打电话。无论是第一次加载还是最后一次加载，它实际上都必须被缓存。您将花费大量时间检查每个变量，如果他们没有，他们将需要加载样式表。如果您已经需要在某个时候加载它，那么归结为永远不需要做内联样式。如果你有内联样式，你永远不需要加载它。

您可以潜在地对文件进行 PHP 包含并以这种方式将其拉入。您只需在样式声明之间包含文件，它就会以这种方式填充 CSS。我不会说这是最好的方法，但这是可能的。可以办到。我仍然坚持说内联不是正确的方法。从技术上讲是的，它可以提供帮助。现实……不。在我的时代，我从未见过它是有益的。如果有人想给我看一个很好的方法，但我怀疑我会使用这种做法，除非是万不得已。

记住这个最后的想法。大多数情况下，内联样式是作为最终样式的样式；最终会覆盖我们作为开发人员自己无法编辑（或出于其他原因不想更改）的原始外部样式表。

Google 很棒，他们提供了很好的研究，但研究是要考虑的，而不是总是完全按照他们写的那样使用。它是提供洞察力。通常不是向导。