Улучшение результатов анализа производительности JavaScript с помощью пользовательских меток

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

Работая над продвинутым кодом JavaScript, таким как 3D-движок, вы можете спросить себя, что вы можете сделать, чтобы оптимизировать производительность, и сколько времени вам нужно потратить на работу с конкретными фрагментами кода. В этом учебном пособии я расскажу о нескольких инструментах, которые дают представление о том, как работает ваш код, и покажу вам, как максимально эффективно использовать пользовательские отметки на графике памяти для анализа вашей производительности.

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

Не стесняйтесь пинговать меня в Twitter, если вы хотите обсудить эту статью!

Нужен профилировщик?

На ум приходит интегрированный профилировщик, который вы можете найти с помощью новых обновлений для Internet Explorer F12 Dev Tools , улучшений, которые также будут доступны для Project Spartan . Конечно, вы можете использовать любые подобные инструменты, которые вы предпочитаете, на вашем устройстве разработчика. Если вы хотите попробовать это на Android, iOS или Mac OS, вы также можете использовать remote.IE, чтобы запустить экземпляр предварительного просмотра Windows 10 Technical в считанные минуты. Затем откройте Internet Explorer «e», которого вы избегали (это временная клиентская оболочка, для которой настроен новый механизм рендеринга Project Spartan), нажмите «F12», и теперь вы можете увидеть, что я покажу вам:

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

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

console.time

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

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

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

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

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

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

 performance.mark("Begin 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");

 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);
  }
};