¿Console.log reducirá el rendimiento de ejecución de JavaScript?

99

¿El uso de la función de depuración console.logreducirá el rendimiento de ejecución de JavaScript? ¿Afectará la velocidad de ejecución del script en entornos de producción?

¿Existe algún enfoque para deshabilitar los registros de la consola en entornos de producción desde una única ubicación de configuración?

Sudantha
fuente
Todas las respuestas, hasta ahora, asumen que simplemente está emitiendo mensajes de cadena. ¿Qué pasa con el rendimiento de los objetos de registro, posiblemente con estructuras de objetos grandes? por ejemplo, console.log (largeObj)?
PandaWood
La salida de una cantidad significativa de objetos a la consola puede convertir la carga de una página de 3 segundos en 30 segundos. Solo un ejemplo ...
Andrew
Una simple console.logtoma ~
50

Respuestas:

55

Si va a tener esto en un sitio público o algo así, cualquier persona con poco conocimiento sobre el uso de las herramientas de desarrollo puede leer sus mensajes de depuración. Dependiendo de lo que esté registrando, esto puede no ser un comportamiento deseable.

Uno de los mejores enfoques es incluir el console.logen uno de sus métodos, y donde puede verificar las condiciones y ejecutarlo. En una compilación de producción, puede evitar tener estas funciones. Esta pregunta de Stack Overflow habla en detalle sobre cómo hacer lo mismo usando el compilador Closure .

Entonces, para responder a sus preguntas:

  1. Sí, reducirá la velocidad, aunque solo de forma insignificante.
  2. Pero no lo use, ya que es demasiado fácil para una persona leer sus registros.
  3. Las respuestas a esta pregunta pueden darle pistas sobre cómo eliminarlas de la producción.
Ramesh
fuente
gracias, pero aún envolviendo la conosle.logfunción anulada, ¿no es así?
Sudantha
15
Solo una nota: el uso console.logpara registrar objetos causa pérdida de memoria ya que el navegador retiene la estructura del objeto para permitir a los desarrolladores expandir el registro.
Shamasis Bhattacharya
3
@Gajus Su edición se está discutiendo en Meta
Recursión infinita
8
"Es demasiado fácil para una persona leer sus registros" - ¿Cómo es esto un problema? Es JavaScript, ¡ya tienen acceso completo al código fuente!
Quentin
4
Solo para intervenir: acabo de descubrir que enviar spam al console.log incluso con el mismo texto estático (sin objeto o matriz; literalmente, solo console.log ('prueba') lo haría) también causa un impacto en el rendimiento. Esto me llamó la atención cuando estaba registrando "llamado" dentro de una función que se invocaba en cientos de componentes de React durante las re-renderizaciones. La mera presencia del código de registro provocó un tartamudeo muy notable durante las actualizaciones frecuentes.
Lev
80

En realidad, console.loges mucho más lento que una función vacía. Ejecutar esta prueba jsPerf en mi Chrome 38 da resultados asombrosos:

  • cuando la consola del navegador está cerrada, llamar console.loges aproximadamente 10000 veces más lento que llamar a una función vacía,
  • y cuando la consola está abierta, llamarla es hasta 100 000 veces más lento .

No es que note el retraso en el rendimiento si tiene una cantidad razonable de console.…llamadas que se disparan una vez (cien tomarán 2 ms en mi instalación de Chrome, o 20 ms cuando la consola está abierta). Pero si registra cosas en la consola repetidamente, por ejemplo, conectándolo, requestAnimationFramepuede hacer que las cosas se vuelvan loca.

Actualizar:

En esta prueba también he comprobado la idea de un "registro oculto" personalizado para la producción, que tiene una variable que contiene mensajes de registro, disponible a pedido. Resulta ser

  • aproximadamente 1000 veces más rápido que el nativo console.log,
  • y obviamente 10 000 veces más rápido si el usuario tiene su consola abierta.
tomekwi
fuente
1
Cuando un compilador ve una función vacía, no ejecuta nada, ya que si ve una línea para ejecutar, tendrá que ejecutar la función. el compilador simplemente no ejecuta una función vacía y no utilizada como optimización.
SidOfc
1
@SidneyLiebrand gracias por la información, es bueno saberlo. Los resultados de la segunda prueba se pueden optimizar de la misma manera que console.logsi. Ambos son funciones que producen efectos secundarios.
tomekwi
1
console.logpor sí solo no afecta el rendimiento de una manera que notará a menos que lo vincule a un controlador de desplazamiento / cambio de tamaño. Estos se llaman mucho y si su navegador tiene que enviar texto a la consola como 30 / 60x por segundo, puede ponerse feo. Y luego está ese error de IE que no le permitió tener console.lognada con la consola cerrada :(
SidOfc
1
Tienes toda la razón, también escribí eso en mi respuesta. Como regla general, trato de no tener llamadas a la consola en el código de producción. Pero el rendimiento no es la razón, es más bien porque "es demasiado fácil para un profano leer sus registros", como escribió @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)
casey
12
const DEBUG = true / false
DEBUG && console.log('string')
Sergey Guns
fuente
¡Qué elegante solución!
Systems Rebooter
10

