React 样式组件性能

Question

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

[违规] 长时间运行的 JavaScript 任务耗时 305 毫秒

所以我找到了这个问题的现有主题，并使用 React Developer Tools 寻找降低我的应用程序速度的原因。我创建了包含许多渲染项目的新空页面：

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 Dev Tools 分析器显示：

不过，如果我更换作出反应的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')
)

渲染时间将增加四倍以上：

这是时间线（上面是时间线，下面是一个项目的详细信息）：

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

有什么办法可以提高样式化组件的性能吗？当然，我在真正的应用程序中没有 5000 个项目，但项目更复杂而且不一样，所以我不能轻易使用虚拟化/回收列表或延迟加载。

Answer 1

没有。

Styled Components作为CSS-in-JS解决方案，速度很慢，因为必须在生成CSS之前解析JS，然后才应用CSS。使用原生 CSS 解决方案，浏览器会在 JS 仍在加载的同时渲染 CSS，因此速度要快得多。

最近，我将一个大型应用程序从 Styled Components 切换到 SCSS 模块，取得了巨大成功。您失去了直接将变量注入 CSS 的能力（还有其他方法，例如定义 CSS --variables），但性能提升使应用程序运行起来如丝般流畅。