动态CSS - 多个样式表与单个动态css（渲染性能）

Question

我正在编写支持“插件”的网站作为外部“显示”（自定义全屏HTML内容，由网站引擎和客户端提供的js驱动程序管理，由引擎API提供与其他客户端交互）由自定义驱动js，html和css。主题将被组织到外部存储库中，将包含.theme文件，其中包含主题包含的文件列表，以便它们将被加载并存储在IndexedDB中以便更快地在本地使用 - 以及客户端HTML的css规则

重点是客户端正在访问和更改css规则以调整响应式布局。更改主布局css的文本会导致重新加载样式并丢失由js执行的规则中的所有更改。客户端是动态加载的，因此可能随时发生变化。

所以我需要选择以下选项之一：

1. 使用CSS文本模块 - 加载新客户端后 - 通过添加新内容（innerHTML）并在所有客户端上调用cssreload函数来扩展主要css文本

2. 使用多个样式表并为客户提供API，以便仅修改自己的样式表，以避免在注入新客户端后重新加载。

哪一个会获得更好的表现？客户的平均数量是10-20。 是否有其他更好的解决方案我没有想到？ 多个样式表似乎更轻量级（至少对我来说），因为它们不需要重新加载js，但是我不确定如此大量的不同样式表是否会导致重新渲染的性能下降与使用单个巨大的样式表。

Answer 1

从我读过的所有内容来看，最佳做法是使用一个样式表而不是多个样式表，除非无法避免。这是因为，最近，网页浏览的最慢部分是多个请求。如果你可以在一个请求中加载所有CSS，即使文件很大，通常比加载多个CSS文件更快。

有一个great SO answer并对此作出解释。值得一读。