动态 CSS - 多个样式表与单个动态 CSS(渲染性能)



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

关键是客户端正在访问和更改 css 规则以调整响应式布局。更改主布局 css 的文本会导致重新加载样式并丢失 js 所做的所有规则更改。客户端是动态加载的,因此可以随时进行更改。

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

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

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

哪一个会实现更好的性能?客户的平均数量约为 10 - 20。也许还有我没有想到的另一种更好的解决方案吗?多个样式表似乎更轻量级(至少对我来说),因为它们不需要 js 重新加载,但是我不确定与具有单个巨大样式表的解决方案相比,如此多的不同样式表是否会导致站点重新渲染的性能大幅下降。

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

对此

有一个很好的答案和解释。 可能值得一读。

最新更新