資訊專欄INFORMATION COLUMN
摘要：是一個網(wǎng)頁版的小工具，可以用全新的方式展示性能分析的結(jié)果，幫助開發(fā)者洞悉函數(shù)調(diào)用關(guān)系，優(yōu)化應(yīng)用性能。研究表明這個數(shù)字正對應(yīng)于的值。因此知道了路徑編號，便可以知道那些函數(shù)處在激活狀態(tài)。在中用藍(lán)色表示。
OneProfile 是一個網(wǎng)頁版的小工具，可以用全新的方式展示 JavaScript 性能分析的結(jié)果，幫助開發(fā)者洞悉函數(shù)調(diào)用關(guān)系，優(yōu)化應(yīng)用性能。
點(diǎn)擊打開 OneProfile
背景Chrome Dev Tools 自帶的 CPU Profile 功能非常好用。用它可以方便的生成 JavaScript 的 Flame Chart。
更棒的是你可以把 Flame Chart 導(dǎo)出，留著下次或者拷貝到其它機(jī)器上查看，特別好奇它是怎么實現(xiàn)的。
但是網(wǎng)上關(guān)于它的文件格式以及怎么畫圖的文檔非常稀有，所以我自己摸索了一下它的文件格式,并嘗試著用另一種方式展示 CPU Profile 的結(jié)果。
如何生成 CPU Profile 文件使用最新版的 Chrome 打開任意一個 測試網(wǎng)站，按 F12 打開 Devtools， 切換到 Profiles 頁，點(diǎn)擊 Start 開始
收集 Profile 信息，在當(dāng)前頁面任意滑動鼠標(biāo)等待大約5秒后， 點(diǎn)擊 Stop 停止 Profile。在生成的 CPU Profile 名字上單擊右鍵可以導(dǎo)出 .cpuprofile 后綴名的文件。
你可以自己生成一個，也可以直接下載這個用來測試 sample.cpuprofile
理解 .cpuprofile 文件格式用你的編輯器打開 sample.cpuprofile ，你會驚奇的發(fā)現(xiàn)：
1. sample.cpuprofile 其實就是一個 JSON 格式的文件，有 head, timestamps, samples 等幾個重要的屬性
2. head 指向一個結(jié)點(diǎn)，官方的名字叫CpuProfileNode，同時它的 children 指向子結(jié)點(diǎn), 因此是一個嵌套結(jié)構(gòu)
3. CpuProfileNode 有很多重要的屬性，包括 functionName，lineNumber，columnNumber，hitCount 等
4. timestamps 是一個數(shù)組，記錄著 Profiling 過程中每個采樣點(diǎn)的時間戳
5. 對應(yīng) timestamps 下的每個時間點(diǎn)，samples 數(shù)組相同的位置都會有一個數(shù)字，這個數(shù)字比較神秘，后面解釋
CpuProfileNode 詳解
js{
"functionName": "lineTo",
"scriptId": "0",
"url": "",
"lineNumber": 0,
"columnNumber": 0,
"hitCount": 45, // 被采樣到的次數(shù)
"callUID": 6, // 函數(shù)入口的 UID
"children": [],
"positionTicks": [
{
"line": 1,
"ticks": 45
}
],
"deoptReason": "", // 逆優(yōu)化的原因
"id": 11
}
samples, timestamps 和 CpuProfileNode 的關(guān)系
如果從 head 開始，對 head 結(jié)點(diǎn)及其 children 屬性下的結(jié)點(diǎn)做一次深度優(yōu)先的遍歷，每個可能路徑都會有一個編號。
研究表明這個數(shù)字正對應(yīng)于 samples 的值。因此知道了路徑編號，便可以知道那些函數(shù)處在激活狀態(tài)。在 OneProfile 中用藍(lán)色表示。
鏈接地址
使用 Chrome 打開： OneProfile
圖例
黑色 系統(tǒng)函數(shù)
暗紅色 存在逆優(yōu)化的函數(shù)，鼠標(biāo)懸停可見原因
藍(lán)色 當(dāng)前采樣點(diǎn)活動的函數(shù)
操作
滾輪 縮放窗口
prev 前一個采樣點(diǎn)
next 后一個采樣點(diǎn)
一些用例
某在線地圖網(wǎng)站的前端代碼，紅色較多說明存在大量 v8 無法優(yōu)化的代碼
是不是很像外星人
( 請原諒作者笑點(diǎn)低 >< )
關(guān)于本文相關(guān)的源碼在：
https://github.com/wyvernnot/javascript_performance_measurement/tree/g...;
本文由OneAPM工程師原創(chuàng) ，想閱讀更多技術(shù)文章，請訪問OneAPM官方技術(shù)博客。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85854.html
摘要：關(guān)注于運(yùn)行中的內(nèi)存信息的展示，用可視化的方式還原了，有助于理解內(nèi)存管理。背景運(yùn)行過程中的大部分?jǐn)?shù)據(jù)都保存在堆中，所以性能分析另一個比較重要的方面是內(nèi)存，也就是堆的分析。上周發(fā)布了工具，可以用來動態(tài)地展示的結(jié)果，分析各種函數(shù)的調(diào)用關(guān)系。 OneHeap 關(guān)注于運(yùn)行中的 JavaScript 內(nèi)存信息的展示，用可視化的方式還原了 HeapGraph，有助于理解 v8 內(nèi)存管理。 ...
摘要：如果你的運(yùn)行緩慢，你可以考慮是否能優(yōu)化請求，減少對的操作，盡量少的操，或者犧牲其它的來換取性能。在認(rèn)識描述這些核心元素的過程中，我們也會分享一些當(dāng)我們構(gòu)建的時候遵守的一些經(jīng)驗規(guī)則，一個應(yīng)用應(yīng)該保持健壯和高性能來維持競爭力。 一個開源的前端錯誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團(tuán)隊最近開發(fā)了一款前端錯誤收集工具，名叫 frontend-tracker ，這款...
摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發(fā)生的大事件的詳細(xì)介紹，闡述了從提出到角力到流產(chǎn)的前世今生。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎...
摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
閱讀 1322·2023-04-26 03:05
閱讀 778·2021-10-19 11:43
閱讀 3228·2021-09-26 09:55
閱讀 835·2019-08-30 15:56
閱讀 991·2019-08-30 15:44
閱讀 1246·2019-08-30 15:44
閱讀 2726·2019-08-30 14:23
閱讀 3245·2019-08-30 13:13
