您的位置是:网站首页>Javascript编程Javascript编程

JavaScript常见几种的内存泄漏

少儿编程网2020-11-20 16:26:04Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介javascript栏目教程介绍常见的内存泄漏。前言1介绍2内存泄露的主要原因3常见的内存泄露3.1全局变量3.2计时器3.3多处引用3.4闭包4Chrome内存分析工具资料前言在阅读这篇博客之前,你或许需要具备一些JavaScript内存管理的知识:V8中JavaScript的内存管理与垃圾回收1

JavaScript栏目教程介绍常见的内存泄漏。

CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • 前言
  • 1 介绍
  • 2 内存泄露的主要原因
  • 3 常见的内存泄露
    • 3.1 全局变量
    • 3.2 计时器
    • 3.3 多处引用
    • 3.4 闭包
  • 4 Chrome内存分析工具
  • 资料

前言

在阅读这篇博客之前,你或许需要具备一些JavaScript内存管理的知识:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • V8中JavaScript的内存管理与垃圾回收

1 介绍

内存泄露(Memory Leaks):是指应用程序已经不再需要的内存,由于某种原因未返回给操作系统或者空闲内存池(Pool of Free Memory)。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

内存泄露可能带来的问题:变慢、卡顿、高延迟。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2 内存泄露的主要原因

JavaScript内存泄漏的主要原因在于一些不再需要的引用(Unwanted References)。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

所谓的Unwanted References指的是:有一些内存,其实开发人员已经不再需要了,但是由于某种原因,这些内存仍然被标记并保留在活动根目录树中。Unwanted References就是指对这些内存的引用。在JavaScript上下文中,Unwanted References是一些不再使用的变量,这些变量指向了原本可以释放的一些内存。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

3 常见的内存泄露

3.1 全局变量

首先,我们得知道,JavaScript中的全局变量是由根节点(root node)引用的,因此它们在应用程序的整个生命周期中都不会被垃圾回收。 CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

场景一:在JavaScript中,如果引用未声明的变量,将会导致,在全局环境中创建新的变量。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function foo(arg) {    
bar = "this is a hidden global variable";
}

上面这串代码,实际上如下:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function foo(arg) {   
window.bar = "this is an explicit global variable";
}

假如,我们希望bar这个变量仅在foo函数作用域内部使用,但上面这种情况就会意外地在全局作用域内创建bar,这将造成内存泄漏。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

场景二:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function foo() {    
this.variable = "potential accidental global";
}foo();

同样的,如果我们希望bar这个变量仅在foo函数作用域内部使用,但如果不知道foo函数内部的this指向全局对象,将造成内存泄露。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

建议:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  1. 避免意外地创建全局变量。比如,我们可以使用严格模式,则本节的第一段代码将报错,而不会创建全局变量。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  2. 减少创建全局变量。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  3. 如果必须使用全局变量来存储大量数据,请确保在处理完数据后将其置null或重新分配。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

3.2 计时器

场景举例:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

for (var i = 0; i < 100000; i++) 
{    
var buggyObject = {        
callAgain: function () {            
var ref = this;            
var val = setTimeout(function () 
{                
ref.callAgain();            
}, 10);        
}    
}    
buggyObject.callAgain();    
buggyObject = null;}

3.3 多处引用

多处引用(Multiple references):当多个对象均引用同一对象时,但凡其中一个引用没有清除,都将导致被引用对象无法GC。 CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

场景一:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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);    
// Much more logic}function removeButton() 
{    // The button is a direct child of body.    
document.body.removeChild(document.getElementById('button'));    
// At this point, we still have a reference to #button in the global    
// elements dictionary. In other words, the button element is still in    
// memory and cannot be collected by the GC.s}

在上面这种情况中,我们对#button的保持两个引用:一个在DOM树中,另一个在elements对象中。 如果将来决定回收#button,则需要使两个引用均不可访问。在上面的代码中,由于我们只清除了来自DOM树的引用,所以#button仍然存在内存中,而不会被GC。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

场景二: 如果我们想要回收某个table,但我们保持着对这个table中某个单元格(cell)的引用,这个时候将导致整个table都保存在内存中,无法GC。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

3.4 闭包

闭包(Closure):闭包是一个函数,它可以访问那些定义在它的包围作用域(Enclosing Scope)里的变量,即使这个包围作用域已经结束。因此,闭包具有记忆周围环境(Context)的功能。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

场景举例:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

var newElem;function outer() 
{   
var someText = new Array(1000000);   
var elem = newElem;   
function inner() 
{       if (elem) return someText;  
 }   
 return function () {};
 }setInterval(function ()
  {   newElem = outer();}, 5);

在这个例子中,有两个闭包:一个是inner,另一个是匿名函数function () {}。其中,inner闭包引用了someText和elem,并且,inner永远也不会被调用。可是,我们需要注意:相同父作用域的闭包,他们能够共享context。 也就是说,在这个例子中,inner的someText和elem将和匿名函数function () {}共享。然而,这个匿名函数之后会被return返回,并且赋值给newElem。只要newElem还引用着这个匿名函数,那么,someText和elem就不会被GC。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

同时,我们还要注意到,outer函数内部执行了var elem = newElem;,而这个newElem引用了上一次调用的outer返回的匿名函数。试想,第n次调用outer将保持着第n-1次调用的outer中的匿名函数,而这个匿名函数由保持着对elem的引用,进而保持着对n-2次的...因此,这将造成内存泄漏。 CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

解决方案:setInterval中的参数1的代码改为newElem = outer()();CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

这一节内容的具体剖析,可以见资料1和资料2。CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

4 Chrome内存分析工具

Chrome(**新的86版本)开发者工具中有两个关于内存的分析工具:CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  1. PerformanceCbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  2. MemoryCbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

相关免费学习推荐:javascript(视频)CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

以上就是JavaScript常见几种的内存泄漏的详细内容,更多请关注少儿编程网其它相关文章!CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网CbB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

JavaScript常见几种的内存泄漏

      匿名评论
    • 评论
    人参与,条评论
    JavaScript常见几种的内存泄漏

微信公众号

免费视频教程

先知道