解读生产环境为何避免使用console.log 解读生产环境为何避免使用c

console.log：向web开发控制台打印一条消息，常用来在开发时调试分析。有时在开发时，需要打印一些对象信息，但发布时却忘记去掉console.log语句，这可能造成内存泄露。
在传递给console.log的对象是不能被垃圾回收 ??，因为在代码运行之后需要在开发工具能查看对象信息。所以最好不要在生产环境中console.log任何对象。
实例------>demos/log.html

Leaker - 锐客网

这里结合Chrome的Devtools–>Performance做一些分析，操作步骤如下：

开启Performance的记录
执行CG按钮，创建基准参考线
多次点击【click】按钮，新建Leaker对象
执行CG按钮
停止记录

文章图片

可以看出【JS Heap】线最后没有降回到基准参考线的位置，显然存在没有被回收的内存。如果将代码修改为

// console.log("Leaking an object %o: %o", (new Date()), this);

重复上述的操作步骤，分析结果如下：
【解读生产环境为何避免使用console.log】

文章图片

从对比分析结果可知，console.log打印的对象是不会被垃圾回收器回收的。
因此最好不要在页面中console.log任何对象，包括warn、error等兄弟，这样可能会影响页面的整体性能，特别在生产环境中，这些细节需要特别的关注。
彩蛋试试以下console代码

const style1 = [ 'color: #fff', 'background: #848484', 'padding: 1px', 'border-radius: 3px 0 0 3px' ].join('; '); const style2 = [ 'color: #fff', 'background: #1890FF', 'padding: 1px', 'border-radius: 0 3px 3px 0' ].join('; '); console.log('%c NODE_ENV %c production ', style1, style2); console.log('%c BUILD_TIME %c %s ', style1, style2, new Date().toLocaleString());