Кэширование этого ключевого слова увеличивает производительность в конструкторе JS? [Дубликат]

Быстрый ответ

В jQuery (более конкретно на Sizzle) мы используем этот (мастер проверки и открытая скорость / index.html в вашем браузере), который, в свою очередь, использует benchmark.js . Это используется для проверки производительности библиотеки.

Длинный ответ

Если читатель не знает разницы между эталоном, рабочей нагрузкой и профайлерами, сначала прочитайте некоторые основы тестирования производительности на вкладке "readme 1st" section of spec.org . Это касается тестирования системы, но понимание этих основ также поможет провести тестирование JS. Некоторые основные моменты:

Что такое эталон?

Тест является «стандартом измерения или оценки» (Словарь Вебстера II). Компьютерный тест обычно представляет собой компьютерную программу, которая выполняет строго определенный набор операций - рабочую нагрузку - и возвращает некоторую форму результата - метрику - описание способа выполнения тестируемого компьютера. Компьютерные контрольные показатели обычно измеряют скорость: насколько быстро была заполнена рабочая нагрузка; или пропускной способности: сколько единиц рабочей нагрузки за единицу времени было завершено.

Должен ли я тестировать собственное приложение?

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

Если не мое собственное приложение, то что?

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

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

Тестирование производительности JS

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

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

Затем вы можете использовать такие инструменты, как benchmark.js, чтобы помочь вам собирать показатели, обычно скорость или пропускную способность. В Sizzle мы заинтересованы в сравнении того, как исправления или изменения влияют на системную производительность библиотеки.

Если что-то работает очень плохо, следующим шагом будет поиск узких мест.

Как найти узкие места? Profiler

Каков наилучший способ профилировать выполнение javascript?

В настоящее время большинство браузеров выполняют синхронизацию с высоким разрешением в performance.now().

Использование

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Ссылки

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now()
• http://www.w3.org/TR / hr-time / # dom-performance-now

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

Проверка скорости JavaScript

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

JSLitmus - легкий инструмент для создания тестовых тестов ad-hoc для JavaScript

. Изучите производительность между function expression и function constructor:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

То, что я сделал выше, это создать function expression и function constructor выполнение одной операции. Результат выглядит следующим образом:

Результат производительности FireFox

[/g1]

Результат работы IE

[/g2]

Я согласен с тем, что воспринимаемая производительность действительно имеет значение. Но иногда я просто хочу узнать, какой метод делать что-то быстрее. Иногда разница ОГРОМНАЯ и стоит знать.

Вы могли бы просто использовать таймеры javascript. Но я обычно получаю гораздо более последовательные результаты, используя собственный Chrome (теперь также в Firefox и Safari) методы devTool console.time() & amp; console.timeEnd()

Пример того, как я его использую:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

[/g4]

Обновление (4/4/2016):

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

UX Profiler подходит к этой проблеме с точки зрения пользователя. Он группирует все события браузера, сетевую активность и т. Д., Вызванные действием пользователя (щелчок), и учитывает все аспекты, такие как латентность, таймауты и т. Д.

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

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

EDIT: этот ответ теперь составляет 7 лет. В наши дни профилировщик Chrome и другие инструменты универсально доступны и просты в использовании, а также console.time() , console.profile() и performance.now() . Chrome также предоставляет вам представление временной шкалы, которое может показать вам, что убивает вашу частоту кадров, где пользователь может ждать, и т. Д.

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

Некоторые люди предлагают определенные плагины и / или браузеры. Я бы не стал, потому что они действительно действительно полезны для этой платформы; тестовый прогон в Firefox не будет точно переводить на IE7. Учитывая, что 99.999999% сайтов посещают более одного браузера, вам нужно проверить производительность на всех популярных платформах.

Мое предложение состояло в том, чтобы сохранить это в JS. Создайте страницу сравнительного анализа со всем своим JS-тестом и временем выполнения. Вы даже можете получить AJAX-сообщение о результатах, чтобы сохранить его полностью автоматизированным.

Затем просто полоскайте и повторите на разных платформах.

Я считаю, что время выполнения является наилучшей мерой.

Вы можете использовать это: http://getfirebug.com/js.html . Он имеет профилировщик для JavaScript.

Попробуйте jsPerf . Это онлайн-инструмент для работы с javascript для сравнения и сравнения фрагментов кода. Я использую его все время.

Вот простая функция, которая отображает время выполнения переданной функции:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

Вот многоразовый класс для выполнения времени. Пример включен в код:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

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

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

Это хороший способ сбора информации о производительности для конкретной операции.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);

Я обычно просто проверяю производительность JavaScript, как долго работает скрипт. jQuery Lover дал хорошую ссылку для тестирования производительности javascript code , но в статье показано, как проверить, как долго работает ваш javascript-код. Я бы также рекомендовал прочитать статью под названием «5 советов по , улучшающих ваш код jQuery при работе с огромными наборами данных».

Вы можете использовать console.profile в firebug

Золотое правило заключается в том, чтобы НЕ под любыми обстоятельствами блокировать ваш браузер пользователей. После этого я обычно смотрю на время выполнения, за которым следует использование памяти (если вы не делаете что-то сумасшедшее, и в этом случае это может быть более высокий приоритет).