Console.log réduira-t-il les performances d'exécution de JavaScript?

99

Utilisera la fonction de débogage console.log réduira-t-elle les performances d'exécution de JavaScript? Cela affectera-t-il la vitesse d'exécution des scripts dans les environnements de production?

Existe-t-il une approche pour désactiver les journaux de console dans les environnements de production à partir d'un emplacement de configuration unique?

Sudantha
la source
Toutes les réponses, jusqu'à présent, supposent que vous produisez simplement des messages sous forme de chaîne. Qu'en est-il des performances des objets de journalisation, avec éventuellement des structures d'objets volumineuses? par exemple console.log (largeObj)?
PandaWood
La sortie d'un nombre important d'objets sur la console peut transformer le chargement de la page de 3 secondes en 30 secondes. Juste un exemple ...
Andrew
Un simple console.logprend ~ 50ms
Pedram marandi

Réponses:

55

Si vous allez avoir ceci sur un site public ou quelque chose comme ça, toute personne ayant peu de connaissances sur l'utilisation des outils de développement peut lire vos messages de débogage. Selon ce que vous enregistrez, cela peut ne pas être un comportement souhaitable.

L'une des meilleures approches consiste à intégrer l' console.logune de vos méthodes et à vérifier les conditions et à l'exécuter. Dans une version de production, vous pouvez éviter d'avoir ces fonctions. Cette question Stack Overflow explique en détail comment faire de même à l'aide du compilateur Closure .

Alors, pour répondre à vos questions:

  1. Oui, cela réduira la vitesse, mais de manière négligeable.
  2. Mais ne l'utilisez pas car il est trop facile pour une personne de lire vos journaux.
  3. Les réponses à cette question peuvent vous donner des conseils sur la façon de les retirer de la production.
Ramesh
la source
merci mais toujours emballer le conosle.logfera toujours un coup à la fonction remplacée n'est-ce pas?
Sudantha du
15
Juste une note - l'utilisation console.logde consigner des objets provoque une fuite de mémoire car le navigateur conserve la structure de l'objet pour permettre aux développeurs d'étendre le journal.
Shamasis Bhattacharya
8
"c'est trop facile pour une personne de lire vos journaux" - En quoi est-ce un problème? C'est du JavaScript, ils ont déjà un accès complet au code source!
Quentin
4
Juste pour ajouter: je viens de découvrir que l'envoi de spam dans console.log même avec le même texte statique (pas d'objet ou de tableau; littéralement, juste console.log ('test') le ferait) provoque également une baisse des performances. Cela a attiré mon attention alors que je consignais "appelé" dans une fonction qui a été invoquée sur des centaines de composants React lors des re-rendus. La simple présence du code de journalisation provoquait un bégaiement très perceptible lors des mises à jour fréquentes.
Lev
80

En fait, console.logc'est beaucoup plus lent qu'une fonction vide. L'exécution de ce test jsPerf sur mon Chrome 38 donne des résultats étonnants:

  • lorsque la console du navigateur est fermée, l'appel console.logest environ 10000 fois plus lent que l'appel d'une fonction vide,
  • et lorsque la console est ouverte, l'appel est jusqu'à 100 000 fois plus lent .

Non pas que vous remarquiez le décalage des performances si vous avez un nombre raisonnable d' console.…appels qui se déclenchent une fois (une centaine prendra 2 ms sur mon installation de Chrome - ou 20 ms lorsque la console est ouverte). Mais si vous enregistrez des choses sur la console à plusieurs reprises - par exemple, en requestAnimationFrameles connectant - cela peut rendre les choses saccadées.

Mettre à jour:

Dans ce test, j'ai également vérifié l'idée d'un «journal caché» personnalisé pour la production - ayant une variable qui contient les messages de journal, disponibles sur demande. Il s'avère être

  • environ 1 000 fois plus rapide que le natifconsole.log ,
  • et évidemment 10 000 fois plus vite si l'utilisateur a sa console ouverte.
