В постоянно меняющемся ландшафте React появилась долгожданная версия 18 с новаторским открытием — появлением параллельных функций. Эти трансформирующие элементы знаменуют новую эру в рендеринге приложений React, прокладывая путь к беспрецедентному уровню производительности и эффективности.
Давайте отправимся в увлекательное путешествие, чтобы исследовать глубокое влияние и улучшения, которые эти передовые функции привносят в ваши приложения.
Основной поток и длинные задачи
Суть дела кроется в движке JavaScript, отвечающем за выполнение кода в среде браузера. Этот движок работает в однопоточном контексте, который часто называют уважаемым «основным потоком».
Проходя через код, основной поток не только обрабатывает выполнение JavaScript, но также берет на себя ответственность за управление взаимодействиями с пользователем, такими как клики и нажатия клавиш, обработку сетевых событий и таймеров, обновление анимации и управление переформатированием и перерисовкой браузера.
В области обработки задач в браузерах важным аспектом, который следует учитывать, является необходимость расстановки приоритетов. Когда задача находится в процессе обработки, она привлекает безраздельное внимание браузера, заставляя все остальные задачи терпеливо ждать своей очереди.
Такой подход обеспечивает плавное выполнение небольших задач, предоставляя пользователям беспрепятственный и приятный опыт просмотра.
Любая задача, выполнение которой занимает более 50 миллисекунд, считается «долгой задачей».
Значение эталона 50 мс заключается в его отношении к созданию кадров на устройствах для обеспечения визуально бесшовного опыта. Чтобы добиться плавного отображения с частотой 60 кадров в секунду (fps), устройства должны стремиться создавать новый кадр каждые 16 мс.
Эта быстрая генерация кадров гарантирует, что пользователи получат визуально захватывающее путешествие, когда они…
