[英]Will console.log reduce JavaScript execution performance?
Will use of the debugging feature console.log
reduce JavaScript execution performance?使用调试特性
console.log
会降低 JavaScript 执行性能吗? Will it affect the speed of script execution in production environments?会不会影响生产环境脚本的执行速度?
Is there an approach to disable console logs in production environments from a single configuration location?有没有一种方法可以从单个配置位置禁用生产环境中的控制台日志?
Actually, console.log
is a lot slower than an empty function.实际上,
console.log
比空函数慢很多。 Running this jsPerf test on my Chrome 38 gives stunning results:在我的 Chrome 38 上运行这个 jsPerf 测试给出了惊人的结果:
console.log
is about 10 000 times slower than calling an empty function,console.log
比调用空函数慢大约 10 000 倍, 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).并不是说如果你有合理数量的
console.…
,你会注意到性能延迟console.…
调用一次(在我安装 Chrome 时,100 将需要 2 毫秒 - 或者在控制台打开时需要 20 毫秒)。 But if you log stuff to the console repeatedly – for instance, hooking it up through requestAnimationFrame
– it can make things janky.但是,如果您重复地将内容记录到控制台——例如,通过
requestAnimationFrame
将其连接起来——它会使事情变得混乱。
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
原来是
console.log
,console.log
快约 1000 倍,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.最好的方法之一是将
console.log
包装在您的方法之一中,您可以在其中检查条件并执行它。 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 .
这个Stack Overflow 问题详细讨论了如何使用Closure 编译器来做同样的事情。
So, to answer your questions:所以,回答你的问题:
const DEBUG = true / false
DEBUG && console.log('string')
Will use of the debugging feature console.log reduce JavaScript execution performance?
使用调试功能 console.log 会降低 JavaScript 执行性能吗? Will it affect the speed of script execution in production environments?
会不会影响生产环境中脚本的执行速度?
Of course, console.log()
will reduce your program's performance since it takes computational time.当然,
console.log()
会降低程序的性能,因为它需要计算时间。
Is there an approach to disable console logs in production environments from a single configuration location?
是否有一种方法可以从单个配置位置禁用生产环境中的控制台日志?
Put this code at the beginning of your script to override the standard console.log function to an empty function.将此代码放在脚本的开头以将标准 console.log 函数覆盖为空函数。
console.log = function () { };
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("error message"),在生产中,您可以简单地将核心位置的 con 重新连接到:
var con = {
log: function() {},
error: function() {},
debug: function() {}
}
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
但是它会在不支持
console
旧浏览器中抛出未定义的错误
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
.性能影响很小,但是在旧浏览器中,如果用户浏览器控制台未打开,它会导致 JavaScript 错误
log is not a function of undefined
。 This means all JavaScript code after the console.log call will not execute.这意味着在 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.您可以创建一个包装器来检查
window.console
是否为有效对象,然后在包装器中调用 console.log。 Something simple like this would work:像这样简单的事情会起作用:
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/
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?没有控制台 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.
如果您需要使用 console.log 进行调试,您可以在生产部署中包含一个脚本来覆盖控制台 API,就像 Paul 在他的回答中建议的那样。
I do it this way to maintain original signature of console methods.我这样做是为了维护控制台方法的原始签名。 In a common location, loaded before any other JS:
在一个公共位置,在任何其他 JS 之前加载:
var DEBUG = false; // or true
Then throughout code然后在整个代码
if (DEBUG) console.log("message", obj, "etc");
if (DEBUG) console.warn("something is not right", obj, "etc");
I prefer it doing this way:我更喜欢这样做:
export const println = (*args,) => {
if(process.env.NODE_ENV === "development") console.log(args)
}
and then use println
everywhere in your code.然后在你的代码中到处使用
println
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.