Автор оригинала: FreeCodeCamp Community Member.
Энтони Нг
Я читал Через эту статью О том, как Twitter Lite (React PWA) удалил узкие места производительности.
Когда пользователь нажимает Главная Кнопка, есть задержка, пока не показаны твиты. Эта задержка была вызвана большим количеством монтажа и размонтирования компонентов. отложить-рендер-HOC является проектом с открытым исходным кодом, который реализует решение, приведенное в статье.
Давайте посмотрим на код
отложить-рендер-HOC является компонентом более высокого порядка (HOC). Чтобы узнать больше об этом, прочитайте Документация здесь Отказ
Мы используем отложить-рендер-HOC Обергая свой дорогой компонент с ним.
отложить-рендер-HOC оказывает null на начальном рендере.
Так когда будет отложить-рендер-HOC Делайте свой дорогой компонент? Использует ProwelsimationFrame ждать двух кадров. После прохождения двух кадров он сделает ваш дорогой компонент.
ProwelsimationFrame Обычно используется для создания гладких анимаций ( Подробнее об этом в этой статье ).
Здесь мы используем ProwelsimationFrame Разрешить другим компонентам обновлять и дать контроль пользователю. После двух кадров наш дорогой компонент берет.
Демонстрация
Проверьте это CodeSandbox для демонстрации отложить-рендер-HOC Отказ
Нажмите от Cheap страница Кнопка для Дорогое страница кнопка. Обратите внимание, как кнопка остается синей, как замерзает UI.
Наше событие Click занимает 620 мс. Событие Click не заканчивается до наших дорогих компонентов. Из-за этого экран замораживается для пользователя.
Теперь нажмите из Cheap страница Кнопка для Отложенная дорогостоящая страница кнопка. Обратите внимание, как кнопка не остается синей, а UI не заморожен.
Наше событие Click занимает 16 мс. Событие Click не ждет нашего дорогого компонента для монтирования; Работа отсчитывается. Экран не замерзает.
Как эта помощь?
Такое же количество работы все еще происходит. Дорогой компонент по-прежнему крепления; Это просто смонтирует позже. Сам опыт не быстрее всего. Это может даже быть медленнее с накладными расходами отложить-рендер-HOC Отказ Но иногда более быстрый воспринимаемый опыт важнее, чем фактический быстрый опыт. Смотрите ссылки ниже для получения дополнительной информации о воспринимаемой производительности.
- https://en.wikipedia.org/wiki/Perceived_performance
- https://medium.com/@lukejones/a-designers-guide-to-the-perception-of-performance-fedb4bd102b
В зависимости от вашего проекта отложить-рендер-HOC может быть подходящим для вас.