程序的运行需要内存。只要程序提出要求,操作系统或者运行时就必须供给内存。对于持续运行的服务进程,必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。不再用到的内存,没有及时释放,就是内存泄漏(memory leak)。而内存溢出(out of menory),指的是程序需求的内存,超出了系统所能分配的范围。
一、内存泄漏(memory leak)
内存泄漏是每个开发者最终都要面对的问题,它是许多问题的根源:反应迟缓,崩溃,高延迟,以及其他应用问题。
1. 概念
应用程序不再需要占用内存的时候,由于某些原因,内存没有被操作系统或可用内存池回收。
2. 常见内存泄漏
意外的全局变量JS中对于未声明的变量,会在全局范围中创建一个新的变量来对其进行引用。在浏览器中,全局对象是window。
function fn() {
a = 3
console.log(a)
}
fn()
没有及时清理的循环计时器
var intervalId = setInterval(function () {
console.log( '----')
}, 1000)
//未清除当前循环定时器 cLearInterval(intervaLId)
闭包未释放闭包(closure)是一个函数以及其捆绑的周边环境状态(lexical environment,词法环境)的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。在 JAVAScript 中,闭包会随着函数的创建而被同时创建。当闭包被使用,内部函数使用了外部函数的变量,就会造成内存泄漏。
function fn1() {
var a = 1
function fn2() {
var b = ++a
console.log(b)
}
return fn2
}
var f = fn1()
f()
//释放闭包 f = null
3. 怎样避免内存泄漏
减少不必要的全局变量,或者生命周期较长的对象,及时对无用的数据进行垃圾回收;
注意程序逻辑,避免“死循环”之类的;
避免创建过多的对象 原则:不用了的东西要及时归还。
二、垃圾回收机制
因为不是所有无用对象内存都可以被垃圾回收机制回收的,那当不再用到的内存,没有及时回收时,我们叫内存泄漏。那么我们接下来了解下垃圾回收机制。
1.垃圾如何产生?又如何判断垃圾?
简单来说垃圾就是程序不用的内存或者是之前用过了,以后不会再用的内存空间。如何判断垃圾就是看这个对象能否被访问,那如何知道对象能否被访问?有一个专业的词叫可达性。根据对象是否可达来判断。可达就不需要被回收,不可达就需要被回收。
let obj= {name: 'zs'}
obj = [1, 2, 3]
在js中数据分基本数据类型和引用数据类型,引用数据类型在栈中保存的是引用,实际是存储在堆中的。在上面的例子中我们首先创建了一个obj变量指向对象{name: 'zs'},然后又把obj指向了新的数组[1, 2, 3],所以之前的{name: 'zs'}就不可能被访问到了(没有了可达性),就变成了垃圾。
2.为什么要垃圾回收?
从上面的例子可以看出产生了垃圾就会导致浪费内存空间,一个两个还好,多了的话我们的程序可能会越来越卡顿,到最后崩溃。所以就需要垃圾回收机制来帮我们自动清理没用的垃圾,释放出更多的内存来给当前程序使用,这样程序就会一直流畅的运行下去。
3.垃圾回收的方式
垃圾回收机制里面最常用的两个方式就是标记清除法和引用计数法。
标记清除法这是目前浏览器大多基于标记清除法。我们可以分为两个阶段:标记:从根节点遍历为每个可以访问到的对象都打上一个标记,表示该对象可达。清除:在没有可用分块时,对堆内存遍历,若没有被标记为可达对象就将其回收。
引用计数法引用计数法就是追踪每个变量被引用的次数,当引用数为0将可以被回收掉。
三、内存溢出(out of menory)
一种程序运行出现的错误,当程序运行需要的内存超过剩余内存时就会抛出内存溢出的错误。
1.概念
程序要求的内存,超出了系统所能分配的范围。
2.举例
var arr=[]
for (let i = 0; i < 1000000; i++) {
arr[i] = new Array(1000000)
}
//网页直接崩溃,错误代码:Out of Memory
四、实际项目中出现的内存溢出
VUE项目开发时间长了,随着项目越来越大,打包的时间也相应的变长,打包时的内存也增多了。这时候产生了一个问题,在发布项目的时候,会出现类似如下错误的提示。
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation fAIled - JavaScript heap out of memory
out of memory内存溢出,使用内存时只能使用部分内存(64位系统:1.4 GB,32位系统:0.7 GB),这个时候,如果前端项目非常的庞大,Webpack编译时就会占用很多的系统资源,如果超出了V8引擎对默认的内存限制大小时,就会产生内存溢出的错误。
解决办法如下:
// 安装两个npm包 :cross-env increase-memory-limit
// npm install cross-env increase-memory-limit
// 再package.json中添加fix-memory-limit命令
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit",
},
/*
操作完以上步骤之后,可能会报错 “node –max-old-space-size=4096不是内部或外部命令``”该问题的解决办法:
在项目的node_modules.bin下面找到所有的*.cmd文件,
在ENDLOCAL语句的上边一行,修改"%_prog%" 改为 %_prog%, 去掉双引号。
*/
// LIMIT是你想分配的内存大小,然后执行npm run fix-memory-limit。
再执行npm run serve重新启动项目,就不会再内存溢出了。
五、总结
内存泄漏积累过多最终会导致内存溢出,因为系统中的内存是有限的,如果过度占用资源而不及时释放,最后会导致内存不足,从而无法给所需要存储的数据提供足够的内存,从而导致内存溢出。