Профилирование JS:
увидеть самое важное и не утонуть в море чисел

О себе

Я профессионально занимаюсь анализом и улучшением производительности страницы поиска в Яндексе (Search Engine Result Page, он же SERP или просто серп).

• 280 млн. запросов в сутки (по данным Википедии)
• Если замедлим запрос на 1 миллисекунду...
• ... то украдём более трёх суток из жизни пользователей

https://ru.wikipedia.org/wiki/Яндекс#Статистика_и_финансовые_показатели

Профилирование: высокий порог входа

1. Запустить профайлер в нужное время
2. Запустить профайлер для нужного кода
3. Разобраться в полученных результатах

О чём я хочу рассказать

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

Если у меня
React

Сборки React DOM

• react-dom.production.min.js
• react-dom.development.js
• react-dom.profiling.min.js

https://github.com/facebook/react/blob/master/packages/react-dom

Профилирование компонентов React

• Development-сборка React DOM (react-dom.development.js)
• Статья на reactjs.org о профилировании компонентов React в Chrome
• ReactDebugFiberPerf.js (собирается в react-dom.development.js)

Если у меня
нет React

Несколько особенностей

• console.timeEnd() пишет результат в консоль — это может замедлить код:

  	консоль закрыта	консоль открыта
  console.timeStamp	2.8 Mops/s 0.35 μs	2.8 Mops/s 0.35 μs
  console.time..timeEnd	40 Kops/s 25 μs	150-200 ops/s 5-7 ms

  https://jsperf.com/console-timestamp
• performance.* пишет в performance entries — надо чистить,
  чтобы не ел память:
  performance.clearMarks(markName); performance.clearMeasures(label);

Материалы

• User Timing API
• Chrome Console API Reference

Если я
в танке в Node.js

Node.js Profiler

В инспекторе для Node.js нет вкладки Performance, есть только Profiler

Chrome: изучение участка кода

1. Оборачиваем код

console.profile();
// код
console.profileEnd();
        

Материалы

• Описание формата Profile
• Исходники V8 Inspector
• Chrome Console API Reference

Хочу свои таймлайны

1a. Оборачиваем код в замеры времени в Node.js

// точка отсчёта - загрузка модуля
const initialOffset = process.hrtime(), events = [];
// время, прошедшее с момента initialOffset
let start = process.hrtime(initialOffset);
// код
let end = process.hrtime(initialOffset);
events.push(['имя метода', start, end]);
        

1b. Оборачиваем код в замеры времени в браузере

const events = [];
// точка отсчёта - начало навигации
let start = performance.now();
// код
let end = performance.now();
events.push(['имя метода', start, end]);
        

2. Собираем данные и сохраняем JSON

fs.writeFileSync(
    `timeline-${Date.now()}.json`,
    JSON.stringify(events)
);
    

Хочу таймлайны, не хочу писать код

1. Собираем данные в формате Trace Event

const traceEvents = [];
traceEvents.push({
    pid: 1, tid: 1, ph: 'X', name: 'имя метода',
    ts: startMicroseconds, dur: durationMicroseconds,
    args: { // любая детальная информация
        name: 'имя метода',
        ms: durationMicroseconds / 1000
    }
});
        

2. Сохраняем в JSON

fs.writeFileSync(
    `trace-${Date.now()}.json`,
    JSON.stringify({
        traceEvents,
        metaInfoCreated: new Date()
    })
);
        

3. Открываем в chrome://tracing

Другие варианты названия: browser://tracing, about:tracing

Материалы

• Trace Event Format
• Understanding about:tracing results
• Profiling with the about:tracing
• Standalone trace viewer

Заключение

• Анализировать картинки легче, чем числа
• В инспекторе для Chrome и Node.js можно визуализировать результаты профилирования любого фреймворка
• Если этого недостаточно — есть экспорт JSON и универсальные инструменты наподобие Google Charts и chrome://tracing