何为内存泄漏：由于疏忽或错误造成程序未能释放已经不再使用的内存。内存泄漏并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。
JavaScript造成内存泄漏的几种原因分析：
1、意外的全局变量
js对未声明变量会在全局最高对象上创建它的引用，（是以属性存在的，而不是变量），如果在游览器上就是window对象，如果在node环境下就是global;如果未声明的变量缓存大量的数据，它可能只有在页面被刷新或者被关闭的时候才会释放内存，这样就造成了内存意外泄漏。如下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script type="text/javascript">
function testfunc() {
bfwname = "线上技术学习开发平台"
}
testfunc()
console.log(window)
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script type="text/javascript">
function testfunc() {
this.bfwname = "线上技术学习开发平台"
}
testfunc()
console.log(window.bfwname)
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script type="text/javascript">
function Bfw(name) {
function sendName() {
console.log(name)
}
return sendName
}
var test = Bfw("线上技术学习开发平台")
test() //tokey
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
var add = document.querySelector("#add");
var remove = document.querySelector("#remove");
var main = document.querySelector(".main")
var test = document.querySelector(".test")
add.onclick = function () {
var itemN = document.createElement('div')
var txt = document.createTextNode('上')
itemN.appendChild(txt)
main.appendChild(itemN)
}
remove.onclick = function () {
main.removeChild(test)
}
});
</script>
</head>
<body>
<div class="main">
<div class="test">
天
</div>
<div class="item">
天
</div>
<div class="item">
向
</div>
</div>
<button id="add">点击我增加</button>
<button id="remove">点击我减少</button>
</body>
</html>
5、被遗忘的timers
js中常用的定时器setInterval()、setTimeout().他们都是规定延迟一定的时间执行某个代码，而其中setInterval()和链式setTimeout()在使用完之后如果没有手动关闭，会一直存在执行占用内存，所以在不用的时候我们可以通过clearInterval()、clearTimeout() 来关闭其对应的定时器，释放内存。熟悉朋友都知道这类定时器是有误差的，所以游览器给出了专门的API-requestAnimationFrame()；大家可以试一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
var serverData = loadData();
setInterval(function() {
var renderer = document.getElementById('renderer');
if (renderer) {
renderer.innerHTML = JSON.stringify(serverData);
}
}, 5000); //This will be executed every ~5 seconds.
});
</script>
</head>
<body>
<div id="renderer">
</div>
</body>
</html>这个例子阐述着 timers 可能发生的情况：计时器会引用不再需要的节点或数据。
{{collectdata}}
网友评论0