ИССЛЕДОВАНИЕ ОПТИМИЗАЦИИ РЕНДЕРИНГА БОЛЬШИХ СПИСКОВ В REACTJS

Аннотация

Цели. На сегодняшний день роль интернета в нашей жизни неуклонно растет, это связано с тем, что людям удобнее производить различные операции в интернете. Такая тенденция ведет к росту конкуренции среди сайтов, чтобы выигрывать в ней необходимо не только предлагать качественные товары и услуги, но и иметь удобный в использовании сайт. Удобство заключается в его производительности, однако трудно добиться хорошей производительности, если необходимо отображать большие списки. Цель работы – сравнить метрики оптимизации веб-приложения, управляя количеством элементов списка необходимых для рендеринга.

Методы. Предлагается исследовать работу веб-приложений, построенных с помощью фреймворка React, при использовании методов управления количеством элементов списка необходимых для рендеринга VirtualScroll, Lazy-loading, Partition loading. Экспериментальные результаты получены путём использования инструментов разработчика, предоставляемых Google, в частности вкладки Performance.

Результаты. Представлено описание метрик оптимизации, методов оптимизации, приведены экспериментальные результаты и их сравнение.

Выводы. Проведенные исследования позволяют говорить о том, что VirtualScroll, Lazy-loading, Partition loading действительно влияют на оптимизацию веб-приложения, которое содержит большие списки элементов. С помощью выбранных методов удалось сократить время рендеринга с 647 мс до 162 мс при общем объеме списка в 1825 элементов. Улучшились значения таких основных метрик Core Web Vitals, как FCP (с 3,48 с до 661,07 мс), LCP (с 9,21 с до 5,56 с), CLS (с 0,004 до 0), TBT (с 940 мс до 190 мс).