Это еще одна статья из моей сознательной практики. Зачем я это делаю? Прочтите эту статью, чтобы узнать больше.
Я читал через эту статью о том, как Twitter Lite (React PWA) устраняет узкие места в производительности.
Когда пользователь нажимает кнопку Home, появляется задержка до отображения твитов. Эта задержка была вызвана установкой и демонтажем большого количества компонентов. defer-render-hoc - это проект с открытым исходным кодом, который реализует решение, приведенное в статье.
Давайте посмотрим на код
defer-render-hoc - это компонент более высокого порядка (HOC). Чтобы узнать о нем подробнее, прочтите документацию здесь.
Мы используем defer-render-hoc, оборачивая им ваш дорогой компонент.
defer-render-hoc выполняет рендеринг null при первоначальном рендеринге.
Итак, когда defer-render-hoc отобразит ваш дорогой компонент? Он использует requestAnimationFrame для ожидания двух кадров. После того, как два кадра пройдут, он отобразит ваш дорогой компонент.
requestAnimationFrame обычно используется для создания плавных анимаций (подробнее об этом читайте в этой статье).
Здесь мы используем requestAnimationFrame, чтобы позволить другим компонентам обновляться и возвращать управление пользователю. После двух кадров наш Дорогой Компонент вступает во владение.
Демо
Посмотрите этот CodeSandbox для демонстрации defer-render-hoc.
Щелкните от кнопки Cheap page до кнопки Expensive page. Обратите внимание, как кнопка остается синей, пока пользовательский интерфейс зависает.
Наше событие клика занимает 620 мс. Событие щелчка не завершается, пока не будет установлен дорогой компонент. Из-за этого экран зависает для пользователя.
Теперь щелкните от кнопки Cheap page до кнопки Deferred Expensive page. Обратите внимание, что кнопка не остается синей, а пользовательский интерфейс не замораживается.
Наше событие клика занимает 16 мс. Событие click не дожидается установки нашего дорогостоящего компонента; работа отложена. Экран не зависает.
Как это помогает?
Такой же объем работы еще выполняется. Дорогой компонент все еще монтируется; он просто монтируется позже. Сам по себе опыт в целом не быстрее. Это может быть даже медленнее с накладными расходами defer-render-hoc. Но иногда более быстрый воспринимаемый опыт важнее, чем реальный более быстрый опыт. См. Ссылки ниже для получения дополнительной информации о предполагаемой производительности.
- Https://en.wikipedia.org/wiki/Perceived_performance
- Https://medium.com/@lukejones/a-designers-guide-to-the-perception-of-performance-fedb4bd102b
В зависимости от вашего проекта defer-render-hoc может вам подойти.
