垃圾回收与内存泄漏 2019-03-09

垃圾回收--引用计数

将资源的被引用次数保存起来,当被引用次数变为零时就将其释放的过程。

会导致更多的内存泄漏,已不被采用。

导致的特殊内存泄漏

循环引用导致内存不能正常被回收

// 函数 a 执行完后,本来 x y 对象都应该在垃圾回收阶段被回收, 可是由于存在循环引用,也不能被回收。function a () { var x = {} var y = {} x.z = y y.z = x}a()

IE 6 7 对DOM对象进行引用计数回收,这样简单的垃圾回收机制,非常容易出现循环引用问题导致内存不能被回收, 进行导致内存泄露等问题。

!function(){ // IE 6 7 中下列代码会导致 btn 不能被回收 var btn = document.getElementsByTagName("button") btn.onclick = function(){ console.log(btn.innerHTML) }}()

垃圾回收--标记清除

标记清除的方式需要对程序的对象进行两次扫描,第一次从根(Root)开始扫描,被根引用了的对象标记为不是垃圾,不是垃圾的对象引用的对象同样标记为不是垃圾,以此递归。所有不是垃圾的对象的引用都扫描完了之后。就进行第二次扫描,第一次扫描中没有得到标记的对象就是垃圾了,对此进行回收。

大多数浏览器采用此回收机制。

内存泄漏

意外的全局变量

function foo(arg) { // 没有 var 时,默认全局 bar = {}}

偶然创建全局变量

function foo() { this.bar = {}}// 此时执行 foo 函数,this 其实是指代 windowfoo()

没有及时清除的定时器和回调函数

// 未清除定时器!function(){ var node = document.getElementById("search") setInterval(function() { console.log(node) if(node) { node.innerHTML = new Date() } } 1000) // 移除node节点 node.remove()}()// 未清除回调函数!function(){ var element = document.getElementById("button") function onClick(event) { element.innerHtml = "text" } element.addEventListener("click" onClick) // 在 IE6、IE7 浏览器上,移除 node 之前需要手动的 removeEventListener,这样才能保证 element 被正常回收(其实就是循环引用) element.removeEventListener("click" onClick) element.parentNode.removeChild(element)}()

DOM之外的引用

<div id="root"> <div id="app"> <div id="son"></div> </div></div>var app = document.getElementById("app")var son = document.getElementById("son")app.remove() // 移除 app 节点app = null // 释放 app 引用console.log(son.parentNode) // app 可访问,son 在全局的引用,导致 app 的 dom 没有被释放

闭包被外部引用

var replaceThing = function () { // 为了方便观察内存情况,创建了一个很大的字符串,这样数组本身会占用很大的内存 var originalThing = new Array(100000000).join("*") var outer = "outer str" console.log("new...") return function () { if (originalThing) console.log(outer) } }// 由于生成的函数被 closureFn 引用,所以内存不释放var closureFn = replaceThing()closureFn()// 使用以下方式可以得到释放replaceThing()()

多重闭包

var theThing = nullvar replaceThing = function () { var originalThing = theThing var unused = function () { if (originalThing) console.log("hi") } theThing = { // 为了方便观察内存情况,创建了一个很大的字符串,这样数组本身会占用很大的内存 longStr: new Array(100000000).join("*") someMethod: function () { console.log("123") } }}// 每1秒执行一次,看内存变化setInterval(replaceThing 1000)// 由于 unused 和 theThing.someMethod 在一个闭包内,导致共享一个闭包作用域,从而关联两个函数,但是不会造成对 originalThing 的关联。originalThing 的关联是由 unused 内部引用导致的。由此可见 replaceThing 内部的变量都被紧密联系在一起。

如何避免内存泄漏

尽量避免使用全局变量,例如使用立即执行函数的形式。使用“严格模式”开发,避免因为我们的疏忽导致意外产生全局变量。对于一些占用内存较大的对象,在变量不在使用后,手动将其赋值为 null,例如前面例子中的超大的数组。尽量避免把闭包内部与外部产生关联引用,例如上面例子中的 theThing 变量

Copyright © 2019 www.xuanle808.com All Rights Reserved
邢东方
地址:安徽省池州市贵池区梅里工业园区
全国统一热线:15595069409