Timeline可以解決你的程序為什么很緩慢血淌，主要從三個層面來獲取分析數(shù)據(jù)：
簡介：Timeline主要處理包括處理DOM事件,頁面布局渲染或者向屏幕繪制元素這些應(yīng)用。
左上角的四個按鈕依次：
1守问、點擊原點開始錄制，這時我們就開始頁面操作，彈出框開始記錄，點擊finish即可結(jié)束发框；
2、會清除你現(xiàn)有的記錄會話煤墙，以便開始一個新的會話梅惯；
3宪拥、將會對顯示的詳細(xì)信息進(jìn)行過濾，只顯示那些完成耗時超過15ms（可選）的記錄铣减；
4她君、將會強迫V8完成一輪的垃圾回收，在調(diào)試中它很有用徙歼；
最下邊一層四個可選按鈕：
網(wǎng)絡(luò)和HTML解析(藍(lán)色)犁河，JavaScript(黃色)，樣式重計算和布局(紫色)以及繪畫和合成(綠色)事件魄梯；
3中模式：幀模式桨螺、事件模式、內(nèi)存模式
注意下圖capture的四個按鈕酿秸，Memory點擊后灭翔，就是內(nèi)存模式了，所以它是混合在幀模式和事件模式中的辣苏，如果想進(jìn)一步分析內(nèi)存的話肝箱，可以在打開Profiler版面好好研究~
基本用法：1）點擊錄制->開始頁面動畫->結(jié)束錄制；2）通過查看柱狀圖記錄出哪些柱比較高（性能差）萌狂；3）點擊柱圖定位事件記錄档玻，結(jié)合詳情數(shù)據(jù)找出性能卡頓的原因；
事件模式是以事件為導(dǎo)向，觀察錄制間操作的事件經(jīng)過务傲，方便定位哪個操作占用的事件比較頻繁凉当。同時結(jié)合內(nèi)存面板，可以看得出哪個事件消耗的內(nèi)存最大售葡，有沒有合理地進(jìn)行垃圾回收（GC）看杭。
如果內(nèi)存出現(xiàn)鋸齒狀泊窘，如下
那么選擇profiles工具來分析內(nèi)存的問題
要使用這個功能携悯，點擊‘Start’，重復(fù)你懷疑（出現(xiàn)你發(fā)現(xiàn)的那些信息的時刻）會引起內(nèi)存泄露的動作筷笨，這時記錄下第一個快照憔鬼。 接下來點擊record按鈕 ? 來記錄第二個快照，這次不需要與程序進(jìn)行交互
Summary視圖適用于DOM泄漏胃夏，而Comparison視圖擅長于發(fā)現(xiàn)內(nèi)存泄漏的原因
一個典型的應(yīng)用場景是試圖發(fā)現(xiàn)一個你已經(jīng)刪除或者斷開關(guān)聯(lián)的一個DOM節(jié)點是否任然存在照雁。一旦你發(fā)現(xiàn)了造成內(nèi)存占用的代碼，你就可以添加必要的代碼來清除那么你不需要的相關(guān)對象答恶。
使用DevTools中的堆分析儀時
后面兩列的標(biāo)題Shallow和Reetained Size是什么意思饺蚊？
Shallow Size：直接占用內(nèi)存(不包括引用的對象占用的內(nèi)存)，對象本身占用的內(nèi)存悬嗓；字符串和數(shù)組常常會在渲染器內(nèi)存中存儲主要數(shù)據(jù)部分污呼，僅僅在JavaScript對象棧中暴露一個很小的包裝對象。
渲染器內(nèi)存指你分析的頁面在渲染的過程中所用到的所有內(nèi)存：頁面本身的內(nèi)存 + 頁面中的JS堆用到的內(nèi)存 + 頁面觸發(fā)的相關(guān)工作進(jìn)程(workers)中的JS堆用到的內(nèi)存包竹。
Retained Size :包括引用的對象所占用的內(nèi)存,一個對象一但刪除后它引用的依賴對象就不能被GC根(GC root)引用到燕酷，它們所占用的內(nèi)存就會被釋放，一個對象占用總內(nèi)存包括這些依賴對象所占用的內(nèi)存映企。
堆是由各種互相關(guān)聯(lián)的對象組成的網(wǎng)狀結(jié)構(gòu)悟狱。
那么具體要怎么分析呢？各位看官還是移步這里看更專業(yè)的文章
https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javascript-memory-profiling.md
