Деловая сцена
Причина этого в том, что в нашей WMS системе есть функция пакетной печати.Сегодня склад отвечает, что первая скорость печати около 2с, но потом с каждым разом все медленнее и медленнее, а следующая страница в основном застревает .
С этой точки зрения производительности эта проблема в основном может быть определена как проблема с производительностью, а не как исключение, которое может быть перехвачено с помощью try...catch.
На ум приходят два решения:
- Просмотрите соответствующий код построчно, консоль + отладчик для пошагового устранения проблемы.
- Используйте встроенные инструменты профилирования Chrome, чтобы найти проблему.
Я не смог найти ничего, чтобы использовать эту возможность, чтобы попрактиковаться в некоторых функциях, чтобы найти проблему, на этот раз с реальными бизнес-сценариями, решительное желание иметь возможность точно найти второе решение проблемы.
Утечка памяти?
С точки зрения производительности создается впечатление, что часть утечки памяти возникает каждый раз при пакетной печати, а затем соотношение памяти становится все выше и выше, что приводит к зависанию браузера.
В настоящее время вам нужно использовать функцию памяти Chrome для подсчета соотношения памяти. Выберите в разделе «Память»Take heap snapshop, после завершения анализа можно увидеть соотношение памяти различных объектов на текущей странице. В настоящее время мне не нужно обращать внимание на детали.Мне нужно только обратить внимание на общую память страницы.После завершения каждой пакетной печати я пересчитываю память, занимаемую страницей.Его можно обнаружил, что использование памяти немного увеличивается каждый раз, но это определенно не приведет к зависанию страницы. Пока что проблему, вызванную утечкой памяти, можно исключить.
Анализ с временной шкалой
После исключения проблемы утечки памяти причина, по которой я могу думать о зависании страницы, заключается в том, что время выполнения сценария JS слишком велико. Поскольку рендеринг браузера является однопоточным, если текущий браузер выполняет вычисления сценария JS, то поток пользовательского интерфейса не может одновременно выполнять изменения рендеринга во время этого процесса, поэтому кажется, что страница зависла.
В настоящее время вам необходимо использовать инструмент анализа временной шкалы Chrome (измененный на «Производительность» в новой версии Chrome), чтобы просмотреть продолжительность каждого вызова функции, чтобы найти конкретную рассматриваемую функцию.
нажмитеrecordПосле нажатия кнопки несколько раз вызовите функцию пакетной печати, чтобы закончить запись. Результаты анализа, показанные на рисунке, получены:
На рисунке хорошо видно, что время от первой печати до третьей печати сильно увеличивается, где желтая часть представляет время выполнения скрипта, а фиолетовая часть представляет время рендеринга. Увеличение времени в основном вызвано временем выполнения скрипта.В настоящее время необходимо определить, какая функция вызывает увеличение времени выполнения скрипта.
В это время вы можете просмотреть часть графика пламени. Абсцисса представляет время потребления, а ордината - отношение стека вызовов. Верхний стек вызывает нижний стек. Я искал самый внутренний вызов функции сверху вниз и обнаружил, что функция, которая вызвала увеличение затрат времени,JsBarcode, функция, которая генерирует штрих-коды.
Чтобы проверить этот вывод, закомментируйте эту функцию в коде и повторно выполните анализ временной шкалы. Получите результаты анализа, как показано на рисунке:
Видно, что проблема увеличения времени, вызванная выполнением скрипта, было решено, но время рендеринга все еще увеличивается с каждой печатью. В это время мы начинаем анализировать проблему рендеринга. Глядя на детали раздела рендеринга, вы можете увидеть треугольник в правом верхнем углу, что означает, что здесь есть исключение, и Chrome дает соответствующее предупреждение (принудительное отражение):
То есть интерфейс принудительно перерисовывается, но я так и не понял зачем перерисовывается страница.Тут мощный Хром напрямую дает фрагмент кода который влияет на отрисовку.Файл ширины полосы прокрутки это инструментальная функция элемента пользовательского интерфейса.
В это время проверьте ссылку на этот файл в исходном коде element-ui и обнаружите, что на этот файл есть ссылка как в табличном компоненте, так и в компоненте окна сообщения, используемом на текущей странице. Компонент таблицы вызовет эту функцию при обновлении данных списка, а окно сообщения вызовет эту функцию при появлении всплывающего окна.
Чтобы проверить эту догадку, закомментируйте код обновления списка и всплывающего окна, повторно используйте анализ временной шкалы и обнаружите, что только что треугольник исчез, а проблема в том, что страница в это время перерисовывается. также встречается.
На данный момент две проблемы, которые увеличивают время печати: 1. Выполнение скрипта 2. Отрисовка страницы все было обнаружено, но бизнес-код, вызвавший проблему, не был изменен! Вот почему функция отрисовки штрих-кода и перерисовки страницы выполняется все дольше и дольше?
Решать проблему
Проблема была проанализирована, и легко думать о единственном релевантном коде операции DOM в этой части функции.Каждый раз, когда вы печатаете курьерскую записку, она будет добавлять к телу секцию DOM (для того, чтобы нарисовать QR-код и преобразовать холст в экспорт.картинку), но не стал удалять этот избыточный DOM после каждого appendChild (escape.
При откате измененного кода отладчика добавьте операцию removeChild. Повторите анализ временной шкалы, и вы увидите, что три времени печати совпадают. Завтра позволь брату QA протестировать его, и ты сможешь выйти в интернет~
Суммировать
В конце концов, ошибка относительно низкого уровня, но эта практика в основном определяет проблему с помощью мощного инструмента анализа производительности Chrome, хотя проблема может быть обнаружена в конце, если вы используете схему 1 для просмотра кода для исследования. Однако вполне возможно, что при достаточно сложном бизнес-коде и глубоком уровне вызова функций эффективность просмотра кода будет гораздо менее эффективной, чем использование анализа временной шкалы.
Сегодня я прослушал десятку лучших школ облачной музыки, написал блог и вдруг захотел прочитать стихотворение.
author by yeomanyang