样式化组件补液成本高吗？

Posted 2023-03-07

【中文标题】样式化组件补液成本高吗？

【英文标题】：Is styled-components rehydration costly?

【发布时间】：2021-08-25 05:35:33

【问题描述】：

我正在使用 nextjs 进行 s-s-r。我正在使用this 技术在服务器端呈现样式。 因此，当 DOM 被下载时，它不仅会获取 html，还会获取在样式标签中绘制所需的所有 CSS。

一旦 HTML 被解析，它就开始绘制 - 到目前为止很好，一旦 JS 被下载和解析，问题就开始了。特别是_app.js，styled-components删除现有样式，reference。

这对性能有何影响？

我的共识：

FCP 和 LCP 将因重绘而延迟 由于浏览器忙于绘制和重绘，主线程被阻塞，可能无法处理用户交互，最终导致帧率下降。

当路由改变时也会发生同样的事情，因为它会拉取新的 JS 文件并编译和设置样式。这就是样式化组件的成本吗？

【参考方案1】：

使用样式化组件是有代价的，它非常适合静态生成的网站/应用程序，但服务器端渲染绝对不是它的强项。每次更新他们都试图将他们在 s-s-r 中的性能提高几个百分点。这绝对是一个已知问题，Atlassian 等公司正在努力克服这一瓶颈。这是他们致力于 Compiled 一个 CSS-in-JS 的唯一原因，它专注于通过在编译时智能地访问你的代码来消除这个问题。 Check out the official Documentation

还可以查看 Nathan 在 LogRocket dev 上关于编译及其起源的精彩文章

【讨论】：

两个链接都一样，你能再检查一下吗？

现在检查它的更新，感谢您指出。