【问题标题】：Memory leaks from PubNub Javascript SDK来自 PubNub Javascript SDK 的内存泄漏
【发布时间】：2015-09-12 03:33:38
【问题描述】：

我正在使用 pubnub 来处理我正在开发的应用程序前端的实时更新。用户已经经历了很多浏览器崩溃，特别是在 windows chrome 上。我运行了 chrome profiler，发现 pubnub 不断地创建事件监听器，直到最终浏览器运行我们的内存并崩溃。有没有办法手动清理由 pubnub 创建的事件侦听器，或任何其他解决方法？

编辑我也试过切换到 websockets 版本，问题变得更糟了。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Punub</title>
  <script src="https://pubnub.a.ssl.fastly.net/pubnub.min.js"></script>
 </head>
 <body>

  <h1>Hello</h1>
 </body>

 <!-- Import PubNub Core Lib -->

 <!-- Use WebSocket Constructor for a New Socket Connection -->
 <script>(function() {
    /* 'wss://ORIGIN/PUBLISH_KEY/SUBSCRIBE_KEY/CHANNEL' */
    WebSocket  = PUBNUB.ws;
    var socket = new WebSocket('wss://pubsub.pubnub.com/PUB/SUB/CHANNEL')
   // On Message Receive
   socket.onmessage = function(evt) {
    console.log('socket receive');
    console.log(evt.data);
   }
   // On Socket Close
   socket.onclose = function() {
    console.log('socket closed');
   }
   // On Error
   socket.onerror = function() {
    console.log('socket error');
   }
   // On Connection Establish
   socket.onopen = function(evt) {
    console.log('socket open');
    // Send a Message!
    socket.send('hello world!');
   }
   // On Send Complete
   socket.onsend = function(evt) {
     console.log('socket send');
     console.log(evt);
   }
   console.log(socket)
})();</script>
</html>

EDIT 2我已经使用以下代码重新运行分析器

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Punub</title>
  <script src="https://pubnub.a.ssl.fastly.net/pubnub.min.js"></script>
 </head>
 <body>

  <h1>Hello</h1>
 </body>

 <!-- Import PubNub Core Lib -->

 <!-- Use WebSocket Constructor for a New Socket Connection -->
 <script>(function() {
    /* 'wss://ORIGIN/PUBLISH_KEY/SUBSCRIBE_KEY/CHANNEL' */
    WebSocket  = PUBNUB.ws;
    var socket = new WebSocket('wss://pubsub.pubnub.com/PUB/SUB/CHANNEL')
   // On Message Receive
   socket.onmessage = function(evt) {

   }
   // On Socket Close
   socket.onclose = function() {

   }
   // On Error
   socket.onerror = function() {

   }
   // On Connection Establish
   socket.onopen = function(evt) {
    // Send a Message!
    socket.send('hello world!');
   }
   // On Send Complete
   socket.onsend = function(evt) {

   }
})();</script>
</html>

【问题讨论】：

这是我们用来产生相同问题的要点，我们尚未发现任何解决方法gist.github.com/bevanhunt/f6e1007a0604a24c8089
我们之前从未见过任何内存泄漏，也没有任何报告，直到这次。工程部门目前正在对此进行审查，我们将报告结果。
编辑您的代码以使用指向最新版本 SDK 的 cdn.pubnub.com/pubnub-dev.js。您在上面使用的版本指向 v3.6.7 - 我们将很快弃用该 CDN。

标签： javascript memory-leaks pubnub

【解决方案1】：

使用 PubNub JavaScript SDK 测试系统利用率和内存配置文件

您正在使用浏览器调试控制台测量 JS 堆。非常好！这没关系，但你必须做出调整。您在测试中要解决的一个重要问题是注意 console.log(...) 会导致内存膨胀。这是一个常见问题https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=console.log%20memory%20usage -

对于未来的测试，请确保在您的代码中排除所有 console.log() 执行 everywhere。

上面的 EDIT 包含更多 console.log() 行，它们将强调内存气球效应。

内存分析更新

我目前正在 Chrome 网络浏览器中运行以下测试，使用与您原始 stackoverflow 帖子中相同的时间线内存监控方法。

<script src="https://cdn.pubnub.com/pubnub-dev.js"></script>
<script>(function(){

    WebSocket  = PUBNUB.ws;
    var socket = new WebSocket('wss://pubsub.pubnub.com/demo/demo/CHANNEL')

   // On Message Receive
   socket.onmessage = function(evt) {}

   // On Socket Close
   socket.onclose = function() {}

   // On Error
   socket.onerror = function() {}

   // On Connection Establish
   socket.onopen = function(evt) {}

   // On Send Complete
   socket.onsend = function(evt) {}

})();</script>

从下图中可以看出，启用内存分析的浏览器Timeline 选项卡的配置文件应如下所示。

浏览器上内存配置文件 WebSocket JavaScript 的结果

JavaScript 堆 GC 将触发定期声明已用内存。

JavaScript 侦听器 是一个始终递增的整数，会定期重置为零。

在内存分析 JavaScript 时关闭 `console.log()`

这里的关键部分是您将 console.log 从测试中排除，因为您将得到以下错误结果！

<script>
setInterval(function(){
    console.log({a:document,b:window,c:document.body})
},100)
</script>

console.log 问题与 JavaScript 内存分析工作有关。

【讨论】：

感谢您的回答，如编辑中所述，我已删除 console.logs 并重新测试。我使用的原始代码是来自以下链接 pubnub.com/websockets 的 pubnub 文档的复制和粘贴。对于如此简单的代码如何导致堆稳步增加，我感到有些困惑。
但是删除控制台语句解决了它，对吗？不过，您提出的问题通常是针对浏览器应用程序的。
上面的Edit 2已经删除了所有的console.logs并且仍然产生相同的效果。
我也会运行测试并很快发布更新。
skype:blum.stephen 或发送电子邮件至 stephen@pubnub.com，以便我们了解详细信息。我的 chrome 是 版本 45.0.2454.85（64 位）。 JS 库 pubnub-dev.js 是 v3.7.14 （与您正在使用的相同）并且始终是最新版本。它应该被称为pubnub-latest.js，但我们将其标记为pubnub-dev.js 作为警告，它总是不断变化 版本。如果您可以与我联系，我可能会为您提供另一种选择 stephen@pubnub.com

使用 PubNub JavaScript SDK 测试系统利用率和内存配置文件

内存分析更新

浏览器上内存配置文件 WebSocket JavaScript 的结果

在内存分析 JavaScript 时关闭 console.log()

在内存分析 JavaScript 时关闭 `console.log()`