Chrome開發(fā)者工具詳解(4)-Profiles面板

Chrome開發(fā)者工具詳解(4)-Profiles面板

更新時間：2016-10-27

如果上篇中的Timeline面板所提供的信息不能滿足你的要求，你可以使用Profiles面板，利用這個面板你可以追蹤網(wǎng)頁程序的內(nèi)存泄漏問題，進(jìn)一步提升程序的JavaScript執(zhí)行性能。

概述

當(dāng)前使用的Chrome最新版為54.0.2840.71，這個版本的Profiles面板比之前提供的功能更多也更強(qiáng)大，下面是該面板所包含的功能點：

  • Record JavaScript CPU Profile 用于分析網(wǎng)頁上的JavaScript函數(shù)在執(zhí)行過程中的CPU消耗信息。
  • Take Heap Snapshot 創(chuàng)建堆快照用來顯示網(wǎng)頁上的JS對象和相關(guān)的DOM節(jié)點的內(nèi)存分布情況。
  • Record Allocation Timeline 從整個Heap角度記錄內(nèi)存的分配信息的時間軸信息，利用這個可以實現(xiàn)隔離內(nèi)存泄漏問題。
  • Record Allocation Profile 從JS函數(shù)角度記錄內(nèi)存的分配信息。

Record JavaScript CPU Profile簡介

通過選擇Record JavaScript CPU Profile，然后點擊Start，結(jié)合你所要分析的具體場景，你可以重新加載網(wǎng)頁，或者在網(wǎng)頁上進(jìn)行交互，甚至什么都不操作。最后點擊Stop，完成記錄操作。

有三種不同的視圖可供選擇：