Как 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 все равно работает.

Спасибо за прочтение!