将css包含在html页面的头部而不是单独的文件的开销

Question

更新:最终，这成了一个不成问题的问题。我们创建了代理，它通过与js文件相同的域从blob提供主题css文件。

我正在开发一个主题切换模块，它使用document.stylesheets对象来获取有关某些样式表中的css规则的信息。

该站点托管在azure上，css文件存储在blob上。

由于缺乏对blob中的跨域资源共享的支持，这使得无法访问样式表。

解决方法是将整个css文件注入html页面的head部分。

这会因为页面膨胀而显著影响性能吗？

编辑：

正如他在下面提到的，当然有两个因素:第一个是外部css文件的缓存，这会导致更快的重新加载时间。第二个是http请求的数量-如果css在页面中，它会变得更少:尽管如果文件已经被缓存了-无论如何在重新加载时都不会对它们发出请求。

我正在尝试理解，除了这些因素之外，通过在页眉部分添加大约3-5个样式标签，每个标签都有100- 300个css规则，使html页面变得更大，是否会导致脚本在页面上运行速度变慢，因为html字符串本身更长？

Answer 1

如果它在页面中，由于在第二次加载时不在浏览器的缓存中，因此它将花费更长的css加载时间。

Answer 2

这取决于不同的因素。例如，你的css有多大，你的用户从哪里访问你的网站。如果您的目标受众是移动用户，那么每增加一个kb的数据都可能会显著影响性能，并会给您带来负面的用户体验。另一方面，每个外部样式表都是一个http请求，这可能会进一步影响性能。所以这取决于你的特殊情况