内联 CSS 而不是使用 "chunks" 是否存在任何性能问题？

Question

Vue 和 React 等现代框架从单个组件内的内联 CSS 开始。例如，在 Vue 单文件组件中，我们将所有 Javascript、HTML 和 CSS 包含在一个 .vue 文件中。通常有一个构建步骤或一些计算将这些更改编译成块，这些块根据用户可见的组件加载到页面中。

我可以理解，这可能是为多个组件编译 CSS 并将其加载到页面中的最有效方法。

我的问题主要与性能有关。假设在呈现组件时，React 或 Vue 没有将所有组件样式编译成块，而是发送了这个：

<div id="someComponent">
    <!-- My component HTML goes here -->
</div>
<style>
     /* Associated styles */
     #someComponent {
         color: red;
     }
</style>

这意味着无需 CSS 块文件，样式只是内联并包含在与实时网站相关的组件旁边。

我知道这很乱，但我的问题是，这样做有任何性能问题吗？ 我本以为这实际上可能更高效，因为加载块需要 HTTP 请求，这显然有开销，而当用户打开网页时，这包含在单个 HTTP 请求中。

Answer 1

对于任何想知道的人，尽管我无法进行非常广泛的测试，但采用这种方法似乎确实存在一些性能问题。它还会导致布局偏移 (CLS)，因为 CSS 在不同时间加载。

一般情况下最好避免这样做，因为它似乎没有带来明显的好处。我最终采用的方法是将所有内联组件 CSS 的正则表达式组合成一个大的内联块 CSS，从而切断 HTTP 请求。

内联 CSS 而不是使用 "chunks" 是否存在任何性能问题？

Are there any performance issues with inlining CSS rather than using "chunks"?

html

javascript

css

frameworks