前言

如果要在 JS 中找一个用的最多的函数，那一定就是console.log，在前端进行调试时，大家都屡试不爽，都喜欢用的函数。但是在生产环境中使用console.log之类的打印日志，这就会造成内存的泄漏了，这是我们不可以忽视的一个点。

为什么会造成内存泄漏呢？接下来我们来分析分析。

先来这样的一个场景

html 复制代码

<body>
    <h1 id="app" @click="handleClick"> Hello, console.log</h1>

    <script>
        const h1 = document.getElementById('app');

        h1.addEventListener('click', () => {
            const arr = new Array(100000).fill(0);
            console.log(arr);
        })
    </script>
</body>

每当我们点击一次<h1>元素时，就会创建了一个包含 100000 个元素的数组，并将其输出到控制台中。

我们知道打印在控制台上的数组，我们是可以将它展开来看见更加详细的内容的，所以造成内存泄漏的原因是什么呢？

按照过程，点击一下，触发一个事件处理函数，待这个函数执行完之后，里面的生成的数组按道理是要销毁掉的，但是因为经过了打印，控制台里面需要保持对这个数组的引用， 不然的话我们就不能展开数组，查看里面的内容了，所以它会一直保存，随着我们点击次数的增多，这样的数组引用次数越来越多，于是就造成了内存泄漏。

接下来我们借助Performance来具体的展示一下是不是这样的情况。

在进行前我们先进行一下垃圾回收（图片中小扫把就是垃圾回收），释放一下内存以便为了更好的观察console.log带来的内存泄漏，然后点击几次h1元素，打印数组，最后再进行一次垃圾回收。

我们就可以看到，即使我们最后点了垃圾回收，还是存在一部分东西没有被回收，也是占用着内存的，这里指的就是我们打印在控制台的数组了。

我们来个不打印数组的情况看看（操作过程和前面一样，这里只展示最后的结果）

这时我们就可以观察到，内存的增长和下降都是很正常的，每当我们点击一次h1元素，就执行一次事件处理函数，导致内存的占用，可是执行完之后，内存就立马释放出来了。最后点击一次垃圾回收，内存的占用也就和刚刚开始时一样了。

那么说，我们不打开控制台不就不会造成内容泄漏了？那确实，在谷歌浏览器中会进行特殊的处理，并不会造成内存泄漏，但是在别的浏览器中，情况就不一样了。

结尾 🌸🌸🌸

看完这篇文章，我们一定要注意不要在生产环境中使用console.log！不要在生产环境中使用console.log！不要在生产环境中使用console.log！重要的事情说三遍。

但是在开发环境中我们要使用console.log来调试代码怎么办呢？那就需要在打包到生产环境时，把这个console.log给去掉，手动删的话又太麻烦了，这时就可以借助terser工具来帮助我们了。

好的，今日分享到此结束，最后感谢小伙伴的阅读。

生产环境中的console.log语句会导致内存泄漏，一定不要用！！！

前言

结尾 🌸🌸🌸