Для разработчиков эти моменты окажут огромное влияние на производительность вашего приложения React:
- API на стороне сервера
- Вызовите критически важные API на сервере, поскольку вызовы между серверами выполняются быстрее, чем клиентские. Кроме того, не торопитесь выполнять все вызовы на сервере, так как это может привести к тому, что сервер будет медленно выполнять запросы. Попробуйте вызвать те API, которые крайне важны для запрошенной страницы.
- Исходные данные также можно загружать на стороне клиента на других страницах в фоновом режиме. Когда пользователь посещает главную страницу, данные уже загружены.
2. Минимализация
- Уменьшить размер магазина
- Магазин приложений, как правило, хранит большой набор данных, который может или не может потребоваться или использоваться внутри приложения. Удалите такие переменные/данные из хранилища.
- Уменьшить редукторы/действия
- Бывают случаи, когда вызываются различные действия, но ими можно управлять с помощью одного действия. Меньше кода означает меньший размер пакета и более управляемое приложение.
3. Виртуализация данных
- Одним из лучших преимуществ использования визуализации данных является меньшее количество узлов DOM. Будут созданы и станут частью дерева DOM только узлы DOM, которые будут видны внутри видимого окна.
- Не забудьте импортировать из «react-virtualized/dist/*», а не напрямую из «react-virtualized», при использовании только нескольких библиотек, иначе ненужные функции также будут частью пакета сборки, увеличивающего размер загрузки приложения.
- Сейчас существуют другие библиотеки, которые более оптимизированы, чем библиотека, виртуализированная с помощью реакции, например react-window.
4. Веб-работники
- Веб-воркеры — самая недооцененная функция браузеров. Это имеет огромный потенциал сделать страницу отзывчивой, когда необходимо выполнить большие вычисления на странице, блокирующей основной поток. Веб-работники работают в разных потоках.
- Их можно использовать для одновременного вызова нескольких API и вычисления данных и структуры перед передачей в основной поток, что обеспечивает высокую отзывчивость страницы. Однако работа в отдельном потоке не означает, что вычисления будут выполняться быстрее. Они потребляют то же время, но сохраняют отзывчивость страницы на взаимодействие с пользователем.
5. Для больших наборов данных вызовите несколько параллельных API для получения данных порциями. Однако существует ограничение на максимальное количество параллельных запросов, которые могут быть выполнены для домена. Прочитайте ответы о переполнении стека https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser. Постарайтесь ограничить количество параллельных запросов к определенному домену. Вы также можете ввести несколько поддоменов, если количество параллельных API огромно.
6. Кэшировать заголовки с сервера
- Данные API могут быть кэшированы
- Не храните такие данные в кэше в магазине приложения, поскольку это только увеличит размер приложения. Эти данные можно легко получить снова, получив ответ API без простоев, поскольку данные извлекаются непосредственно из памяти браузера вместо повторного вызова сервера API. Нет смысла хранить одни и те же данные в нескольких местах, когда браузер делает это за нас.
7. Внешность обманчива
- Пользователь чувствует, что страница работает быстро, когда видимое окно загружается быстрее. Всегда сначала пытайтесь загрузить данные в видимом окне. Остальные данные можно загрузить в фоновом режиме.
- Допустим, пользователю будет показана таблица с 1000 строками и 10 тысячами столбцов. Сделайте Ann оптимизированным API с получением данных для 10 строк и 10 столбцов, которые в данный момент видны пользователю. Для пользователя это будет выглядеть как быстрая загрузка страницы. Пусть другие данные загружаются в фоновом режиме.
8. Утечки памяти
- Часто страница становится тяжелой в использовании, даже если оптимизация уже проведена. Это может быть связано с отсоединенными узлами DOM или данными, хранящимися в памяти, что также называется утечкой памяти.
- Это чаще встречается в одностраничных приложениях.
- Легко возникает при создании ссылок и является частью массива зависимостей эффекта реагирования.
- Исправление этих проблем приведет к тому, что приложения будут занимать огромные объемы памяти, что сделает страницы более отзывчивыми к пользователю.
- Проверьте наличие утечек памяти в инструментах разработки Chrome. Вы будете удивлены результатами. Мы видели внешние библиотеки, которые вызывали утечки памяти.
9. Сохраняйте меньше узлов DOM. Страницы с меньшим количеством узлов DOM, как правило, имеют более высокий рейтинг в SEO. Поэтому удалите лишние теги «div» и невидимые узлы DOM.
10. Храните в магазине приложения только те данные, которые необходимы или будут необходимы. Откажитесь от хранения данных, которые уже кэшированы в браузере, до тех пор, пока не появится конкретный вариант использования.
11. Кэшируйте данные, которые будут пересчитываться при каждом цикле рендеринга. Используйте методы мемоизации.
12. Использование регулирования или устранения дребезга для прослушивателей событий. Это оказывает огромное влияние на отзывчивость страницы.
13. Удалите неиспользуемые переменные состояния хранилища, блоки кода, переменные, типы и ссылки.
14. Удалите лишние действия. Мы видели магазины, имеющие разные типы действий и выполняющие одну и ту же работу.
15. Делайте действия и редукторы магазина краткими
16. Следуйте подходу вычислений по требованию. Пользователи привыкли ждать после выполнения действия.
17. Избегайте вызовов API-интерфейсов DOM GET. Если у вас правильный подход, маловероятно, что вам понадобится доступ к DOM через API.
18. Хешируйте данные, когда можете. Это снижает сложность перемещения до O(1).
19. Если возможно, используйте свойство font-swap как «swap».
20. Избегайте установки значений по умолчанию для переменных деструктурированного объекта. Мы видели случаи, когда пустой массив/объект устанавливался по умолчанию для переменной и эта переменная передавалась как зависимость для эффекта. Это привело к бесконечному вызову useEffect.
Библиография
