javascript垃圾回收与内存泄露

2019-09-12 admin

垃圾回收

  • js的垃圾自动回收机制,就是找到不被使用的值,将其占用的内存释放掉。

引用计数

  • 现代游览器已不在使用引用计数,Ie9以下的游览器仍在使用。
  • 引用计数,即查看对象是否存在指向他的引用,如果没有则释放掉。
var a = { a: 1 };
var c = a;

上面这一段代码,{a:1} 被a,b应用了两次,将 a = null, b = null 时 { a: 1 } 才会被释放掉

  • 这种回收机制无法释放一些无效但是存在引用的对象(循环引用)
function test (){
   var a = { ax: 1 };
   var b = { bx: 2 };
   a.bx = b;
   b.ax = a; 
   ......
}

执行test()时:

理想:test执行开始时候,会给其中定义的变量划分内存空间保存,以备后面的语句使用,等函数执行完毕返回了这些变量被认为无用的了,对应的空间也就收回了,下次执行此函数的时候,所有变量回到初始状态,重新赋值使用。

现实:test执行后,本应该释放的a,b发现a被b引用,b被a引用。他们引用次数大于0不会被垃圾回收,内存泄漏。

下面是一段常用的

var div = document.getElementById('test')
div.onClick = function () { }

div有事件处理函数的引用,同时事件处理函数也有div的引用!(div变量可在函数内被访问) 一个循环引用形成

标记清楚

  1. 简单来说就是根部(全局)触达,凡是不能通过根部找到的将会被释放掉。
  2. 从根部开始访问并标记他们(同时防止用一个对象重复遍历),最后将未有标记的清除掉。

图片描述

内存泄漏

  • 简单来说就是一些不在使用的值,仍占据内存没有被回收掉就会造成内存泄漏。
  • 原因:存在不需要的引用

常见的内存泄漏

意外的全局变量

function () {
  a = 'test'
}

function () {
  this.a = 'test'
}
  • 函数内部用了为声明的变量a或this.a,即 window.a = ‘test’
  • 在函数使用变量时,根据需求避免一些非必要的全局声明

遗漏的定时器

var n = 1

setInterval(() => {
  if(n < 2000){
    n++
  }
}, 1000)

DOM操作

<body>
  <button onclick="re()">remove</button>
  <ul id='par' class="p">
    <li id="c">1111</li>
  </ul>
</body>
<script>
  var li = document.getElementById('c');

  function re() {
    // 移除 ul的dom节点
    document.body.removeChild(document.getElementById('par'))

    // 通过li查找父节点
    console.log(li.parentNode)
  }
</script>
  • 当声明一个li并指向一个DOM节点后,即使将DOM整个删除(父级),通过这个声明我仍能通过这个引用(li)找回整个已经被删除的DOM树
  • 除必要情况下,DOM操作要做到用后即焚。

闭包

function onclick(){
    let btn = document.getElementById("button");
    obj.onclick=function(){
        //.
    }
}
  • 函数内部定义了一个变量,这个变量的事件引用了内部函数,并且这个事件回调函数的引用外暴了,形成闭包.

[转载]原文链接:https://segmentfault.com/a/1190000020368355

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74945.html

文章标题:javascript垃圾回收与内存泄露

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
回到顶部