CSS-in-JS 不会阻止浏览器进行 CSS 缓存吗？答案

【问题标题】：Does CSS-in-JS not prevent browser from CSS caching?CSS-in-JS 不会阻止浏览器进行 CSS 缓存吗？
【发布时间】：2019-06-15 17:27:02
【问题描述】：

我正在寻找使用服务器端渲染设置 React 应用程序样式的最佳实践。

我看到了不同的选择，例如使用 SASS 之类的预处理器或将样式放入 JS 代码中，例如 JSS、样式组件等。

围绕 JSS，我看到它把样式放在 HTML 中的 head 部分。我只是使用以下示例来查看行为：

它不会阻止浏览器缓存 CSS 以将其放在 head 部分中，从而增加连续页面加载时间吗？有什么办法可以通过 JSS 将样式放到外部文件中，以便浏览器可以缓存它？

【问题讨论】：

【解决方案1】：

您在该示例中看到的是关键 CSS。只有 CSS 专门用于该视图，它不应该被缓存，它比以阻塞方式加载外部资源更快，并且需要支付延迟。

Critical CSS 在这里是一种实际的性能优化。

【讨论】：

我知道最好在 head 部分中为该页面加载所需的 CSS 的 HTML，而不是等待阻塞的 CSS 加载。这很公平。我担心的是以下页面加载。假设我们有一个大的页面样式数据，每次我们刷新页面时，我们都必须加载同样大的 HTML+CSS 包，同时我们可以利用浏览器缓存。
这就是为什么我们需要页面上实际使用的 CSS，而不是在用户操作发生后可能使用的所有内容。通常它并不多，与延迟价格相比，这种权衡更好。
这也是 CSSinJS 很重要的原因，因为它知道 CSS 实际使用的是什么。
另一点是这些优化对于单页应用程序特别有意义。
感谢@Oleg，如果我对 React SSR 应用程序的整个应用程序使用单个阻塞 CSS 文件，加载页面需要一点时间，并且用户会在一段时间内看到一个空白页面.之后，除非不清除浏览器缓存，否则每次重新加载页面都会更快。另一方面，如果我使用 CSSinJS，它只会在 head 部分加载必要的 CSS，这比加载整个 CSS 更快，但它会为页面重新加载做同样的事情。正如您所说，这似乎是在页面加载速度方面的权衡。