本文導讀：Chrome谷歌瀏覽器開發者工具中Profiless面板功能的作用主要是監控網頁中各種方法執行時間和內存的變化，利用這個面板你可以追蹤網頁程序的內存泄漏問題，進一步提升程序的JavaScript執行性能。下面簡單介紹Profiles的使用
一、Profiles在哪里
F12調出Chrome開發者工具，即可看到Profiles選項。
二、Profiles各功能點介紹
1、Profiles界面分為左右兩個區域，左邊區域是放文件的區域，右邊是展示數據的區域。如圖
2、右邊區域有三個選項，它們分別代表者不同的功能:
(1)、Collect JavaScript CPU Profile
監控函數執行期花費的時間，用於分析網頁上的JavaScript函數在執行過程中的CPU消耗信息。
(2)、Take Heap Snapshot
創建堆快照用來顯示網頁上的JS對象和相關的DOM節點的內存分布情況。
(3)、Record Heap Allocations
實時監控記錄內存變化(對象分配跟蹤)，利用這個可以實現隔離內存泄漏問題。
三、Collect JavaScript CPU Profile的使用
1、監控代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn"> click me</button>
<script type="text/javascript">
function a() { 
console.log('hello world'); 
} function b() { a(); } function c() { b(); } 
document.getElementById('btn').addEventListener('click', c, true); </script> </body> </html>
2、在右邊區域中選擇Collect JavaScript CPU Profile 選項，點擊下方的Start按鈕（也可以點擊左邊的黑色圓圈），這時候Chrome會開始記錄網頁的方法執行，然后我們點擊界面的按鈕來執行函數。最后再點擊右邊區域的Stop按鈕（或者左邊的紅色圓圈），這時監控就結束了。左邊Profiles會列出一個文件，單擊可以看到如下界面：
3、展示類型有三種：
(1)、 Heavy(Bottom Up) （自底向上）
根據對性能的消耗影響列出所有的函數，並可以查看該函數的調用路徑。例如
(2)、 Chart（圖表類型）
[1]、按時間先后順序顯示的火焰圖
[2]、該視圖會以時間順序展示CPU的性能情況，視圖主要分成兩塊：
{1}、Overview 整個錄制結果的鳥瞰圖（概覽），柱形條的高度對應了調用堆棧的深度，也就是說柱形條高度越高，調用堆棧的深度越深。
{2}、Call Stacks 在錄制過程中被調用的函數的深入分析視圖（調用堆棧），橫軸表示時間，縱軸表示調用棧，自上而下的表示函數的調用情況。也就是說上面的函數調用在它下面的函數。
[3]、視圖中的函數顏色不同於其它的面板，這里面的函數顏色標記是隨機顯示的。然而相同的函數調用顏色標記是相同的。
[4]、其中縱軸表示的函數調用堆棧高度僅僅函數的調用嵌套層次比較深，不表示其重要性很高，但是橫軸上一個很寬的柱形條則意味着函數的調用需要一個很長的時間去完成，那么你就考慮去做一些優化操作。
[5]、將鼠標移到Call Stacks中的函數上可以顯示函數的名稱和時間相關的數據，會提供如下信息：
{1}、Name 函數名稱
{2}、Self time 函數的本次調用運行的時間，僅僅包含該函數本身的運行時間，不包含它所調用的子函數的時間。
{3}、Total time 函數的本次調用運行的總時間，包含它所調用的子函數的運行時間。
{4}、URL 函數定義在文件中所在的位置，其格式為file.js:100，表示函數在file.js文件中的第100行。
{5}、Aggregated self time 在這次的錄制過程中函數調用運行的總時間，不包含它所調用的子函數的時間。
{6}、Aggregated total time 在這次的錄制過程中所有的函數調用運行的總時間，包含它所調用的子函數的時間。
{7}、Not optimized 如果優化器檢測到該函數有潛在的優化空間，那么該函數會被列在這里。
(3)、 Tree(Top Down) (自頂向下)
從調用棧的頂端（最初調用的位置）開始，顯示調用結構的總體的樹狀圖情況。如圖
四、Take Heap Snapshot的使用
通過創建堆快照可以查看創建快照時網頁上的JS對象和DOM節點的內存分布情況。利用該工具你可以創建JS的堆快照、內存分析圖、對比堆快照以及定位內存泄漏問題。
1、選中Take Heap Snapshot,點擊Take Snapshot按鈕即可獲取快照，在每一次獲取快照前都會自動執行垃圾回收操作。如圖
可以看到左邊區域生成個文件，文件名下方有數字，表示這個張快照記錄到的內存總大小（此時為9.9M）。右邊區域是個列表，它分為五列，表頭可以按照數值大小手動排序。
2、表頭中從左到右的五列的含義
(1)、Constructor(構造函數)
[1]、表示所有通過該構造函數生成的對象
[2]、這些構造函數都代表的含義
{1}、(global property)
全局對象（比如window）和通過它引用的對象之間的中間對象，如果一個對象是由Person構造函數生成並被全局對象所引用，那么它們的引用路徑關系就像這樣[global] > (global property) > Person。這跟常規的對象之間直接引用相比，采用中間對象主要是考慮性能的原因。全局對象的改變是很頻繁的，而非全局變量的屬性訪問最優化方案對全局變量是不適用的。
(roots) 它們可以是由引擎自己的目標創建的一些引用，這個引擎可以緩存引用的對象，但所有的這些引用都是弱引用，它們不會阻止引用對象被回收。
{2}、(closure)
一些函數閉包中的一組對象的引用。
{3}、(array, string, number, regexp)
引用了數組(Array),字符串(String),數字(Number)或正則表達式的對象類型。
{4}、HTMLDivElement, HTMLAnchorElement, DocumentFragment等
你的代碼中對元素(elements)的引用或者指定的document對象的引用。
(2)、Distance
對象到達GC根的最短距離
(3)、Objects Count
對象的實例數
(4)、Shallow size
對應構造函數生成的對象的shallow sizes(直接占用內存)總數
(5)、Retained size
展示了對應對象所占用的最大內存
3、點擊展開它們查看詳細項，@符號表示該對象ID:
4、堆快照提供了不同的視角來進行查看
(1)、Summary
該視圖按照構造函數進行分組，用它可以捕獲對象和它們使用的內存情況，對於跟蹤定位DOM節點的內存泄漏特別有用。
該視圖會顯示所有的對象信息，點擊其中的一個對象進行展開可查看更詳細的實例信息。鼠標移動到某個對象上會顯示該對象實例的詳情信息。如圖
(2)、Comparison視圖
通過比較多個快照之間的差異來找出內存泄露的對象，為了驗證某個程序的操作不會引起內存泄露（通常會執行一個操作后再執行一個對應的相反操作，比如打開一個文檔后再關閉它，應該是沒有產生內存泄露問題的），你可以執行如下步驟：
[1]、在執行一個操作之前拍一個快照。
[2]、執行一個操作，通過你認為可能會引起內存泄露的一次頁面交互操作。
[3]、執行一個相反的操作。
[4]、拍第二個快照，切換到Comparison視圖，並與第一個快照進行對比。
切換到Comparison視圖之后，就可以看到兩個不同的快照之間的差別。
(3)、Containment視圖
該視圖本質上就是應用程序的對象結構的“鳥瞰圖”，允許你去深入分析函數的閉包，了解應用程序底層的內存使用情況。
(4)、Statistics視圖
該視圖是堆快照的總的分布統計情況：
五、Record Heap Allocations.（對象跟蹤器）
1、作用是為為我們拍下一系列的快照（頻率為50ms），為我們檢測在啟用它的時候每個對象的生存情況。形象一點說就是假如拍攝內存快照的功能是照相那么它功能相當於錄像。
2、當我們啟用start按鈕的時候它便開始錄像，直到結束。你會看到左側區域上半部分有一些藍色和灰色的柱條。灰色的表示你監控這段時間內活躍過的對象，但是被回收掉了。藍色的表示依舊沒有沒回收。你依舊可以滑動滾輪縮放時間軸。
3、如圖
