Генератор сертификатов для студентов: оптимизация скорости работы при пакетной генерации

Интро

Заказчик пришел с просьбой доделать генератор сертификатов. Генератор уже был создан, но работал неоптимально. Нужно было поправить весь флоу выдачи уникальных номеров для студентов, добавить множественный выбор студентов, добавление новых и тд.

На нашей стороне клиентская часть (фронтенд).

Итого, перед командой стояла задача: доработать и оптимизировать генератор сертификатов, который позволяет создавать документы на клиентской части как для одного студента, так и для группы студентов выбранного учебного потока. Основная цель — ускорить работу генератора и улучшить пользовательский опыт при массовой генерации документов.

Стартовые вводные

Генерация сертификатов происходила на клиентской стороне. Пользователь мог выбрать одного или нескольких студентов и инициировать генерацию документов, с последующей отправкой на сервер. Ранее генерация сертификатов проходила без каких-либо индикаций. Экран оператора зависал на несколько минут без признаков жизни. После чего появлялось уведомление о том, что документы сформированы и отправлены. Проблема заключалась в том, что при массовой генерации происходило:

• Множественное обращение к серверу: на каждого студента отправлялся отдельный запрос, хотя большинство данных повторялись.
  
• Полное отсутствие информирования пользователя о процессе генерации. Интерфейс после нажатия кнопки «Отправить документы» зависал на несколько минут, после истечения которых появлялось уведомление «Документы отправлены».
  
• Медленная работа интерфейса из-за повторной отрисовки большого количества Canvas (особенности взаимодействия двух библиотек html2canvas + jsPDF).
  
• Высокая нагрузка на сеть и сервер из-за множественных запросов.
  

План решения включал два этапа, о них далее.

Оптимизация клиент-серверного взаимодействия

Как решали технически:

1. Клиент-серверное взаимодействие:

Кол-во документов = кол-во запросов. Уточнили у бэкендеров, есть ли возможность массовой обработки файлов. Нам ответили «да, а разве сейчас не так отправляется!?».

Решение: реализовали пакетную отправку данных. Теперь один запрос отправляет информацию сразу по всем выбранным студентам. Сервер обрабатывает его единым блоком и возвращает результат за один цикл, с информацией по статусу файлов (записан/перезаписан). Это уменьшило количество запросов в десятки раз и ускорило процесс «оживления» интерфейса.

2. Работа с преобразованием верстки в pdf:

В исходной реализации каждый сертификат отрисовывался отдельно, через html2canvas, что занимало значительное время при большом объёме документов. Плюс каждый Canvas создавался заново, что увеличивало нагрузку на браузер.

Решение:

Переработка html (vue) компонента с обычной версткой на canvas, который один раз инициализируется и далее используется повторно для каждого нового документа.

Минимизация перерисовок за счет передачи полей для заполнения документа по ссылке, что не приводило к ререндеру.

Результат: генерация PDF стала происходить почти мгновенно и без визуальных артефактов, даже при большом количестве студентов.