console.log会降低JavaScript的执行性能吗？

Will use of the debugging feature console.log reduce JavaScript execution performance? Will it affect the speed of script execution in production environments?

是否会使用调试功能console.log来降低JavaScript的执行性能？它会影响生产环境中脚本执行的速度吗？

Is there an approach to disable console logs in production environments from a single configuration location?

是否有一种方法可以从单个配置位置禁用生产环境中的控制台日志？

7 个解决方案

#1

If you are going to have this on a public site or something, anyone with little knowledge on using the developer tools can read your debug messages. Depending on what you are logging, this may not be a desirable behavior.

如果您要在公共站点或其他地方使用此功能，任何对使用开发人员工具知之甚少的人都可以阅读您的调试消息。根据您记录的内容，这可能不是理想的行为。

One of the best approaches is to wrap the console.log in one of your methods, and where you can check for conditions and execute it. In a production build, you can avoid having these functions. This Stack Overflow question talks in details about how to do the same using the Closure compiler.

最好的方法之一是将console.log包装在您的一个方法中，并在其中检查条件并执行它。在生产版本中，您可以避免使用这些功能。这个Stack Overflow问题详细讲述了如何使用Closure编译器来做同样的事情。

So, to answer your questions:

那么，回答你的问题：

1. Yes, it will reduce the speed, though only negligibly.
2. 是的，它会降低速度，但只是可以忽略不计。
3. But, don't use it as it's too easy for a person to read your logs.
4. 但是，不要使用它，因为一个人读取日志太容易了。
5. The answers to this question may give you hints on how to remove them from production.
6. 这个问题的答案可能会给你提示如何从生产中删除它们。

#2

Actually, console.log is a lot slower than an empty function. Running this jsPerf test on my Chrome 38 gives stunning results:

实际上，console.log比空函数慢很多。在我的Chrome 38上运行此jsPerf测试可获得惊人的效果：

• when the browser console is closed, calling console.log is about 10 000 times slower than calling an empty function,
• 当浏览器控制台关闭时，调用console.log比调用空函数慢大约10000倍，
• and when the console is open, calling it is as much as 100 000 times slower.
• 当控制台打开时，调用它的速度要慢10万倍。

Not that you'll notice the performance lag if you have a reasonable number of console.… calls firing once (a hundred will take 2 ms on my install of Chrome – or 20 ms when the console is open). But if you log stuff to the console repeatedly – for instance, hooking it up through requestAnimationFrame – it can make things jumpy.

如果你有一个合理数量的控制台，你会注意到性能滞后。...一次点火一次（我的Chrome安装时需要2毫秒 - 或者当控制台打开时需要20毫秒）。但是如果你反复将东西记录到控制台 - 例如，通过requestAnimationFrame挂起它 - 它可能会让事情变得很糟糕。

Update:

In this test I've also checked out the idea of a custom “hidden log” for production – having a variable which holds log messages, available on demand. It turns out to be

在这个测试中，我还检查了生产的自定义“隐藏日志”的想法 - 有一个保存日志消息的变量，可按需提供。事实证明

• about 1 000 times faster than the native console.log,
• 比本机console.log快约1 000倍，
• and obviously 10 000 times faster if the user has his console open.
• 如果用户打开控制台，显然会快10 000倍。

#3

If you create a shortcut to the console in a common core script, eg:

如果在通用核心脚本中创建控制台的快捷方式，例如：

var con = console;

and then use con.log("message") or con.error("error message") throughout your code, on production you can simply rewire con in the core location to:

然后在整个代码中使用con.log（“message”）或con.error（“错误消息”），在生产中，您只需将核心位置中的con重新连接到：

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

#4

const DEBUG = true / false
DEBUG && console.log('string')

#5

Any function call will slightly reduce performance. But a few console.log's should not have any noticeable effect.

任何函数调用都会略微降低性能。但是一些console.log不应该有任何明显的效果。

However it will throw undefined errors in older browsers that don't support console

但是，它会在不支持控制台的旧浏览器中抛出未定义的错误

#6

I made this jsPerf test: http://jsperf.com/console-log1337

我做了这个jsPerf测试：http：//jsperf.com/console-log1337

It doesn't seem to take any longer than other function calls.

它似乎不需要比其他函数调用更长的时间。

What about browsers that doesn't have a console API? If you need to use console.log for debugging, you might include a script in your production deployment to override the console API, like Paul suggests in his answer.

那些没有控制台API的浏览器呢？如果您需要使用console.log进行调试，您可能会在生产部署中包含一个脚本来覆盖控制台API，就像Paul在他的回答中所建议的那样。

#7

The performance hit will be minimal, however in older browsers it will cause JavaScript errors if the users browsers console is not open log is not a function of undefined. This means all JavaScript code after the console.log call will not execute.

性能损失将是最小的，但是在旧版浏览器中，如果用户浏览器控制台未打开，则会导致JavaScript错误。日志不是未定义的函数。这意味着在console.log调用之后的所有JavaScript代码都不会执行。

You can create a wrapper to check if window.console is a valid object, and then call console.log in the wrapper. Something simple like this would work:

您可以创建一个包装器来检查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

Here is a fiddle: http://jsfiddle.net/enDDV/

这是一个小提琴：http：//jsfiddle.net/enDDV/