Si crea un acceso directo a la consola en un script central común, por ejemplo:

var con = console;

y luego use con.log ("mensaje") o con.error ("mensaje de error") en todo su código, en producción puede simplemente volver a cablear con en la ubicación principal para:

var con = {
    log: function() {},
    error: function() {},
    debug: function() {}
}
sq2
fuente
16
el camino sucio:console.log = function(){}
br4nnigan
8

¿El uso de la función de depuración console.log reducirá el rendimiento de ejecución de JavaScript? ¿Afectará la velocidad de ejecución del script en entornos de producción?

Por supuesto, console.log()reducirá el rendimiento de su programa ya que requiere tiempo computacional.

¿Existe algún enfoque para deshabilitar los registros de la consola en entornos de producción desde una única ubicación de configuración?

Coloque este código al comienzo de su secuencia de comandos para anular la función estándar console.log por una función vacía.

console.log = function () { };
holydragon
fuente
2
Esta parece ser una de las soluciones más simples para deshabilitar los registros de la consola en el entorno de producción. ¡Preguntándose por qué no tiene más atención! Podemos controlar la definición de esta función vacía bajo una variable que podemos alternar como verdadero / falso dependiendo del entorno en el que estemos trabajando (prod o dev)
Anshuman Manral
2
¡Esta es una respuesta tan brillante! ¡Gracias!
Systems Rebooter
6

Cualquier llamada a función reducirá ligeramente el rendimiento. Pero algunos console.logno deberían tener ningún efecto notable.

Sin embargo, arrojará errores indefinidos en navegadores antiguos que no admiten console

Petah
fuente
3

El impacto en el rendimiento será mínimo, sin embargo, en los navegadores más antiguos, provocará errores de JavaScript si la consola de los navegadores de los usuarios no está abierta log is not a function of undefined. Esto significa que no se ejecutará todo el código JavaScript después de la llamada a console.log.

Puede crear un contenedor para verificar si window.consolees un objeto válido y luego llamar a console.log en el contenedor. Algo simple como esto funcionaría:

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

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

Aquí hay un violín: http://jsfiddle.net/enDDV/

Pablo
fuente
2

Hice esta prueba jsPerf: http://jsperf.com/console-log1337

No parece tardar más que otras llamadas a funciones.

¿Qué pasa con los navegadores que no tienen una API de consola? Si necesita usar console.log para depurar, puede incluir un script en su implementación de producción para anular la API de la consola, como sugiere Paul en su respuesta.

Jørgen
fuente
si puedo seleccionar dos respuestas, esto irá al principio
Sudantha
1
Su prueba no solo agrega una llamada a console.log, sino que también ejecuta la misma operación jquery dos veces. He creado la siguiente revisión de su prueba, espero que ayude: jsperf.com/console-log1337/7 PD: gracias, no sabía nada de jsperf.com :)
dubrox
2
De hecho, parece ser mucho más lento que una llamada de función normal. En un duelo directo los resultados son incomparables: jsperf.com/console-log1337/14
tomekwi
1
Mala respuesta. Ni siquiera remotamente correcto. Los votos positivos ilusorios como @tomekwi demuestra que la diferencia es notable. Yo mismo he hecho varias pruebas del mundo real y puedo decir absolutamente sin la menor sombra de duda que el spam de console.log definitivamente causa un impacto en el rendimiento. Algunos registros aquí y allá cada segundo o dos, no es gran cosa, pero registre algo con frecuencia (en actualizaciones de cuadros, re-renderizaciones de componentes masivos) y la diferencia con y sin console.log es la noche y el día.
Lev
0

Lo hago de esta manera para mantener la firma original de los métodos de la consola. En una ubicación común, cargada antes que cualquier otro JS:

var DEBUG = false; // or true 

Luego a lo largo del código

if (DEBUG) console.log("message", obj, "etc");
if (DEBUG) console.warn("something is not right", obj, "etc");
ow3n
fuente