Как console.log
влияет на производительность вашего приложения
Влияет ли console.log
на производительность?
К сожалению, ответ положительный, и это может увеличить время загрузки по сравнению с функцией без console.log
. Мы можем проверить это через console.time
в этом примере:
Предположим, у нас есть два файла HTML, один из них:
<!DOCTYPE html> <html> <script> console.time('console.log performance test') function performanceTest(){ let counter = 0 for(let i = 0; i <= 100000; i++){ counter += 1 } return counter } performanceTest() console.timeEnd('console.log performance test') </script> <body> <div class="testContainer">This is a js console.log performance test</div> </body> </html>
Второй:
<!DOCTYPE html> <html> <script> console.time('console.log performance test') function performanceTest(){ let counter = 0 for(let i = 0; i <= 100000; i++){ counter += 1 console.log(counter) // This is the only difference between these two files } return counter } performanceTest() console.timeEnd('console.log performance test') </script> <body> <div class="testContainer">This is a js console.log performance test</div> </body> </html>
Единственная разница в том, что во втором файле HTML есть console.log(counter)
для вывода переменной `counter` в веб-консоль.
После запуска двух файлов мы можем получить такой результат:
Для первого HTML:
console.log performance test: 0.76416015625 ms
Для второго:
console.log performance test: 988.362060546875 ms
Время выполнения может отличаться на разных машинах, веб-браузерах и т. д. Но первое время выполнения примерно в 1000 раз быстрее, чем второе.
Исходя из этого, мы можем сделать вывод, что console.log
действительно влияют на производительность вашего кода.
Почему это происходит?
Когда объект передается в качестве аргумента функции console.log
, он сначала преобразуется в строку с помощью процесса, называемого сериализацией, а затем отображается в консоли. Этот процесс сериализации может потреблять значительный объем памяти, особенно при работе с большими или сложными объектами.
Процесс сериализации включает преобразование объекта в строковое представление, которое можно вывести на консоль. Обычно это включает в себя создание новой строки в памяти и копирование данных из объекта в строку. Для больших или сложных объектов может потребоваться значительный объем памяти.
В дополнение к памяти, используемой для сериализации, выходные данные console.log
также могут потреблять память, особенно если вы регистрируете большое количество объектов или строк. Каждый оператор журнала создает новую строку вывода в консоли, которая со временем может накапливаться и потреблять память.
Мы можем проверить это на том же примере, просто немного изменив код javascript, для javascript есть API производительности памяти, и мы можем использовать его для оценки памяти, используемой console.log
:
function performanceTest(){ let counter = 0 for(let i = 0; i <= 100000; i++){ counter += 1 // console.log(counter) } return counter } // Log the memory usage before the call const startMemory = performance.memory.usedJSHeapSize; // Call console.log with a large number of object performanceTest(); // Log the memory usage after the call const endMemory = performance.memory.usedJSHeapSize; // Calculate the approximate memory used by the console.log call const logMemory = endMemory - startMemory; console.log(logMemory)
После выполнения приведенного выше кода функция без console.log
занимала 0 байт памяти, а функция с console.log
— 1818704 байт. И это причина того, как console.log
замедляет работу приложения.
Как легко скрыть это с помощью кода?
При разработке рекомендуется ограничить использование console.log
до минимума, даже если это может быть полезно для целей отладки. Однако крайне важно избегать его использования в рабочем режиме или на рабочем сервере, поскольку это может представлять несколько рисков. Как упоминалось ранее, console.log
может замедлить работу вашего приложения, потреблять больше памяти и увеличивать необходимую вычислительную мощность. Кроме того, он потенциально может раскрывать важную информацию о вашем приложении, что делает его уязвимым для угроз безопасности.
Хорошая новость заключается в том, что есть относительно простой способ удалить все операторы console.log
из вашего проекта без необходимости удалять их по одному.
Вы можете создать файл .env
в корне вашей программы и поместить в него этот код:
if (env === 'production') { console.log = function () {}; }
Этот код означает, что если среда производственная, то все функции console.log будут пустыми функциями; при этом если не в продакшене, то все console.log все равно работает.
Спасибо за прочтение!