Работая над некоторым продвинутым кодом JavaScript, таким как 3d-движок, вы можете спросить себя, что вы можете оптимизировать и сколько времени вы тратите на какие-то конкретные фрагменты кода.

Не стесняйтесь пинговать меня в Твиттере (@deltakosh), если вы хотите обсудить эту статью!

Не могу дождаться, чтобы увидеть, о чем эта статья? Смотрите это видео:

Первая идея, которая приходит на ум, — это встроенный профилировщик, который можно найти с помощью инструментов F12.

Обратите внимание, что с новыми инструментами F12, которые мы поставили с  Windows 10 Technical preview , профилировщик теперь является частью окна реагирования пользовательского интерфейса (кстати, мне действительно нравится новый дизайн…):

Давайте рассмотрим другие варианты, которые могут дать вам более полное представление о том, как работает ваш код.

console.time

Вам просто нужно вызвать  console.time ()  и  console.timeEnd ()  вокруг фрагмента кода, который вы хотите оценить. Результатом является строка в вашей консоли, отображающая время, прошедшее между  time  и  timeEnd .

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

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

Это, например, то, что я сделал для  Babylon.js :

console.time("Active meshes evaluation");
this._evaluateActiveMeshes();
console.timeEnd("Active meshes evaluation");

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

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

Даже если эта функция сама по себе не является стандартной функцией, совместимость браузера довольно велика. Chrome, Firefox, IE, Opera и Safari поддерживают это.

объект производительности

Если вам нужно что-то более наглядное, вы также можете использовать объект производительности ( рекомендация W3C  /  Можно ли использовать? ). Среди  других интересных функций, которые помогут вам измерить производительность веб-страницы, вы можете найти функцию под названием  mark,  которая может генерировать метку пользователя.

Пользовательский знак — это связь имени со значением времени. Вы можете измерить части кода с помощью этого API, чтобы получить точные значения. Вы можете найти отличную статью об этом API Аурелио де Роса на  Sitepoint .

Сегодня идея состоит в том, чтобы использовать этот API для визуализации определенных пользовательских отметок на экране Отзывчивости пользовательского интерфейса:

Этот инструмент позволяет вам записывать сеанс и анализировать использование процессора:

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

Выбранный кадр будет отфильтрован:

Благодаря новому инструменту F12 вы можете переключиться на стеки вызовов JavaScript, чтобы получить более подробную информацию о том, что произошло во время этого события:

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

И вот тут пользовательские отметки входят в игру  (Go Hawks!). Мы можем добавить свои собственные  маркеры,  а затем разбить фрейм и посмотреть, какая функция является более дорогой и так далее.

performance.mark("Begin of something…just now!");

Кроме того, когда вы создаете свой собственный фреймворк, очень удобно иметь возможность оборудовать ваш код  измерениями :

performance.mark("Active meshes evaluation-Begin");
this._evaluateActiveMeshes();
performance.mark("Active meshes evaluation-End");
performance.measure("Active meshes evaluation", "Active meshes evaluation-Begin", "Active meshes evaluation-End");

Давайте посмотрим, что вы можете получить с  babylon.js babylon.js,  например, со   сценой «V8» :

Вы можете попросить  babylon.js создать  пользовательские метки и показатели для вас, используя  слой отладки :

Затем, используя анализатор отклика пользовательского интерфейса, вы можете получить этот экран:

Вы можете видеть, что пользовательские метки отображаются поверх самого события (оранжевые треугольники), а также сегментов для каждой меры:

Тогда очень легко определить, что, например, фазы [Render target] и [Main render] являются самыми дорогими.

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

Tools._StartUserMark = function (counterName, condition) {
if (typeof condition === "undefined") { condition = true; }
if (!condition || !Tools._performance.mark) {
return;
}
Tools._performance.mark(counterName + "-Begin");
};




Tools._EndUserMark = function (counterName, condition) {
if (typeof condition === "undefined") { condition = true; }
if (!condition || !Tools._performance.mark) {
return;
}
Tools._performance.mark(counterName + "-End");
Tools._performance.measure(counterName, counterName + "-Begin", counterName + "-End");
};




Tools._StartPerformanceConsole = function (counterName, condition) {
if (typeof condition === "undefined") { condition = true; }
if (!condition) {
return;
}




Tools._StartUserMark(counterName, condition);




if (console.time) {
console.time(counterName);
}
};




Tools._EndPerformanceConsole = function (counterName, condition) {
if (typeof condition === "undefined") { condition = true; }
if (!condition) {
return;
}




Tools._EndUserMark(counterName, condition);




if (console.time) {
console.timeEnd(counterName);
}
};

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