Интенсивное чтение "Отладка производительности React"

1. Введение

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

Отладка производительности React — обязательный курс для решения такого рода проблем.Profiling React.js PerformanceЭта статья учится этот навык вместе.

2 Интенсивное чтение

В этом документе представлены многие инструменты и методы тестирования производительности.

React Profiler

ProfilerЭтот API является дополнением к Debug во время выполнения. Вы можете получить информацию об отрисовке компонента через его обратный вызов. Использование выглядит следующим образом:

const Movies = ({ movies, addToQueue }) => (
  <React.Profiler id="Movies" onRender={callback}>
    <div />
  </React.Profiler>
);

function callback(
  id,
  phase,
  actualTime,
  baseTime,
  startTime,
  commitTime,
  interactions
) {}

Этот обратный вызов будет выполняться каждый раз при рендеринге, а рендеринг делится на этапы инициализации и обновления.phaseЧтобы отличить, ниже приводится подробное описание параметров:

id: переданный идентификатор.
фаза: «монтирование» или «обновление», указывающее состояние обновления.
factDuration: Фактическое время рендеринга.
baseDuration: Расчетное время рендеринга без заметок.
startTime: время начала рендеринга.
commitTime: время, когда React зафиксировал обновление.
взаимодействия: что вызвало рендеринг, напримерsetStateили крючки менялись или что-то в этом роде.

Будьте осторожны, чтобы не использовать его слегкаProfilerпроизводительность обнаружения, потому чтоProfilerОн также потребляет производительность сам по себе.

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

Среди них Ranked может отображать результаты, отсортированные по времени рендеринга.Взаимодействия необходимо использовать с Tracing API, о котором будет сказано позже.

Tracing API

использоватьscheduler/tracingкоторый предоставилtraceAPI, мы можем записать трудоемкость от времени, например, как долго требуется, чтобы «Нажмите кнопку« Добавить », чтобы сохранить фильм«:

import { render } from "react-dom";
import { unstable_trace as trace } from "scheduler/tracing";

class MyComponent extends Component {
  addMovieButtonClick = (event) => {
    trace("Add To Movies Queue click", performance.now(), () => {
      this.setState({ itemAddedToQueue: true });
    });
  };
}

В Interations можно увидеть, как используется триггерное действие:

Это действие также может быть рендерингом, например, может быть записан трудоемкий рендеринг ReactDOM:

import { unstable_trace as trace } from "scheduler/tracing";

trace("initial render", performance.now(), () => {
  ReactDom.render(<App />, document.getElementById("app"));
});

Вы даже можете отслеживать прошедшее асинхронное время:

import {
  unstable_trace as trace,
  unstable_wrap as wrap,
} from "scheduler/tracing";

trace("Some event", performance.now(), () => {
  setTimeout(
    wrap(() => {
      // 异步操作
    })
  );
});

имеютProfilerа такжеtraceС помощью этих двух инструментов мы можем отслеживать время рендеринга и время взаимодействия любого элемента, покрывая почти все потребности в мониторинге производительности.

Puppeteer

Мы также можем использовать Puppeteer для автоматизации операций и печати отчетов:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const navigationPromise = page.waitForNavigation();
  await page.goto("https://react-movies-queue.glitch.me/");
  await page.setViewport({ width: 1276, height: 689 });
  await navigationPromise;

  const addMovieToQueueBtn =
    "li:nth-child(3) > .card > .card__info > div > .button";
  await page.waitForSelector(addMovieToQueueBtn);

  // Begin profiling...
  await page.tracing.start({ path: "profile.json" });
  // Click the button
  await page.click(addMovieToQueueBtn);
  // Stop profliling
  await page.tracing.stop();

  await browser.close();
})();

первое использованиеpuppeteerСоздайте браузер, создайте новую страницу и откройте ее.https://react-movies-queue.glitch.me/Этот URL, дождитесь загрузки страницы, используйте селектор DOM, чтобы найти кнопку, используйтеpage.clickAPI имитирует щелчок по этой кнопке и использует ее до и послеpage.tracingЗапишите изменения производительности и загрузите этот файл на панель производительности DevTools, чтобы получить отчет об автоматической проверке производительности:

Эта картинка очень важна и является мощным инструментом для всестороннего анализа эксплуатационных расходов браузера Она разделена на 4 части вверху:

FPS: количество кадров в секунду.Чем выше зеленая вертикальная линия, тем выше FPS.Красная линия указывает на зависание.
CPU: Ресурс CPU, отобразите событие, которое потребляет ресурсы ЦП с диаграммой области.
NET: потребление сети, каждая горизонтальная полоса представляет загрузку ресурса.
HEAP: уровень воды в памяти.Поскольку невозможно увидеть, будет ли переполнение памяти в ближайшее время, обычно используется только для простой проверки того, соответствует ли потребление памяти ожиданиям.Для обнаружения переполнения памяти используется непрерывный мониторинг и отчетность. требуется.

Ниже будет подробная схема Сети, такая как эта картинка:

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

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

ФП: Первая краска, первый рисунок.
FCP: First Contentful Paint, первый контент для рисования.
LCP: Largest Contentful Paint, самый большой рисунок контента.
DCL: содержимое документа загружено, загружается содержимое DOM.

Далее идет расчет потребления JS с использованием графика пламени, который является распространенным инструментом визуализации для анализа производительности. В качестве примера возьмем следующую картинку:

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

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

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

User Timing API

мы также можем использоватьperformance.markПользовательский узел определения производительности:

// Record the time before running a task
performance.mark("Movies:updateStart");
// Do some work

// Record the time after running a task
performance.mark("Movies:updateEnd");

// Measure the difference between the start and end of the task
performance.measure("moviesRender", "Movies:updateStart", "Movies:updateEnd");

Эти узлы могут быть доступны для пользовательского анализа на панели «Производительность», описанной выше.

3 Резюме

Используйте Performance для общего анализа производительности и React Profiler для пользовательского анализа производительности React. Их можно комбинировать для выполнения практически любого теста производительности.

Вообще говоря, React Profiler следует использовать в первую очередь для выявления проблем на уровне React, который является более интуитивным и упрощает поиск проблем. Если что-то выходит за рамки фреймворка React или больше не может быть измерено на уровне детализации компонентов, мы можем вернуться на панель «Производительность» для общего анализа производительности.

Адрес обсуждения:Интенсивное чтение «Отладка производительности React» · Выпуск № 247 · dt-fe/weekly

Если вы хотите принять участие в обсуждении, пожалуйста,кликните сюда, с новыми темами каждую неделю, выходящими по выходным или понедельникам. Интерфейс интенсивного чтения — поможет вам отфильтровать надежный контент.

Сфокусируйся наАккаунт WeChat для интенсивного чтения в интерфейсе

Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)