Практика постеров и настройка производительности, созданные на чистом интерфейсе

внешний интерфейс оптимизация производительности
Практика постеров и настройка производительности, созданные на чистом интерфейсе

1 Предыстория требований

Получив срочный запрос, нам нужно создать соответствующий плакат на основе информации из электронной таблицы Excel и результатов тестов старшеклассников.

Формат данных Excel и плаката, который необходимо создать, следующий:

表格数据

海报样式

В связи с острой необходимостью нет времени привлекать студентов бэкенда, поэтому функции анализа данных и создания плакатов таблиц Excel должны быть разработаны фронтендом.

Необходимо обратить внимание на следующие технические моменты:

  1. Эксель может пройтиsheetjsдля обработкиXLSX.utils.sheet_to_jsonПреобразование данных в формате Excel в данные формата JSON.
  2. Изображение плаката может быть сгенерировано первымhtml2canvasПреобразовать HTML в холст, а затем пройтиcanvas.toBlobполучать.
  3. наконец прошлоJSZipУпакуйте изображения в zip-файл.
  4. Здесь в форме много настраиваемых элементов, поэтому нам нужна функция импорта и экспорта конфигурации.Здесь мы можем использовать FileReader для реализации импорта конфигурации формы,FileReader.readAsTextapiМожет читать содержимое текста, более широкое использование может относиться к MDN FileReader.

  2. Пересекая каждые данные в Excel, шаблон HTML для генерации соответствующего плаката в соответствии с информацией о конфигурации для каждого элемента данных и форм.
  3. Генерируйте изображения на основе шаблонов HTML, а объект данных изображения сохраняется в сжатых пакетах.
  4. После обработки данных в Excel скачайте архив, окончание процесса.

После того, как функция была разработана в соответствии с этим процессом, я использовал 100 таблиц Excel для тестирования на своей машине, и соответствующий сжатый пакет мог быть успешно сгенерирован, и с картинками в сжатом пакете не было проблем.После демонстрации работы одноклассникам , она также выразила удовлетворение.

2 контрольных вопроса

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

网页崩溃

Студенты в компьютерных операциях, использование 15 данных электронной таблицы Excel генерируется плакаты появились нормально, когда данные электронной таблицы Excel увеличились до 20, появились в случае краха страницы, предполагая нехватку памяти.

3 Проанализируйте проблему

3.1 js проблема с памятью

Теперь давайте проанализируем это вместе, в чем проблема?

Первая волна анализа показала, что наиболее вероятным местом ошибки является шаг 3 — наконец, упаковка образа в сжатый пакет через JSZip.

Память, занятая здесь сжатым объектом пакета, не будет освобождена до тех пор, пока данные таблицы Excel не будут обработаны и загружены, и будет продолжать расти.

Так что у нас есть простое решение - субподряд. Загрузите сжатый пакет на обработку, освободите память JSZIP (объект сжатого пакета).

Но все действительно так просто? 20 фотографий данных для расчета размера 1 МБ каждая имеет только 20 МБ, как может привести к сбою страницы?

Гадать на пустом месте бесполезно, в первую очередь мы.

内存增长情况 1.png

ПродолжатьАнализ с помощью инструмента Память браузера.

网页内存快照

Видно, что использование памяти действительно растет и не освобождается, Увеличьте один из них.

快照详情

Какой? Оказалось,system.context? Как фронтенд-разработчик, я считаю, что первая мысль, которая приходит вам в голову, когда вы видите это слово, должна быть связана с контекстом. Проверьте код и найдитеВ коде используется рекурсия, поэтому она требует много памяти., код проблемы здесь отображаться не будет.

После преобразования кода в оператор цикла проверьте его еще раз.

网页内存增长情况 2

Вы можете видеть, что прирост памяти был нормальным. Вы можете попросить операционных студентов пройти тест еще раз.

3.2 Проблемы с DOM

Проблема решается так?

Полный уверенности, я обнаружил, что одноклассники по операции должны протестировать, и результаты были неожиданными. Компьютеры одноклассников по операции по-прежнему не могли обработать более 40 фрагментов данных таблицы Excel, и во время теста возникла проблема. Когда обработка данных достигла определенный этап, он замерзнет.живите долго!

Все стало странно, и мы продолжили наш анализ.

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

В нашем общем процессе есть две точки, где мы работаем с DOM:

  1. Создавайте HTML-шаблоны для соответствующих постеров на основе данных таблицы Excel.
  2. Создание изображений из HTML-шаблонов.

Во-первых, не должно быть проблем с переполнением памяти, потому что мы не добавляем события в HTML-шаблон, а также напрямую перезаписываем последний сгенерированный HTML-шаблон при обработке следующего фрагмента данных, что не приведет к увеличению DOM-узлов. .

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

Согласно документации html2canvas, я установилremoveContainerСвойство сохраняет элемент DOM, который он клонировал при создании объекта холста, и просмотр

DOM 结构

Результат оказался неожиданным, html2canvas полностью клонировал нашу DOM-структуру, помимо целевого узла, он также клонировал корневой узел React, тег скрипта и тег ссылки.

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

ignoreElements

const canvas = await html2canvas(root, {
  imageTimeout: 10000,
  ignoreElements: (ele) => ele.id === 'root' || ele.tagName.toUpperCase() === 'IFRAME' || ele.tagName.toUpperCase() === 'SCRIPT' || ele.tagName.toUpperCase() === 'LINK',
});

После оптимизации позвольте учащимся провести тест.В это время проблема сбоя веб-страницы больше не будет возникать в данных таблицы Excel, обрабатывающих тысячи фрагментов данных.В то же время скорость обработки также значительно улучшена. , а 1000 единиц данных могут быть обработаны в течение 4 минут.

4 Резюме

Возвращаясь к началу, проблема занятости JSZip все еще существует, нам все еще нужно подпаковать, но размер подпакета можно увеличить до 1000 единиц данных.

Но мы видим, что субподряд в первую очередь не поможет, если вы не можете добраться до корня проблемы.

Дисплей веб-страницы "AW, Snap!" Как сделать? Пожалуйста, не волнуйтесь, осторожный анализ, чтобы решить проблему.

公众号链接

Категории