在应用内联v。内部v。外部CSS时，浏览器的速度如何变化？

Question

关于内联诉内部诉外部CSS，我了解缓存问题，以及多次下载和大型文件单次下载之间的权衡。我想知道的是渲染速度如何变化，基于你可以放置CSS的三个地方。

换句话说，实际绘制页面的时间最少？我假设外部是最慢的，因为即使它被缓存，浏览器仍然必须检索规则，解析它们，并将它们应用于当前元素。我还假设内部（在页面中但在样式标签内）将是第二慢的，因为仍然存在解析规则并确定将哪些规则应用于哪些元素的过程。我假设内联（直接通过style属性应用）是最快的，因为浏览器可以跳过将规则与元素匹配的过程。

有人曾经深入研究过这个吗？我知道我在具有复杂CSS的大页面上有一些渲染问题，只能通过内联来解决。 （请不要讲述复杂CSS的大页面的邪恶。）

Answer 1

无论哪种方式，一旦加载了实际的规则文本，它就会通过相同的css解析器运行 - 外部vs.s没有不同的解析器。内部css。这都是css。外部可能要慢一点，因为它需要一个额外的HTTP请求来获取该文件，但是一旦它被传输到主机浏览器，它就会像你在物理上嵌入相同的规则那样快速解析内联<style>块。

Answer 2

我认为你不应该关心哪种模式最快。在任何情况下，HTML，CSS和JS都不是快速的。

我认为您应该担心可读性和可维护性，考虑管理直接应用于HTML标记内的样式的网页。你不可能以这种方式管理任何复杂的事情。

你问的主要取决于浏览器的实现（关于css文件，可以根据我们正在讨论的解决方案单独下载）。在任何情况下，我都不认为差异是如此之大，因为它们都需要由同一个解析器解析。

如果页面太复杂而无法使用样式表进行样式设置并且需要内联样式，则问题应该通过内联css解决，而不是在不同级别重构事物。

此外，我会说很多性能问题可能是由于编写CSS而没有任何结构，只是日复一日地添加东西而不考虑使用严格/聪明的选择器。在思考它们的同时开发（通常是在Web开发中留下的东西，尤其是前端）通常是最好的方法。