Web应用内存分析与内存泄漏定位

var n = 374; // allocates memory for a number 
var s = 'sessionstack'; // allocates memory for a string  
var o = { 
  a: 1, 
  b: null 
}; // allocates memory for an object and its contained values 
var a = [1, null, 'str'];  // (like object) allocates memory for the 
                           // array and its contained values 
function f(a) { 
  return a + 3; 
} // allocates a function (which is a callable object) 
// function expressions also allocate an object 
someElement.addEventListener('click', function() { 
  someElement.style.backgroundColor = 'blue'; 
}, false); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

var o1 = { 
  o2: { 
    x: 1 
  } 
}; 
// 2 objects are created.  
// 'o2' is referenced by 'o1' object as one of its properties. 
// None can be garbage-collected 
 
var o3 = o1; // the 'o3' variable is the second thing that  
            // has a reference to the object pointed by 'o1'.  
                                                        
o1 = 1;      // now, the object that was originally in 'o1' has a          
            // single reference, embodied by the 'o3' variable 
 
var o4 = o3.o2; // reference to 'o2' property of the object. 
                // This object has now 2 references: one as 
                // a property.  
                // The other as the 'o4' variable 
 
o3 = '374'; // The object that was originally in 'o1' has now zero 
            // references to it.  
            // It can be garbage-collected. 
            // However, what was its 'o2' property is still 
            // referenced by the 'o4' variable, so it cannot be 
            // freed. 
 
o4 = null; // what was the 'o2' property of the object originally in 
           // 'o1' has zero references to it.  
           // It can be garbage collected. 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

function f() { 
  var o1 = {}; 
  var o2 = {}; 
  o1.p = o2; // o1 references o2 
  o2.p = o1; // o2 references o1. This creates a cycle. 
} 
 
f(); 
1.
2.
3.
4.
5.
6.
7.
8.

function foo(arg) { 
    bar = "some text"; 
} 
 
// 等价于 
 
function foo(arg) { 
    window.bar = "some text"; 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.

function foo() { 
    this.var1 = "potential accidental global"; 
} 
// Foo called on its own, this points to the global object (window) 
// rather than being undefined. 
foo(); 
1.
2.
3.
4.
5.
6.

function scan(o) { 
  Object.keys(o).forEach(function(key) { 
    var val = o[key]; 
 
    // Stop if object was created in another window 
    if ( 
      typeof val !== "string" && 
      typeof val !== "number" && 
      typeof val !== "boolean" && 
      !(val instanceof Object) 
    ) { 
      debugger; 
      console.log(key); 
    } 
 
    // Traverse the nested object hierarchy 
  }); 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

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. 
1.
2.
3.
4.
5.
6.
7.

var theThing = null; 
var replaceThing = function () { 
  var originalThing = theThing; 
  var unused = function () { 
    if (originalThing) // a reference to 'originalThing' 
      console.log("hi"); 
  }; 
  theThing = { 
    longStr: new Array(1000000).join('*'), 
    someMethod: function () { 
      console.log("message"); 
    } 
  }; 
}; 
setInterval(replaceThing, 1000); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

var elements = { 
    button: document.getElementById('button'), 
    image: document.getElementById('image') 
}; 
function doStuff() { 
    elements.image.src = 'http://example.com/image_name.png'; 
} 
function removeImage() { 
    // The image is a direct child of the body element. 
    document.body.removeChild(document.getElementById('image')); 
    // At this point, we still have a reference to #button in the 
    //global elements object. In other words, the button element is 
    //still in memory and cannot be collected by the GC. 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

var element = document.getElementById('launch-button'); 
var counter = 0; 
function onClick(event) { 
   counter++; 
   element.innerHtml = 'text ' + counter; 
} 
element.addEventListener('click', onClick); 
// Do stuff 
element.removeEventListener('click', onClick); 
element.parentNode.removeChild(element); 
// Now when element goes out of scope, 
// both element and onClick will be collected even in old browsers // that don't handle cycles well. 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

// 子页面内 
window.top.innerObject = someInsideObject 
window.top.document.addEventLister(‘click’, function() { … }); 
 
// 外部页面 
 innerObject = iframeEl.contentWindow.someInsideObject 
1.
2.
3.
4.
5.
6.

<a href="#">Remove</a> 
<iframe src="url" /> 
 
$('a').click(function(){ 
    $('iframe')[0].contentWindow.location.reload(); 
    // 线上环境实测重置 src 效果会更好 
    // $('iframe')[0].src = "javascript:false"; 
    setTimeout(function(){ 
       $('iframe').remove(); 
    }, 1000); 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

window.onbeforeunload = function(){ 
    $(document).unbind().die();    //remove listeners on document 
    $(document).find('*').unbind().die(); //remove listeners on all nodes 
    //clean up cookies 
    /remove items from localStorage 
} 
1.
2.
3.
4.
5.
6.

function send() { 
 setInterval(function() {  
    const data = { 
     array1: get100Arrays(), 
     array2: get500Arrays() 
    }; 
 
    let json = JSON.stringify( data ); 
    let arbfr = str2ab (json); 
    worker.postMessage(arbfr, [arbfr]); 
  }, 10); 
} 
 
 
function str2ab(str) { 
   var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char 
   var bufView = new Uint16Array(buf); 
   for (var i=0, strLen=str.length; i<strLen; i++) { 
     bufView[i] = str.charCodeAt(i); 
   } 
   return buf; 
 } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

let ab = new ArrayBuffer(1); 
 
try { 
   worker.postMessage(ab, [ab]); 
 
   if (ab.byteLength) { 
      console.log('TRANSFERABLE OBJECTS are not supported in your browser!'); 
   }  
   else { 
     console.log('USING TRANSFERABLE OBJECTS'); 
   } 
}  
catch(e) { 
  console.log('TRANSFERABLE OBJECTS are not supported in your browser!'); 
}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.