内存生命周期：

程序的运行需要 内存 ，只要程序提出要求，操作系统或者运行是就必须供给内存。

对于持续运行的服务进程，必须及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

内存泄露案例： 全局变量、未销毁的定时器和回调函数（ setInterval ）、闭包（外部函数的变量被引用，得不到释放）、DOM 引用（移除了元素，但是仍然有对 元素的引用）

用于标识无用变量的方式有两种：标记清除法和引用计数法。

当变量进入环境时，这个变量标记为“进入环境”；而当变量离开环境时，则将其标记为“离开环境”。

可使用一个“进入环境”的变量列表及一个“离开环境”的变量列表来跟踪变量的变化，也能够翻转某个特殊的位来记录一个变量什么时候进入环境及离开环境。

当声明了一个变量并将一个引用类型值赋给该变量时，则该值的引用次数就是1；若是同一个值又被赋给另外一个变量，则该值的引用次数加1；若是包含对该值引用的变量又取得了另一个值，则该值的引用次数减1。当该值的引用次数变为0时，则能够回收其占用的内存空间。 当垃圾回收器下一次运行时，就会释放那些引用次数为0的值所占用的内存。

怎样可以观察到内存泄漏呢？

经验法则 ：如果连续五次垃圾回收之后，内存占用一次比一次大，就有内存泄漏。这就要求实时查看内存占用。

前面说过，及时清除引用非常重要。但是，你不可能记得那么多，有时候一疏忽就忘了，所以才有那么多内存泄漏。

在新建引用的时候就声明，哪些引用必须手动清除，哪些引用可以忽略不计，当其他引用消失以后，垃圾回收机制就可以释放内存。 这样就能大大减轻程序员的负担，你只要清除主要引用就可以了。

函数中 给element的onclick属性赋值了一个闭包，闭包要访问element的id属性。闭包在js中也是对象，函数即对象。闭包会持有外部传入的变量，因此闭包持有了element对象，而element对象通过onclick属性持有了闭包，因此两个对象相互持有，造成内存泄漏。

与OC类比，OC中使用weak对象引用，来解决循环引用的问题，js中也有类似操作，例如：

因为var id是由赋值得到的，js的赋值操作是值或者引用的拷贝，并不持有对象。此时element持有闭包，闭包持有id对象，并未造成循环引用。

js中如果不用var声明变量,该变量将被视为window对象(全局对象)的属性,也就是全局变量.

function foo(arg) {

bar = "this is a hidden global variable"

}123

// 上面的函数等价于

function foo(arg) {

window.bar = "this is an explicit global variable"

}123

所以,你调用完了函数以后,变量仍然存在,导致泄漏.

如果不注意this的话,还可能会这么漏:

function foo() {

this.variable = "potential accidental global"

}123

// 没有对象调用foo, 也没有给它绑定this, 所以this是window

foo()

你可以通过加上’use strict’启用严格模式来避免这类问题, 严格模式会组织你创建意外的全局变量.

被遗忘的定时器或者回调

var someResource = getData()

setInterval(function() {

var node = document.getElementById('Node') if(node) {

node.innerHTML = JSON.stringify(someResource))

}

}, 1000)1234567

这样的代码很常见, 如果id为Node的元素从DOM中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对someResource的引用, 定时器外面的someResource也不会被释放.

没有清理的DOM元素引用

var elements = {button: document.getElementById('button'),image: document.getElementById('image'),text: document.getElementById('text')

}function doStuff() {

image.src = 'http://some.url/image'

button.click() console.log(text.innerHTML)

}function removeButton() {document.body.removeChild(document.getElementById('button')) // 虽然我们用removeChild移除了button, 但是还在elements对象里保存着#button的引用

// 换言之, DOM元素还在内存里面.

}123456789101112131415161718

闭包

先看这样一段代码:

var theThing = nullvar replaceThing = function () {

var someMessage = '123'

theThing = {

someMethod: function () {

console.log(someMessage)

}

}

}123456789

调用replaceThing之后, 调用theThing.someMethod, 会输出123, 基本的闭包, 我想到这里应该不难理解.

解释一下的话, theThing包含一个someMethod方法, 该方法引用了函数中的someMessage变量, 所以函数中的someMessage变量不会被回收, 调用someMethod可以拿到它正确的console.log出来.

接下来我这么改一下:

var theThing = nullvar replaceThing = function () {

var originalThing = theThing var someMessage = '123'

theThing = {

longStr: new Array(1000000).join('*'),// 大概占用1MB内存

someMethod: function () {

console.log(someMessage)

}

}

}1234567891011

我们先做一个假设, 如果函数中所有的私有变量, 不管someMethod用不用, 都被放进闭包的话, 那么会发生什么呢.

第一次调用replaceThing, 闭包中包含originalThing = null和someMessage = ‘123’, 我们设函数结束时, theThing的值为theThing_1.

第二次调用replaceThing, 如果我们的假设成立, originalThing = theThing_1和someMessage = ‘123’.我们设第二次调用函数结束时, theThing的值为theThing_2.注意, 此时的originalThing保存着theThing_1, theThing_1包含着和theThing_2截然不同的someMethod, theThing_1的someMethod中包含一个someMessage, 同样如果我们的假设成立, 第一次的originalThing = null应该也在.

所以, 如果我们的假设成立, 第二次调用以后, 内存中有theThing_1和theThing_2, 因为他们都是靠longStr把占用内存撑起来, 所以第二次调用以后, 内存消耗比第一次多1MB.

如果你亲自试了(使用Chrome的Profiles查看每次调用后的内存快照), 会发现我们的假设是不成立的, 浏览器很聪明, 它只会把someMethod用到的变量保存下来, 用不到的就不保存了, 这为我们节省了内存.

但如果我们这么写:

var theThing = nullvar replaceThing = function () {

var originalThing = theThing var unused = function () {

if (originalThing)

console.log("hi")

} var someMessage = '123'

theThing = {

longStr: new Array(1000000).join('*'),

someMethod: function () {

console.log(someMessage)

}

}

}123456789101112131415

unused 这个函数我们没有用到, 但是它用了 originalThing 变量, 接下来, 如果你一次次调用 replaceThing , 你会看到内存1MB 1MB的涨.

也就是说, 虽然我们没有使用 unused , 但是因为它使用了 originalThing , 使得它也被放进闭包了, 内存漏了.

强烈建议读者亲自试试在这几种情况下产生的内存变化.

这种情况产生的原因, 通俗讲, 是因为无论 someMethod 还是 unused , 他们其中所需要用到的在 replaceThing 中定义的变量是保存在一起的, 所以就漏了.