样式化的组件最终样式通过 <styles /> 标签直接注入到 DOM 中，使用样式标签注入会影响性能吗？
Posted
技术标签:
【中文标题】样式化的组件最终样式通过 <styles /> 标签直接注入到 DOM 中，使用样式标签注入会影响性能吗？【英文标题】：styled components final styles are injected directly in DOM with <styles /> tag, with style tag injection does performance gets affected? 【发布时间】：2020-02-07 14:09:56 【问题描述】：问这个问题的原因是为了了解样式化组件对性能的影响， 因此，正如我所注意到的，这是我的观点，因为样式化组件直接通过标记在 DOM 中注入样式，并且不会对性能产生太大影响，因为即使 CSS 是用 javascript 编写的，这会增加包大小，但这并不重要，因为浏览器缓存 javascript 文件，并且仅在第一次下载文件时才会影响，如果 JS 中没有 CSS，则样式/css 文件将采用该大小而不是 js 文件 唯一的问题可能是在 DOM 中注入样式的处理，但在某些地方你必须妥协以获得一些好处，因为它也是一个像其他人一样的 JS 库
还有代码拆分包大小划分，
【问题讨论】：
【参考方案1】：您可以在documentation 中找到此信息：
... styled-components 在运行结束时注入其样式 默认
<head>。
【讨论】：
嗨 Lavor，感谢您指出我正在浏览文档，想知道您是否在任何 LIVE 应用程序中使用样式化组件，您是否遇到过任何挑战或使用它是一个不错的选择它适用于新项目吗？从未来的角度来看，我想要一个意见 对不起，我没有直接使用它们，只是以某种形式作为 MaterilaUI 的消费者。对于我自己的课程，我决定改用 css 模块。以上是关于样式化的组件最终样式通过 <styles /> 标签直接注入到 DOM 中，使用样式标签注入会影响性能吗？的主要内容，如果未能解决你的问题，请参考以下文章
所有样式化的组件都返回任何 (@types/styled-components)