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


99

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

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


到目前为止,所有答案都假设您只是在输出字符串消息。记录可能具有大型对象结构的对象的性能如何?例如console.log(largeObj)?
PandaWood '16

将大量对象输出到控制台可以将3秒钟的页面加载变为30秒。只是一个例子……
安德鲁(Andrew)

一个简单的console.log采用50ms的〜
Pedram马兰迪

Answers:


55

如果要在公共场所或其他地方使用此工具,则对使用开发人员工具不了解的任何人都可以阅读您的调试消息。根据您要记录的内容,这可能不是理想的行为。

最好的方法之一是将console.login 包装为您的方法之一,然后您可以在其中检查条件并执行它。在生产版本中,可以避免具有这些功能。这个Stack Overflow问题详细讨论了如何使用Closure编译器执行相同的操作。

因此,回答您的问题:

  1. 是的,虽然速度可以忽略不计它会降低速度
  2. 但是,请勿使用它,因为一个人阅读您的日志太容易了。
  3. 对这些问题的答案这个问题可能会给你提示如何从制作中删除它们。

谢谢,但仍然包装conosle.log将仍然击中了重写功能,不是吗?
Sudantha

15
仅需注意- console.log用于记录对象的确会导致内存泄漏,因为浏览器保留了对象结构以允许开发人员扩展日志。
Shamasis Bhattacharya 2014年


8
“一个人阅读您的日志太容易了” –这是一个问题吗?它是JavaScript,他们已经可以完全访问源代码!
Quentin

4
只是为了说明一下:我刚刚发现,即使使用相同的静态文本(没有对象或数组;实际上只是console.log('test')也会这样做)向console.log发送垃圾邮件也会导致性能下降。当我在一个函数中记录“被调用”时引起了我的注意,该函数在重新渲染期间被数百个React组件调用。在频繁更新期间,仅记录代码的存在会引起非常明显的停顿。
列夫

80

实际上,console.log它比空函数要慢很多。在我的Chrome 38上运行此jsPerf测试可得到惊人的结果:

  • 当浏览器控制台被关闭时,呼叫console.log慢大约10万次比调用空函数,
  • 当控制台打开时,称它是慢高达100万次

并不是说,如果您console.…触发一次合理数量的呼叫(在我安装的Chrome上,一百将花费2毫秒,而在控制台打开时将花费20毫秒),您会注意到性能下降。但是,如果您反复将内容登录到控制台(例如,将其挂接)requestAnimationFrame,则会使事情变得混乱。

更新:

在此测试中,我还检查了用于生产的自定义“隐藏日志”的想法-具有一个变量,该变量包含按需提供的日志消息。原来是

  • 约1 000倍比原生的快console.log
  • 如果用户打开其控制台,显然可以快10000倍。

1
当编译器看到一个空函数时,它什么也不会执行,因为它看到要执行的一行,因此必须运行该函数。编译器根本不会运行一个空的,未使用的函数作为优化。
SidOfc

1
@SidneyLiebrand感谢您提供的信息,很高兴知道。可以以相同的方式优化第二次测试的结果console.log。它们都是产生副作用的功能。
tomekwi

1
console.log除非您将其绑定到滚动/调整大小处理程序,否则它本身并不会真正以您会注意到的方式影响性能。这些被称为很多,如果您的浏览器必须以每秒30 / 60x的速度向控制台发送文本,则可能会很丑陋。然后就是那个IE错误,根本不允许您console.log在关闭控制台的情况下进行操作:(
SidOfc 2015年

1
您完全正确–我也在回答中写道。根据经验,我尝试在生产代码中不进行任何控制台调用。但是性能并不是原因–而是因为@Ramesh写道“对于外行来说,读取日志太容易了”。
tomekwi 2015年

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 2016年


10

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

var con = console;

然后在整个代码中使用con.log(“ message”)或con.error(“错误消息”),在生产环境中,您只需在核心位置将con重新布线为:

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

16
肮脏的方式:console.log = function(){}
br4nnigan

8

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

当然,这console.log()会降低程序的性能,因为它需要大量的计算时间。

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

将此代码放在脚本的开头,以将标准console.log函数重写为空函数。

console.log = function () { };

2
这似乎是在生产环境中禁用控制台日志的最简单的解决方案之一。想知道为什么它没有更多的关注!我们可以在一个变量下控制此空函数的定义,该变量可以根据我们正在处理的环境(生产或开发)切换为true / false
Anshuman Manral

2
这是一个绝妙的答案!谢谢!
系统重启

6

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

但是,它将在不支持的旧版浏览器中引发未定义的错误 console


3

性能下降将是最小的,但是在旧版浏览器中,如果未打开用户浏览器控制台,则会导致JavaScript错误log is not a function of undefined。这意味着console.log调用之后的所有JavaScript代码都不会执行。

您可以创建包装器以检查其是否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

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


2

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

似乎不需要花费比其他函数调用更多的时间。

没有控制台API的浏览器怎么办?如果需要使用console.log进行调试,则可以在生产部署中包括一个脚本来覆盖控制台API,如Paul在他的回答中建议的那样。


如果我可以选择两个答案,这将返回页首
Sudantha

1
您的测试不仅添加了console.log调用,而且还执行了两次相同的jquery操作。我创建了以下测试版本,希望对您有所帮助:jsperf.com/console-log1337/7 PS:谢谢,我不知道jsperf.com :)
dubrox

2
实际上,它确实比普通的函数调用要慢很多。在直接决斗中,结果是无与伦比的:jsperf.com/console-log1337/14
tomekwi 2014年

1
错误的答案。甚至不正确。如@tomekwi所示,一厢情愿的投票决定了两者之间的巨大差异。我自己做了一些真实的测试,可以肯定地说垃圾控制台是毫无疑问的。log肯定会导致性能下降。每隔一两秒在这里和那里记录一些日志,没什么大不了的,但是经常记录一些事情(在框架更新,重新渲染大量组件方面),无论是否有console.log都是日以继夜的区别。
Lev

0

我这样做是为了维护控制台方法的原始签名。在一个公共位置,在任何其他JS之前加载:

var DEBUG = false; // or true 

然后贯穿整个代码

if (DEBUG) console.log("message", obj, "etc");
if (DEBUG) console.warn("something is not right", obj, "etc");
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.