Различная производительность Javascript на разных рабочий примерх и самом Chrome
Я очень новичок в Javascript из C#. Сегодня я провел очень простой тест производительности с JS на нескольких рабочий примерх, чтобы увидеть, насколько производительность соответствует производительности C#.
К моему удивлению, следующий код работает с разной производительностью на разных рабочий примерх!
var start = performance.now();
var iterations = 100000000;
for (var i = 0; i < iterations; i++)
{
var j = i * i;
}
var end = performance.now();
var time = end - start;
alert('Execution time: ' + time);
https://jsfiddle.net/sfcu2vo6/4/
На большинстве веб-сайтов это занимает около 3 секунд, но на Jsfiddle это занимает около 80 мс!
В чем секрет?
Обновлять
На следующем этапе я написал тот же код в html-файле и сам выполнил его в Chrome.
<html>
<head></head>
<body>
<script>
var start = performance.now();
var iterations = 100000000;
for (var i = 0; i < iterations; i++)
{
var j = i * i;
}
var end = performance.now();
var time = end - start;
alert('Execution time: ' + time);
</script>
</body>
</html>
И это занимает больше 3-х секунд! Серьезно, почему JsFiddle быстрее?
Обновление 2
Стало еще интереснее! Я сохранил как мой .htm файл с этим кодом внутри под другим именем на моем рабочем столе! Сейчас он работает около 80 мс, как рабочий пример! Другой с точно таким же кодом работает, как и другие скрипки, примерно за 3 секунды! Я совсем запуталась! Может кто-нибудь попробовать это?
Обновление 3
Хорошо! Мне полегчало! Причина быстроты заключается в том, что код помещается в window.onload = function() {. Будучи абсолютным новичком, я совершил ошибку очень новичка!
@Bergi Хорошо! Это печальные новости! :( Вы имеете в виду, что на самом деле производительность - это та, которую показывают другие скрипки, верно? JsFiddle игнорирует часть var j = i * i, и поэтому она быстрее?
@Bergi Я снова обновил свой ответ! Очень смущенный.
Нет, я не знаю, почему это работает по-другому. Предполагая, что среда такая же (как и для ваших двух html-файлов), оптимизатор должен влиять на оба в одинаковой степени.
@Bergi Я совершил глупую ошибку! Второй был внутри window.onload = function() {, поэтому он и работает быстрее! Я думаю, что JsFiddle тоже делает что-то подобное, а другие консоли этого не делают!
Да, возможно, оптимизатор не запускает код, который выполняется сразу при запуске. Однако это не объясняет "Я сохранил как мой файл .htm с этим кодом внутри под другим именем [и теперь он работает по-другому".
@Bergi Кажется, я немного изменил его, добавив этот window.onload, и забыл его! Прости!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы возьмете трассировку в Вкладка производительности Chrome во время выполнения этого кода, вы увидите, что большая часть времени тратится на пакеты кода es6console.com, а не на вашу функцию.
Я не вдавался в подробности, что они делают, но, возможно, это связано с тем, что es6console транспилирует код с помощью Babel. В общем, лучше не полагаться на скрипки для тестирования производительности, поскольку есть несколько способов добавить дополнительные накладные расходы поверх вашего кода.
Спасибо, Joru, ближе к истине этот mes JsFiddle?
Я верю в это, но для проверки истинного времени выполнения вы всегда можете создать пустую html-страницу, на которой будет только ваш код и ничего больше.
На самом деле производительность лучше, когда код запускается внутри window.onload = function() {. Некоторые из этих скрипок это делают, а некоторые нет. Это было причиной плохой работы.
Это может обойти некоторые накладные расходы, которые они вносят в некоторых случаях, но это не тот случай, когда код всегда будет работать быстрее в функции загрузки.
Заметьте, что такой микробенчмарк в любом случае обречен. Хороший оптимизирующий компилятор полностью отбросит цикл без операции.