javascript - 所有浏览器上的 javascript 和 video-js 中的内存泄漏(以最简单的示例)

Question

更新 2:已经在 video.js github 上报告了错误。不过我还是没找到这个bug的原因。所以这个问题仍然悬而未决。

不得不说，给-2的那两个人都是不讲理、不顾一切的蠢人。

<小时/>

更新:我不知道谁给了这个问题-1，尤其是他无法回答。

我尝试打印出所有创建的新组件和废弃的 video-js 组件。

我发现，调用player.dispose后，虽然大部分组件，包括外层DIV、内层VIDEO都被释放了，但还有一些内层组件，包括2个DIV、3个LI、2个BUTTON和很多SELECT都被释放了未处理。

我认为那些未处理的元素保留在 vjs.cache 中，并且因为事件监听器回调(可能是闭包)依赖于玩家对象本身的上下文。因此，即使主 DIV 和 VIDEO 从 vjs.cache 中删除，主播放器也永远不会被释放。

具体来说，未从 vjs.cache 中删除的项目包括:

1. DIV with contents: <ul class="vjs-menu-content"></ul>
2. Another DIV with contents: <ul class="vjs-menu-content"></ul>
3. LI with contents: subtitles off, captions off, and English
4. BUTTONs with contents: done and defaults
5. SELECTs with contents: 
5.1) <option value="">---</option><option value="#FFF">White</option><option value="#000">Black</option><option value="#F00">Red</option><option value="#0F0">Green</option><option value="#00F">Blue</option><option value="#FF0">Yellow</option><option value="#F0F">Magenta</option><option value="#0FF">Cyan</option>

5.2) <option value="">---</option><option value="1">Opaque</option><option value="0.5">Semi-Opaque</option>

5.3) <option value="0.50">50%</option><option value="0.75">75%</option><option value="1.00" selected="">100%</option><option value="1.25">125%</option><option value="1.50">150%</option><option value="1.75">175%</option><option value="2.00">200%</option><option value="3.00">300%</option><option value="4.00">400%</option>

5.4) <option value="none">None</option><option value="raised">Raised</option><option value="depressed">Depressed</option><option value="uniform">Uniform</option><option value="dropshadow">Dropshadow</option>

5.5) <option value="">Default</option><option value="monospaceSerif">Monospace Serif</option><option value="proportionalSerif">Proportional Serif</option><option value="monospaceSansSerif">Monospace Sans-Serif</option><option value="proportionalSansSerif">Proportional Sans-Serif</option><option value="casual">Casual</option><option value="script">Script</option><option value="small-caps">Small Caps</option>

我仍在寻找如何删除它们。

我只是想知道为什么video.js直到5.0.0版本都没有考虑过这样的内存泄漏。

<小时/>

原始问题:

我只有 2 个按钮，1 个用于添加视频，1 个用于删除视频。

视频源在我的本地机器上，您可以更改视频源进行测试。

源码如下，简单易懂。

这段代码(使用chrome内存快照)的问题是，

1. 初始:内存 5.5MB
2. 点击添加后，内存:6.5MB(我的视频每个视频大约800k-1MB)
3. 点击删除时，内存:6.3MB
4. 再次点击添加时，内存:6.8MB
5. 点击删除时，内存:6.7MB
6. 再次点击添加时，内存:7.0MB

等等

内存只是堆积起来。

video-js 版本是 4.12.7。我尝试了 video-js 5.0.0，但没有运气，都是一样的。

有人知道我的代码有什么问题或者 video-js 有什么问题吗？如何防止这种泄漏？

谢谢。

<link href="/js/video-js/video-js.css" rel="stylesheet">
<script src="/js/video-js/video.dev.js"></script>
<script src="/js/jquery-1.11.2.min.js"></script>


<script>
function video_html(id) {
  return '<video id="video-js-player" class="video-js vjs-default-skin" ' +
  ' preload="auto" width="960" height="540"  crossorigin="anonymous" ' +
  'data-setup=\'{"example_option":true}\'>' +
  '\t<source src="http://192.168.101.1:20001/live/' + id + '.mp4" type="video/mp4" /> \n' +
  '\t\t<track id="video-vtt" kind="subtitle" label="english" srclang="en" src="http://192.168.101.1:20001/live/' + id + '.vtt" default></track>\n ' +
  '\t\t<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>\n' +
  '</video>';

};
var player;

var insertVideo = function(){
  console.log("insert video");
  $.ajax({
    method:"GET",
    data:{},
    url: "http://192.168.101.1:20001/live/list", 
    success: function(list){
      keys = list["keys"];
      newest_key = keys[keys.length - 1];
      $("#video-container").html(video_html(newest_key));
      player = videojs("video-js-player", {}, function() {} );
    }
  });
};
 var removeVideo = function() {
       console.log("remove video");
       $('#video-container').html('');
       if (player) {
         player.dispose();
         player = null;
       }
     }



$(document).ready(function() {
    $('#delete').click(function(e){
      e.preventDefault();
      removeVideo();
    });

$('#add').click(function(e){
  e.preventDefault();
  removeVideo();
  insertVideo();
});

});
</script>

<a id="add" href="#add">Add</a>
<a id="delete" href="#delete">Delete</a>
<div class="container" id="video-container">
</div>

Answer 1

我已经找到了这个bug，并向video-js提交了bug报告。了解更多信息，请阅读

https://github.com/videojs/video.js/issues/2686

希望它对任何使用 video.js 的人有所帮助。