Я работаю над сайтом, используя React и Styled Components. Однако веб-сайт очень медленно работает на мобильных устройствах, и в консоли Google Chrome появляются предупреждения:
[Нарушение] Длительное выполнение JavaScript Задача заняла 305 мс
Итак, я нашел существующие топи c с этой проблемой и поиском того, что замедляет мое приложение с помощью 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 показывает:
![enter image description here](https://i.stack.imgur.com/3sYjf.png)
Однако, если я замените 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')
)
Время визуализации будет более четырех раз длиннее:
![enter image description here](https://i.stack.imgur.com/jtMkK.png)
Вот временная шкала (выше - временная шкала, ниже - деталь одного элемента):
![enter image description here](https://i.stack.imgur.com/HbLvK.png)
Большую часть времени занимает некоторый потребитель контекста:
![enter image description here](https://i.stack.imgur.com/SSnNH.png)
Есть ли способ повысить производительность с помощью стилевых компонентов? Конечно, у меня нет 5000 элементов в реальном приложении, но элементы более сложные и не одинаковые, поэтому я не могу легко использовать виртуализированный / переработанный список или отложенную загрузку.