浏览器内存调试方法

谷歌浏览器调试方法

在Chrome浏览器下，通过开发者工具的performance选项卡，并选中memory选项。

点击左侧圆点⚪开始监控内存的使用情况、事件的耗时、以及GC回收的内存大小和耗时；

FPS：帧信息，当帧数>30就不会觉得卡顿

CPU：当前CPU的占用情况

NET：当前网络的占用情况

HEAP：内存堆的使用情况，这里可以查看内存有无被回收

Frames：页面显示的帧数

Main：按钮的操作和调用的方法

Raster：页面的绘制

Summary：饼状图

Bottom-Up：每个动作的耗时和排序

Call Tree：方法调用的关系

Event Log：事件的日志

通过memory选项卡，新建堆快照查看各个对象占用内存情况，以及对比多个堆快照的区别。
1. 进行函数操作前，选中Heap snapshot 点击左侧远点⚪来查看当前内存的使用情况
2. 运行函数，继续创建新的快照，切换选项卡，选中Objects allocated between Snapshot 1 and Snapshot 2。
  
  在右侧视图中，对比函数函数运行前后的大小，具体内存占用量，(compiled code)意为编译后的代码，closure为闭包， system为当前环境占用内存，array和string即数组和字符串，
  
  在JS中，global对象属于一个兜底对象，换句话说，不属于其他对象的属性和方法，都是它的属性和方法

IE浏览器调试方法

切换到调试工具，点击内存选项。在函数运行前拍摄一次快照，函数运行后拍摄一次快照。即可进行内存对比，

IE调试的优点：比谷歌更加简单方便，容易找到问题点。

IE调试的缺点：没有谷歌调试的信息全，而且当内存占用过大时无法拍摄快照，只能在预览中查看内存的回收情况。可尝试刷新页面，再去拍摄其他占用内存小的快照。

手动触发GC

在谷歌浏览器中，performance和memory选项卡中有个垃圾桶按钮，移入会显示 Collect garbage，

点击即可触发GC。

在IE浏览器中，则需要代码触发GC，代码如下

<body>
    <button onclick="func1()">getSmallObj</button>
    <button onclick="func2()">getLargeObj1</button>
    <button onclick="func3()">getLargeObj2</button>
</body>
 
<script>
    var getLagerObj = function(size) {
        var arr = [];
        // var intSize = parseInt(size);
        for (var j = size; j >= 0; j--) {
            arr.push("qwertyuiopasdfghjklzxcvbnm");
        }
        return arr;
    }

    //全局变量，当页面关闭，才会被回收
    var largeObj1 = null;

    function func1() {
        largeObj1 = getLagerObj(9999);
    }

    //局部变量，当函数执行完，才会被回收
    function func2() {
        largeObj2 = getLagerObj(9999999);
    }

    //手动触发GC，仅作为检查问题的一种手段，一定不要在生产环境中使用，是有兼容问题的
    function func3(){
    	func2();
    	//仅适用于IE浏览器
    	if(typeof window.CollectGarbage === "function"){
    		CollectGarbage();
    	}
    }
</script>