javascript - React Styled Components 性能

Question

我正在一个使用 React 和 Styled Components 的网站上工作。但是，移动设备上的网站速度非常慢，并且 Google Chrome 控制台中会出现警告:

[Violation] Long running JavaScript task took 305ms

于是我找到了 existing topic解决这个问题，并寻找使用 React 开发人员工具减慢我的应用程序的原因。我创建了包含许多渲染项目的新空白页面:

import * as React from 'react'
import { render } from 'react-dom'

const items = new Array(5000).fill({ title: 'Title', description: 'This is description.' })

render(
    <>
        {items.map((item, i) => (
            <div>
                <h1>{item.title}</h1>
                <p>{item.description}</p>
            </div>
        ))}
    </>,
    document.getElementById('app')
)

React 开发工具分析器显示:



但是，如果我替换 React 的 div , h1和 p带有样式组件 Styled.div , Styled.h1和 Styled.p (没有任何样式):

import * as React from 'react'
import { render } from 'react-dom'
import Styled from 'styled-components'

const items = new Array(5000).fill({ title: 'Title', description: 'This is description.' })

const Item = Styled.div``
const Title = Styled.h1``
const Description = Styled.p``

render(
    <>
        {items.map((item, i) => (
            <Item>
                <Title>{item.title}</Title>
                <Description>{item.description}</Description>
            </Item>
        ))}
    </>,
    document.getElementById('app')
)

渲染时间将延长四倍以上:



这是时间线(上面是时间线，下面是一个项目的详细信息):



大多数时间需要一些上下文消费者:



有什么方法可以提高 Styled Components 的性能？当然，我在实际应用中没有 5000 个项目，但项目更复杂且不一样，所以我不能轻易使用虚拟化/回收列表或延迟加载。

Answer 1

没有。
Styled Components，作为 CSS-in-JS 解决方案，速度很慢，因为必须在生成 CSS 之前解析 JS，然后才应用 CSS。使用原生 CSS 解决方案，浏览器会在 JS 仍在加载时呈现 CSS，因此速度要快得多。
最近，我将一个大型应用程序从 Styled Components 切换到 SCSS 模块，并取得了巨大的成功。你失去了直接将变量注入(inject) CSS 的能力(还有其他方法，比如定义 CSS --variables )，但性能提升使应用程序运行顺畅。