4-1 内存泄露
本节编程练习不计算学习进度,请电脑登录imooc.com操作

内存泄露

什么是内存泄露?

内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。在C++中,因为是手动管理内存,内存泄露是经常出现的事情。而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露。

常见内存泄露的几种情况

1.循环引用
2.Javascript闭包
3.DOM插入

一个DOM对象被一个Javascript对象引用,与此同时又引用同一个或其它的Javascript对象,这个DOM对象可能会引发内存泄漏。这个DOM对象的引用将不会在脚本停止的时候被垃圾回收器回收。要想破坏循环引用,引用DOM元素的对象或DOM对象的引用需要被赋值为null。

其实绝大部分内存泄漏都不是由Javascript引起的,浏览器的回收机制已经做的相当好了,多数的泄漏都是由于与DOM交互而产生的。

含有DOM对象的循环引用将导致大部分当前主流浏览器内存泄露

第一种:多个对象循环引用

var a=new Object;
var b=new Object;

a.r=b;
b.r=a;

第二种:循环引用自己

var a=new Object;
a.r=a;

循环引用很常见且大部分情况下是无害的,但当参与循环引用的对象中有DOM对象或者ActiveX对象时,循环引用将导致内存泄露。

我们把例子中的任何一个new Object替换成document.getElementById或者document.createElement就会发生内存泄露了。

所以这里的总结:

  ☑  JS的内存泄露,无怪乎就是从DOM中remove了元素,但是依然有变量或者对象引用了该DOM对象。然后内存中无法删除。使得浏览器的内存占用居高不下。这种内存占用,随着浏览器的刷新,会自动释放。

  ☑  而另外一种情况,就是循环引用,一个DOM对象和JS对象之间互相引用,这样造成的情况更严重一些,即使刷新,内存也不会减少。这就是严格意义上说的内存泄露了。

所以在平时实际应用中, 我们经常需要给元素缓存一些数据,并且这些数据往往和DOM元素紧密相关。由于DOM元素(节点)也是对象, 所以我们可以直接扩展DOM元素的属性,但是如果给DOM元素添加自定义的属性和过多的数据可能会引起内存泄漏,所以应该要尽量避免这样做。 因此更好的解决方法是使用一种低耦合的方式让DOM和缓存数据能够联系起来。

所以我们必须有一种机制,避免引用数据直接依附在DOM对象上,这样尽量避免内存泄漏的产生。jQuery的缓存系统就很好的解决了这一问题。

任务

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.  
  10. <button id="clickme">点击我,会无限循环</button>
  11.  
  12. <script type="text/javascript">
  13.  
  14. //循环引用
  15. function a() {
  16. setTimeout(function() {
  17. show('a函数执行完毕,没有销毁定时器引用,无法停止')
  18. a();
  19. }, 500)
  20. }
  21.  
  22. $("#clickme").click(function() {
  23. a();
  24. })
  25.  
  26.  
  27. function show(data) {
  28. $("body").append('<li>' + data + '</li>')
  29. }
  30.  
  31.  
  32. </script>
  33.  
  34. </body>
  35. </html>
下一节