谷歌瀏覽器調試方法
-
在Chrome瀏覽器下，通過開發者工具的
performance選項卡，並選中memory選項。點擊左側圓點⚪開始監控內存的使用情況、事件的耗時、以及GC回收的內存大小和耗時；
FPS：幀信息，當幀數>30就不會覺得卡頓
CPU：當前CPU的占用情況
NET：當前網絡的占用情況
HEAP：內存堆的使用情況，這里可以查看內存有無被回收
Frames： 頁面顯示的幀數
Main：按鈕的操作和調用的方法
Raster：頁面的繪制
Summary：餅狀圖
Bottom-Up：每個動作的耗時和排序
Call Tree：方法調用的關系
Event Log：事件的日志
-
通過
memory選項卡，新建堆快照查看各個對象占用內存情況，以及對比多個堆快照的區別。-
進行函數操作前，選中Heap snapshot 點擊左側遠點⚪來查看當前內存的使用情況
-
運行函數，繼續創建新的快照，切換選項卡，選中
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>