Html 我应该在下载完整CSS后删除内联CSS吗?

Html 我应该在下载完整CSS后删除内联CSS吗?,html,css,performance,inline-code,Html,Css,Performance,Inline Code,我一直在玩弄Filame的Critical CSS(),对它的用法有一个疑问 由于我一直在使用该工具,它会为我指向的每个页面生成一个“关键”工作表,以便我可以通过中的标记将这些文件内联到HTML中。这一切都是有道理的 但是,一旦用户访问我的任何站点页面,他们就会将主页面完全缓存。在这一点上,停止内联CSS是否有意义,因为用户已经加载了CSS,而是通过传统标记链接到它?是,内联CSS现在通常只在您希望它完全优先于您无法控制的外部样式表时才需要,因为外部样式表会对.JS文件进行不必要的更改,从而覆盖

我一直在玩弄Filame的Critical CSS(),对它的用法有一个疑问

由于我一直在使用该工具,它会为我指向的每个页面生成一个“关键”工作表,以便我可以通过中的标记将这些文件内联到HTML中。这一切都是有道理的


但是,一旦用户访问我的任何站点页面,他们就会将主页面完全缓存。在这一点上,停止内联CSS是否有意义,因为用户已经加载了CSS,而是通过传统标记链接到它?

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

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

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


了解样式表何时有用的唯一方法是解析您的访问日志,尝试了解当特定用户请求特定页面时,样式表也被请求的频率。使用它,您可以在内联关键css有用时创建概率模型。这似乎是为了一点小收获而做了太多的工作。我猜使用内联关键css对登录页或病毒式传播的页面最有用。

我将在这里回答,因为这样做最好不要在评论中

你遇到的问题很奇怪,因为你想用两个独立但有联系的问题来涵盖所有可能的基础

首先,你的表现有所提高。因为您希望有更高的性能,所以使用内联样式在技术上是正确的答案。因为您没有执行请求,所以会有一些小的收益。所有发出的请求都需要时间,根据服务器与每个请求通信所需的时间,您将看到性能可能下降。这就是为什么一些大得多的请求被认为是多余的,谷歌通常会通知你对图像进行精灵化或其他形式的连接

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

在某个时候,您必须实际加载它。你必须打电话。无论它是在第一次加载还是最后一次加载时,在某个点上,它都必须被检索。您将花费大量时间检查每个变量,如果没有,则需要加载样式表。如果您已经被要求在某个时候加载它,那么它就可以归结为永远不需要执行内联样式。如果你有内联样式,你永远不需要加载它

您可能会对文件进行PHP包含,并以这种方式将其拉入。您只需在样式声明之间包含该文件,它就会以这种方式填充CSS。我不会说这是最好的方法,但这是可能的。这是可以做到的。我仍然坚持认为内联不是正确的方式。从技术上讲,这是有帮助的。现实。。。不,在我的时代,我从来没有看到过它是有益的。如果有人想给我看一个好的,但我怀疑我会使用这种做法,除非它是最后的手段

记住这最后一个想法。大多数情况下,内联样式是指最终样式;最终会覆盖我们作为开发人员无法编辑的原始外部样式表(或者由于其他原因不想更改)


谷歌是伟大的,他们提供了伟大的研究,但研究是要被考虑的,并不总是像他们写的那样使用。这是为了提供洞察力。通常不是一个入门指南。

你根本不应该默认使用内联css…通过内联,我澄清了我的问题,我指的是将关键css粘贴在标签中,我仍然不建议这样做。在大多数情况下,加载页面的能力没有足够的提高。图像是一个更大的问题。。。然而。。如果你想做一个或只是做一个只与css关联的cookie,并且在html的头部有一个
if-else
station,如果他们有cookie或没有cookie,它会做一个或另一个。谷歌的页面洞察(developers.Google.com/speed/pagespeed/Insights)不同意你的观点。对于所有的网站或应用程序来说,可能没有足够的性能提升来让这一特定实践值得一试;但它确实为某些应用程序带来了回报。我同意HTTP请求是一个更大的交易!实际上,内联“关键”CSS是一个页面速度()建议,通常被认为是实现最佳性能的最佳前端实践。这个问题与特定性无关,当我说“inline”时,我的意思是在any中的标记中,any称为“Header”样式“内联”样式表示它实际上在同一行中。是的,当它是绝对的并且不需要外部干扰时,它是性能的建议。这就是为什么内联样式会覆盖除此之外的所有内容!重要的是,我使用的术语“inline”与本文()相同。对我来说,这仅仅意味着将CSS粘贴到HTML文件中(通过样式标记或样式属性),我指的是您所称的“标题”样式。我的问题与通过元素或“Inline”上的style属性进行样式设置无关