Уменьшит ли console.log производительность выполнения JavaScript?


105

Уменьшит ли использование функции отладки console.logпроизводительность выполнения JavaScript? Повлияет ли это на скорость выполнения скриптов в производственных средах?

Есть ли способ отключить журналы консоли в производственных средах из одного места конфигурации?


Пока все ответы предполагают, что вы просто выводите строковые сообщения. Как насчет производительности объектов журналирования, возможно, с большими структурами объектов? например console.log (largeObj)?
— PandaWood

Вывод значительного количества объектов на консоль может превратить 3-секундную загрузку страницы в 30 секунд. Просто пример ...
— Эндрю

Простой console.log
— дубль

Ответы:


57

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

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

Итак, чтобы ответить на ваши вопросы:

  1. Да, это снизит скорость, но незначительно.
  2. Но не используйте его, так как человеку слишком легко читать ваши журналы.
  3. Ответы на этот вопрос могут дать вам подсказку о том, как удалить их с производства.

спасибо, но все еще обертывание conosle.logбудет по-прежнему попадать в переопределенную функцию, не так ли?
— Sudantha

15
Просто примечание - использование console.logобъектов в журнале вызывает утечку памяти, поскольку браузер сохраняет структуру объекта, чтобы разработчики могли расширять журнал.
— Шамасис Бхаттачарья


9
«человеку слишком легко читать ваши журналы» - Как это проблема? Это JavaScript, у них уже есть полный доступ к исходному коду!
— Квентин

5
Просто для разговора: я только что обнаружил, что спам в console.log даже с тем же статическим текстом (без объекта или массива; буквально просто console.log ('test') будет делать это) также вызывает падение производительности. Это привлекло мое внимание, когда я регистрировал "вызванный" внутри функции, которая вызывалась на сотнях компонентов React во время повторного рендеринга. Простое присутствие кода регистрации вызывало очень заметное заикание во время частых обновлений.
— Лев

84

На самом деле console.logэто намного медленнее, чем пустая функция. Выполнение этого теста jsPerf на моем Chrome 38 дает потрясающие результаты:

  • когда консоль браузера закрыта, вызов console.logпроисходит примерно в 10 000 раз медленнее, чем вызов пустой функции,
  • а когда консоль открыта, вызов происходит в 100 000 раз медленнее .

Не то, чтобы вы заметили отставание в производительности, если у вас есть разумное количество console.…вызовов, запускаемых один раз (сотня займет 2 мс при моей установке Chrome - или 20 мс, когда консоль открыта). Но если вы многократно записываете данные в консоль - например, подключаете их к сети requestAnimationFrame- это может сделать работу некорректной.

Обновить:

В этом тесте я также проверил идею настраиваемого «скрытого журнала» для производства - наличие переменной, которая содержит сообщения журнала, доступные по запросу. Оказывается

  • примерно в 1000 раз быстрее родной console.log,
  • и, очевидно, в 10 000 раз быстрее, если у пользователя открыта консоль.

1
Когда компилятор видит пустую функцию, он ничего не выполняет, поскольку он видит строку для выполнения, ему придется запустить функцию. компилятор просто не запускает пустую неиспользуемую функцию в качестве оптимизации.
— SidOfc

1
@SidneyLiebrand, спасибо за информацию, это хорошо. Результаты второго теста можно как бы оптимизировать console.log. Обе они являются функциями, вызывающими побочные эффекты.
— tomekwi