Tomekwi
la source
1
Lorsqu'un compilateur voit une fonction vide, il n'exécute rien car il voit une ligne à exécuter, il devra exécuter la fonction. le compilateur n'exécute tout simplement pas une fonction vide et inutilisée comme optimisation.
SidOfc
1
@SidneyLiebrand merci pour l'info, c'est bon à savoir. Les résultats du deuxième test peuvent être optimisés de la même manière que console.logsi. Les deux sont des fonctions qui produisent des effets secondaires.
tomekwi
1
console.logen soi, n'a pas vraiment d'impact sur les performances d'une manière que vous remarquerez à moins que vous ne le liez à un gestionnaire de défilement / redimensionnement. Ceux-ci sont appelés beaucoup et si votre navigateur doit envoyer du texte à la console 30 / 60x par seconde, cela peut devenir moche. Et puis il y a ce bug IE qui ne vous permettait pas d'avoir console.logdu tout avec la console fermée :(
SidOfc
1
Vous avez tout à fait raison - je l'ai également écrit dans ma réponse. En règle générale, j'essaie de ne pas avoir d'appels de console dans le code de production. Mais les performances ne sont pas la raison - c'est plutôt parce que «c'est trop facile pour un profane de lire vos journaux» comme l'a écrit @Ramesh.
tomekwi le
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
la source
quelle solution élégante!
Systems Rebooter
10

Si vous créez un raccourci vers la console dans un script de base commun, par exemple:

var con = console;

puis utilisez con.log ("message") ou con.error ("message d'erreur") dans tout votre code, en production, vous pouvez simplement recâbler con à l'emplacement principal pour:

var con = {
    log: function() {},
    error: function() {},
    debug: function() {}
}
sq2
la source
16
la manière sale:console.log = function(){}
br4nnigan
8

L'utilisation de la fonctionnalité de débogage console.log réduira-t-elle les performances d'exécution de JavaScript? Cela affectera-t-il la vitesse d'exécution des scripts dans les environnements de production?

Bien sûr, console.log()cela réduira les performances de votre programme car cela prend du temps de calcul.

Existe-t-il une approche pour désactiver les journaux de console dans les environnements de production à partir d'un emplacement de configuration unique?

Placez ce code au début de votre script pour remplacer la fonction standard console.log par une fonction vide.

console.log = function () { };
holydragon
la source
2
Cela semble être l'une des solutions les plus simples pour désactiver les journaux de console dans l'environnement de production. Vous vous demandez pourquoi il n'a pas plus d'attention! Nous pouvons contrôler la définition de cette fonction vide sous une variable que nous pouvons basculer comme vrai / faux en fonction de l'environnement sur lequel nous travaillons (prod ou dev)
Anshuman Manral
2
C'est une réponse tellement brillante! Merci!
Systems Rebooter
6

Tout appel de fonction réduira légèrement les performances. Mais quelques-uns console.logne devraient avoir aucun effet notable.

Cependant, cela générera des erreurs non définies dans les navigateurs plus anciens qui ne prennent pas en charge console

Petah
la source
3

La baisse des performances sera minime, mais dans les navigateurs plus anciens, cela provoquera des erreurs JavaScript si la console des navigateurs des utilisateurs n'est pas ouverte log is not a function of undefined. Cela signifie que tout le code JavaScript après l'appel console.log ne sera pas exécuté.

Vous pouvez créer un wrapper pour vérifier si window.consoleest un objet valide, puis appeler console.log dans le wrapper. Quelque chose de simple comme celui-ci fonctionnerait:

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

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

Voici un violon: http://jsfiddle.net/enDDV/

Paul
la source
2

J'ai fait ce test jsPerf: http://jsperf.com/console-log1337

Cela ne semble pas prendre plus de temps que les autres appels de fonction.

Qu'en est-il des navigateurs qui n'ont pas d'API console? Si vous devez utiliser console.log pour le débogage, vous pouvez inclure un script dans votre déploiement de production pour remplacer l'API de la console, comme Paul le suggère dans sa réponse.

Jørgen
la source
si je peux sélectionner deux réponses, cela ira en haut
Sudantha
1
Votre test ajoute non seulement un appel console.log, mais exécute également la même opération jquery deux fois. J'ai créé la révision suivante de votre test, j'espère que cela vous aidera: jsperf.com/console-log1337/7 PS: merci, je ne savais pas pour jsperf.com :)
dubrox
2
Cela semble en fait beaucoup plus lent qu'un appel de fonction normal. Dans un duel direct, les résultats sont incomparables: jsperf.com/console-log1337/14
tomekwi
1
Mauvaise réponse. Pas même à distance correct. Des vœux pieux comme @tomekwi démontrent que la différence est remarquable. J'ai fait moi-même plusieurs tests dans le monde réel et je peux absolument dire sans l'ombre d'un doute que le spamming console.log cause définitivement une baisse des performances. Quelques journaux ici et là toutes les secondes ou deux, ce n'est pas grave, mais enregistrez quelque chose fréquemment (sur les mises à jour de cadres, les ré-rendus de composants massifs) et la différence avec et sans console.log est la nuit et le jour.
Lev
0

Je le fais de cette façon pour conserver la signature originale des méthodes de la console. Dans un emplacement commun, chargé avant tout autre JS:

var DEBUG = false; // or true 

Puis tout au long du code

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