Оптимизация производительности внешнего интерфейса "1" – отладка производительности страницы производительности Chrome.

предисловие

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

performancetimeline

существуетChromeМы открытыChromeПанель отладки, введитеperformanceинтерфейс. Как показано ниже, выполните шаги, чтобы

пожалуйста, объясни: Шаг 2:screenshotsВаши снимки экрана будут генерировать соответствующие интуитивно понятные снимки экрана. Шаг четвертый: аналоговыйCPUскорость, вам удобнее воспроизвести проблему, если4x slowdownНет, вы можете выбрать6x slowdown

Мы видим, что в левом верхнем углу есть несколько важных кнопок, которые работают следующим образом:

Нажимаем перезаписать и появится:

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

Давайте посмотрим, какие части:

• первая часть:controls, описано выше
• Вторая часть: важные параметры, мы называем эту частьOverviewпанель, мы можем видетьFPS,CPU,NETИзменения при загрузке страницы.
  1. FPS: чем выше рамка в секунду, чем выше зеленая вертикальная линия,FPS60
  2. CPU: CPUресурс
  3. NET
• Часть 3: График пламени

1. Горизонтальная ось представляет время загрузки
2. Вертикальная ось представляет порядок выполнения событий (потоков), от выполнения выше к следующему, мы должны обратить особое внимание на часть линии красного треугольника.

• четвертая часть:Summaryраздел, вы можете увидетьCPUраспределение ресурсов в , например, на следующем рисункеRendering(рендеринг) составляет большую долю

Советы по использованию: Вторая, третья и четвертая части связаны между собой.Например, если вы выберете определенную часть графика пламени, следующееSummaryОтобразится сводка по этому разделу.

Используйте производительность для обнаружения проблем с производительностью

Выше находится краткое введение.Performance, После того, как мы получим данные, как их проанализировать?

Конкретные шаги заключаются в следующем:

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

Заключение

Выше мы только что представили, как найти проблемы с производительностью, как оптимизировать, это большая проблема, далее мы будем медленно подводить итоги в этой серии!