推薦閱讀：解決內存問題
1. 任務管理器
我們看看下面這幅圖：
內存占用空間：原生內存，Dom節點就是存在原生內存里面的。
Javascript使用的內存：代表JS堆內存，我們只需要關心括號里面的值（實時值）就可以了，JavaScript對象就存在JS堆里面。
2. Performance
我們看看下面這幅圖，我在不停給vue的v-for加元素，很明顯的Nodes不斷在增長，但是JS Heap卻起起落落。
JS堆占用上升我們可以理解，但是為什么會下降了，我們放大看可以看到，每次下降都是GC（garbage collection 垃圾回收）執行過后。
所以我們不但可以利用performance來看JS堆的使用情況，還可以看線程在執行什么任務，占用了多久時間。
3.Memory 拍攝堆快照
剛剛我們我們在任務管理器和Performance可以看到JS Heap的大小和趨勢，但是我們沒辦法看到堆里面的細節內存，這個時候，我們可以到Memory頁簽，拍攝一個堆快照，看看里面的細節內容。
下面這幅圖我們看到了堆里面都有什么對象，其中非常醒目的2列就是shallow size 和 Retained Size (推薦閱讀：內存術語)
Shallow Size：淺層大小，就是對象本身的大小（不包括它內部引用的對象），這個我們通常不太關注
Retained Size：保留大小，就是如果GC回收這個對象后，可以釋放多少內存，這個我們非常關注
以下面這幅圖為例，VueComponent本身的大小非常小，但是它的Retained Size很大，占了總占用的60%，如果把VueComponent銷毀，我們就可以釋放出16.85M的內存。
這個是典型的小對象，導致大問題。對象本身不大，但是引用了一些大對象，使得這些大對象沒辦法被GC回收。
好奇的我看了下，vue給對象加上雙向綁定的話，占用的內存多了多少。newObj是我自定義寫的構造函數，可以看到，上面一副圖的newObj占了6.16M(加了getter setter的雙向綁定)，下面這幅圖newObj只占用640K。可以判斷出來，加了雙向綁定，對象本身是10倍的內存占用。這個還不排除Watcher的占用 (不過watcher通常占用不多，這個例子的話是從1k變成了837k)
4. Performance Monitor
還有一個入口比較隱蔽的內存監測器，在下圖這里打開。
這個監測器我理解就是上面說到的Performance的實時簡化版本，上面的Performance可以錄快照，可以看到每個點比較詳細的信息，但是不是實時的。
而這個Performance Monitor是實時的，但是沒辦法像Performance一樣可以看到這么多細節信息。
