Observe the various types of variable memory footprint by heapdump（通过heapdump直观观察JS变量内存占用情况）

memory.js

'use strict';
/*
 * 使用heapdump这个工具，可以在Nodejs中做各种「内存探索实验」
 *
 * 运行脚本
 * node --expose-gc memory.js
 * 
 * 会在当前目录下生成一列 n.xxxx.heapsnapshot 的文件，可以在Chrome DevTools > Memory 界面导入，详细分析
 */
var heapdump = require('heapdump');

var count = 0;
function cleardump(name){
    // 手动执行一次垃圾回收，保证获取的内存使用状态准确
    global.gc(); 
    heapdump.writeSnapshot(`./${count++}.${name}.heapsnapshot`);
    console.log( `${name}\t${process.memoryUsage().rss}` );
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * 以下实验开始 * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

//记录一个参照dump
cleardump('init');



// -- 1. 计量一个Array(10w)内存占用
global.arr_10w = Array(100 * 1000);

cleardump('array10w');





// -- 2. 计算10w个闭包内存占用
for(var i=0; i< 100*1000; i++){
    arr_10w[i] = testMemRatio(''+ i);
}

cleardump('array10w_closure');





// -- 3. 计算10w个字符串的数组
var code = testMemRatio.toString();
global.arr_str = Array(100 * 1000);
arr_str.fill(code);

cleardump('array10w_str');



// -- 4. 计算10w个字符串的数组
global.arr_strct = [];
for(var i=0; i< 100*1000; i++){
    //arr_strct.push( testMemRatio.toString() + i );
    //为了避开V8对 concat字符串的优化 做复杂操作
    arr_strct.push( testMemRatio.toString().replace(/=/g, i) );
}

cleardump('array10w_str_concat');



// -- 5. 计算10w个字符串的数组
global.arr_strrc = [];
for(var i=0; i< 100*1000; i++){
    arr_strrc.push( new String(testMemRatio.toString() ));
}

cleardump('array10w_str_recreate');




// -- 6. 计算字符串拼接
global.bigstr = arr_str.slice(0, 1000).join('');

cleardump('bigstr1k');





// -- 7. 计算一个大json占用
global.jsondata = '[{"name":"Event Binder","desc":"Bind a callback to any event not natively supported by AngularJS","src":"https://github.com/angular-ui/ui-event","home":"https://htmlpreview.github.io/?https://github.com/angular-ui/ui-event/master/demo/index.html","$$hashKey":"object:10"},{"name":"Mask","desc":"Apply a mask on an input field so the user can only type pre-determined pattern.","src":"https://github.com/angular-ui/ui-mask","home":"https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html","$$hashKey":"object:17"},{"name":"Indeterminate","desc":"Provides an easy way to toggle a checkbox input\'s special \"indeterminate\" property. This is a visual toggle only and in no way affects the model or value outside of native browser behavior at this time.","src":"https://github.com/angular-ui/ui-indeterminate","home":"https://htmlpreview.github.io/?https://github.com/angular-ui/ui-indeterminate/master/demo/index.html","$$hashKey":"object:13"},{"name":"Validate","desc":"General-purpose validator for ngModel.","src":"https://github.com/angular-ui/ui-validate","home":"https://htmlpreview.github.io/?https://github.com/angular-ui/ui-validate/master/demo/index.html","$$hashKey":"object:28"},{"name":"Scrollpoint","desc":"Add a \"ui-scrollpoint\" class to elements when the page scrolls past them. (previously known as scrollfix)","src":"https://github.com/angular-ui/ui-scrollpoint","home":"https://htmlpreview.github.io/?https://github.com/angular-ui/ui-scrollpoint/master/demo/index.html","$$hashKey":"object:21"},{"name":"Uploader","desc":"Customizable file uploader","src":"https://github.com/angular-ui/ui-uploader","home":"https://htmlpreview.github.io/?https://github.com/angular-ui/ui-uploader/master/demo/index.html","$$hashKey":"object:27"},{"name":"CodeMirror","desc":"This directive allows you to add CodeMirror editor to your textarea elements.","src":"https://github.com/angular-ui/ui-codemirror","home":"https://angular-ui.github.io/ui-codemirror/","$$hashKey":"object:8"},{"name":"Ace","desc":"This directive allows you to add ACE editor elements.","src":"https://github.com/angular-ui/ui-ace","home":"https://angular-ui.github.io/ui-ace/","$$hashKey":"object:3"},{"name":"Calendar","desc":"A complete AngularJS directive for the Arshaw FullCalendar.","src":"https://github.com/angular-ui/ui-calendar","home":"https://angular-ui.github.io/ui-calendar/","$$hashKey":"object:6"},{"name":"Map","desc":"This directive allows you to add Google Maps Javascript API elements.","src":"https://github.com/angular-ui/ui-map","home":"http://angular-ui.github.io/ui-map/","$$hashKey":"object:16"},{"name":"Leaflet","desc":"This directive allows you to embed and interact with maps managed by Leaflet library.","src":"https://github.com/angular-ui/ui-leaflet","home":"http://angular-ui.github.io/ui-leaflet/","$$hashKey":"object:15"},{"name":"Date","desc":"jQuery UI Datepicker for AngularJS","src":"https://github.com/angular-ui/ui-date","home":"https://angular-ui.github.io/ui-date/","$$hashKey":"object:9"},{"name":"Select","desc":"AngularJS-native version of Select2 and Selectize","src":"https://github.com/angular-ui/ui-select","home":"https://angular-ui.github.io/ui-select/","$$hashKey":"object:22"},{"name":"TinyMCE","desc":"This directive allows you to add a TinyMCE editor to your form elements.","src":"https://github.com/angular-ui/ui-tinymce","home":"","$$hashKey":"object:25"},{"name":"Sortable","desc":"jQuery UI Sortable for AngularJS","src":"https://github.com/angular-ui/ui-sortable","home":"https://angular-ui.github.io/ui-sortable/","$$hashKey":"object:24"},{"name":"Alias","desc":"Create concise aliases for third-party directives and templates","src":"https://github.com/angular-ui/ui-alias","home":"","$$hashKey":"object:4"},{"name":"Bootstrap","desc":"Bootstrap components written in pure AngularJS","src":"https://github.com/angular-ui/bootstrap","home":"https://angular-ui.github.io/bootstrap/","$$hashKey":"object:5"},{"name":"Grid","desc":"Grid virtualization written natively in AngularJS","src":"https://github.com/angular-ui/ui-grid","home":"http://ui-grid.info/","$$hashKey":"object:12"},{"name":"Router","desc":"The de-facto solution to flexible routing with nested views in AngularJS","src":"https://github.com/angular-ui/ui-router","home":"https://angular-ui.github.io/ui-router/site/","$$hashKey":"object:19"},{"name":"Google maps","desc":"AngularJS directives for the Google Maps Javascript API","src":"https://github.com/angular-ui/angular-google-maps","home":"https://angular-ui.github.io/angular-google-maps","$$hashKey":"object:11"},{"name":"Slider","desc":"jQuery UI Slider for AngularJS","src":"https://github.com/angular-ui/ui-slider","home":"https://htmlpreview.github.io/?https://github.com/angular-ui/ui-slider/master/demo/index.html","$$hashKey":"object:23"},{"name":"Layout","desc":"This directive allows you to split stuff","src":"https://github.com/angular-ui/ui-layout","home":"https://angular-ui.github.io/ui-layout/","$$hashKey":"object:14"},{"name":"Chart with jQplot","desc":"This directive allows you to add a jqPlot graph to your application","src":"https://github.com/angular-ui/ui-chart","home":"https://angular-ui.github.io/ui-chart","$$hashKey":"object:7"},{"name":"Tour","desc":"A native tour-type directive that will lace easily-controllable tooltips throughout your app","src":"https://github.com/angular-ui/ui-tour","home":"https://angular-ui.github.io/ui-tour/demo/demo.html","$$hashKey":"object:26"},{"name":"Scroll","desc":"uiScroll directive solves this problem by dynamically destroying elements as they become invisible and recreating them if they become visible again","src":"https://github.com/angular-ui/ui-scroll","home":"http://angular-ui.github.io/ui-scroll/demo/","$$hashKey":"object:20"},{"name":"Mention","desc":"Facebook-like @mentions for text inputs built around composability","src":"https://github.com/angular-ui/ui-mention","home":"http://angular-ui.github.io/ui-mention/example/","$$hashKey":"object:18"}]';

cleardump('bigjson');




// -- 8. 计算JSON对象占用
global.bigfor = [];
for(var i=0; i<1000; i++){ bigfor.push( JSON.parse(jsondata) ) }

cleardump('array1k_jsonobj');


//TODO: 不知道为什么  必须挂在global上 看comparison才清晰，否则看起来比较困惑 没规律
global.arr_10w = null
global.arr_str = null
global.arr_strct = null
global.arr_strrc = null
global.bigstr = null
global.jsondata = null
global.bigfor = null

cleardump('clear');

// 实验结束


//随便搞一个函数构造闭包
function testMemRatio(name){

    function scrollToBottom(ele, diff, target) {
        var top = ele.scrollTop();
        var h = ele.height();
        var scroll_top = 0;
        if (diff == 0) {
            top = 0;
        } else if (diff > 0) {
            top = diff;
        }
        if (target != undefined && target > h) {
            scroll_top = target;
        } else if (target != undefined && target <= h) {
            scroll_top = 0;
        } else {
            scroll_top = top + h;
        }
        setTimeout(function() {
            ele.scrollTop(scroll_top);
        }, 0);
    }

    return scrollToBottom;
}