0xC*_*URU 6 javascript html5 memory-leaks
如何通过以下示例中的<canvas>释放已分配的内存:
<html>
<head>
</head>
<body id="body">
<canvas id="canvas" width=3000 height=2000/>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText("hao ar iu?", 20, 20);
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我尝试将var canvas设置为null(canvas = null),删除画布(删除画布)或动态创建画布并将其附加到"文档"根,然后将其删除:
<div onclick=reload()>CLICK TO RELOAD PAGE</div>
<script>
function reload(){
body.removeChild(canvas);
location.reload();
}
</script>
Run Code Online (Sandbox Code Playgroud)
没有什么变化,分配的内存越来越大,每个页面重新加载,直到我的浏览器占用太多的CPU RAM内存.有时浏览器会崩溃.垃圾收集器有时会清除一些变量.但它占用了太多的内存.我使用Chrome版本25.是否有任何方法可以释放<canvas>内存或引发早期垃圾收集?
你尝试过 JavaScript 运算符删除吗?
delete canvas;
Run Code Online (Sandbox Code Playgroud)
否则你可以尝试这个对我有用的方法:
canvas.parentNode.removeChild(canvas);
Run Code Online (Sandbox Code Playgroud)
您需要确保删除对画布的所有引用,甚至是 DOM 或任何其他对象的引用,以避免内存泄漏。
PS:忘了说你的画布尺寸很大。使画布尺寸尽可能小,以减少内存使用并提高 fps。
PS2:关闭路径将有助于避免内存泄漏