1
console.logсам по себе на самом деле не влияет на производительность таким образом, который вы заметите, если не привязать его к обработчику прокрутки / изменения размера. Они называются много, и если вашему браузеру нужно отправлять текст на консоль, например, 30/60 раз в секунду, это может стать некрасивым. И еще есть ошибка IE, которая не позволяла вам вообще иметь console.logего с закрытой консолью :(
— SidOfc

1
Вы абсолютно правы - это я тоже написал в своем ответе. Как правило, я стараюсь не использовать консольные вызовы в производственном коде. Но причина не в производительности, а потому, что «неспециалисту слишком легко читать ваши журналы», как написал @Ramesh.
— tomekwi

1
logging-on x 3,179 ops/sec ±2.07% (56 runs sampled) logging-off x 56,058,330 ops/sec ±2.87% (56 runs sampled) logging-off-stringify x 1,812,379 ops/sec ±3.50% (58 runs sampled) log-nothing x 59,509,998 ops/sec ±2.63% (59 runs sampled)
— Кейси


11

Если вы создаете ярлык для консоли в общем основном скрипте, например:

var con = console;

а затем используйте con.log («сообщение») или con.error («сообщение об ошибке») во всем своем коде, при производстве вы можете просто перенаправить con в основном месте на:

var con = {
    log: function() {},
    error: function() {},
    debug: function() {}
}

16
грязный путь:console.log = function(){}
— br4nnigan

8

Будет ли использование функции отладки console.log уменьшать производительность выполнения JavaScript? Повлияет ли это на скорость выполнения скриптов в производственных средах?

Конечно, console.log()это снизит производительность вашей программы, так как требует вычислительного времени.

Есть ли способ отключить журналы консоли в производственных средах из одного места конфигурации?

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

console.log = function () { };

2
Кажется, это одно из самых простых решений для отключения журналов консоли в производственной среде. Интересно, почему ему не уделяется больше внимания! Мы можем контролировать определение этой пустой функции с помощью переменной, которую мы можем переключать как истину / ложь в зависимости от того, над какой средой мы работаем (prod или dev)
— Аншуман Манрал

2
Это такой блестящий ответ! Благодарность!
— Системный ребутер

6

Любой вызов функции немного снизит производительность. Но несколько console.logне должны иметь заметного эффекта.

Однако это вызовет неопределенные ошибки в старых браузерах, которые не поддерживают console


3

Падение производительности будет минимальным, однако в старых браузерах это вызовет ошибки JavaScript, если консоль браузеров пользователей не открыта log is not a function of undefined. Это означает, что весь код JavaScript после вызова console.log не будет выполняться.

Вы можете создать оболочку, чтобы проверить, window.consoleявляется ли объект допустимым, а затем вызвать console.log в оболочке. Что-то простое вроде этого могло бы работать:

window.log = (function(console) {
    var canLog = !!console;
    return function(txt) {
        if(canLog) console.log('log: ' + txt);
    };
})(window.console);

log('my message'); //log: my message

Вот скрипка: http://jsfiddle.net/enDDV/


2

Я сделал этот тест jsPerf: http://jsperf.com/console-log1337

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

А как насчет браузеров, у которых нет консольного API? Если вам нужно использовать console.log для отладки, вы можете включить сценарий в свое производственное развертывание, чтобы переопределить консольный API, как предлагает Пол в своем ответе.


если я смогу выбрать два ответа, это будет наверху
— Суданта

1
Ваш тест не только добавляет вызов console.log, но и дважды выполняет одну и ту же операцию jquery. Я создал следующую версию вашего теста, надеюсь, это поможет: jsperf.com/console-log1337/7 PS: спасибо, я не знал о jsperf.com :)
— dubrox

2
На самом деле он кажется намного медленнее, чем обычный вызов функции. В прямом поединке результаты несопоставимы: jsperf.com/console-log1337/14
— tomekwi 05

1
Плохой ответ. Даже отдаленно не верный. Принятие желаемого за действительное, поскольку @tomekwi демонстрирует заметную разницу. Я сам провел несколько тестов в реальных условиях и могу абсолютно без тени сомнения сказать, что спам console.log определенно снижает производительность. Несколько журналов здесь и там каждую секунду или две, ничего страшного, но часто регистрируйте что-то (обновления кадров, повторная визуализация массивных компонентов), а разница с console.log и без него - ночь и день.
— Лев

1

Я делаю это таким образом, чтобы сохранить исходную сигнатуру методов консоли. В общем месте, загруженном перед любым другим JS:

var DEBUG = false; // or true 

Затем во всем коде

if (DEBUG) console.log("message", obj, "etc");
if (DEBUG) console.warn("something is not right", obj, "etc");
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.