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