亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JavaScript 性能分析新工具 OneProfile

jeffrey_up / 899人閱讀

摘要：是一個(gè)網(wǎng)頁(yè)版的小工具，可以用全新的方式展示性能分析的結(jié)果，幫助開發(fā)者洞悉函數(shù)調(diào)用關(guān)系，優(yōu)化應(yīng)用性能。研究表明這個(gè)數(shù)字正對(duì)應(yīng)于的值。因此知道了路徑編號(hào)，便可以知道那些函數(shù)處在激活狀態(tài)。在中用藍(lán)色表示。

  
OneProfile 是一個(gè)網(wǎng)頁(yè)版的小工具，可以用全新的方式展示 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ī)器上查看，特別好奇它是怎么實(shí)現(xiàn)的。

但是網(wǎng)上關(guān)于它的文件格式以及怎么畫圖的文檔非常稀有，所以我自己摸索了一下它的文件格式,并嘗試著用另一種方式展示 CPU Profile 的結(jié)果。

如何生成 CPU Profile 文件

使用最新版的 Chrome 打開任意一個(gè) 測(cè)試網(wǎng)站，按 F12 打開 Devtools， 切換到 Profiles 頁(yè)，點(diǎn)擊 Start 開始
收集 Profile 信息，在當(dāng)前頁(yè)面任意滑動(dòng)鼠標(biāo)等待大約5秒后， 點(diǎn)擊 Stop 停止 Profile。在生成的 CPU Profile 名字上單擊右鍵可以導(dǎo)出 .cpuprofile 后綴名的文件。

你可以自己生成一個(gè)，也可以直接下載這個(gè)用來測(cè)試 sample.cpuprofile

理解 .cpuprofile 文件格式

用你的編輯器打開 sample.cpuprofile ，你會(huì)驚奇的發(fā)現(xiàn)：

1. sample.cpuprofile 其實(shí)就是一個(gè) JSON 格式的文件，有 head, timestamps, samples 等幾個(gè)重要的屬性

2. head 指向一個(gè)結(jié)點(diǎn)，官方的名字叫CpuProfileNode，同時(shí)它的 children 指向子結(jié)點(diǎn), 因此是一個(gè)嵌套結(jié)構(gòu)

3. CpuProfileNode 有很多重要的屬性，包括 functionName，lineNumber，columnNumber，hitCount 等

4. timestamps 是一個(gè)數(shù)組，記錄著 Profiling 過程中每個(gè)采樣點(diǎn)的時(shí)間戳

5. 對(duì)應(yīng) timestamps 下的每個(gè)時(shí)間點(diǎn)，samples 數(shù)組相同的位置都會(huì)有一個(gè)數(shù)字，這個(gè)數(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 開始，對(duì) head 結(jié)點(diǎn)及其 children 屬性下的結(jié)點(diǎn)做一次深度優(yōu)先的遍歷，每個(gè)可能路徑都會(huì)有一個(gè)編號(hào)。
研究表明這個(gè)數(shù)字正對(duì)應(yīng)于 samples 的值。因此知道了路徑編號(hào)，便可以知道那些函數(shù)處在激活狀態(tài)。在 OneProfile 中用藍(lán)色表示。

OneProfile 使用說明

鏈接地址

使用 Chrome 打開： OneProfile

圖例

黑色 系統(tǒng)函數(shù)

暗紅色 存在逆優(yōu)化的函數(shù)，鼠標(biāo)懸?？梢娫?/p>

藍(lán)色 當(dāng)前采樣點(diǎn)活動(dòng)的函數(shù)

操作

滾輪 縮放窗口

prev 前一個(gè)采樣點(diǎn)

next 后一個(gè)采樣點(diǎn)

一些用例

某在線地圖網(wǎng)站的前端代碼，紅色較多說明存在大量 v8 無法優(yōu)化的代碼

是不是很像外星人

( 請(qǐng)?jiān)徸髡咝c(diǎn)低 >< )

關(guān)于

本文相關(guān)的源碼在：
https://github.com/wyvernnot/javascript_performance_measurement/tree/g...;

  
本文由OneAPM工程師原創(chuàng) ，想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問OneAPM官方技術(shù)博客。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85854.html

相關(guān)文章

  • JavaScript 堆內(nèi)存分析新工具 OneHeap

    摘要：關(guān)注于運(yùn)行中的內(nèi)存信息的展示，用可視化的方式還原了，有助于理解內(nèi)存管理。背景運(yùn)行過程中的大部分?jǐn)?shù)據(jù)都保存在堆中，所以性能分析另一個(gè)比較重要的方面是內(nèi)存，也就是堆的分析。上周發(fā)布了工具，可以用來動(dòng)態(tài)地展示的結(jié)果，分析各種函數(shù)的調(diào)用關(guān)系。 OneHeap 關(guān)注于運(yùn)行中的 JavaScript 內(nèi)存信息的展示，用可視化的方式還原了 HeapGraph，有助于理解 v8 內(nèi)存管理。 ...

    zilu 評(píng)論0 收藏0

  • 性能優(yōu)化

    摘要：如果你的運(yùn)行緩慢，你可以考慮是否能優(yōu)化請(qǐng)求，減少對(duì)的操作，盡量少的操，或者犧牲其它的來?yè)Q取性能。在認(rèn)識(shí)描述這些核心元素的過程中，我們也會(huì)分享一些當(dāng)我們構(gòu)建的時(shí)候遵守的一些經(jīng)驗(yàn)規(guī)則，一個(gè)應(yīng)用應(yīng)該保持健壯和高性能來維持競(jìng)爭(zhēng)力。 一個(gè)開源的前端錯(cuò)誤收集工具 frontend-tracker，你值得收藏~ 蒲公英團(tuán)隊(duì)最近開發(fā)了一款前端錯(cuò)誤收集工具，名叫 frontend-tracker ，這款...

    liangzai_cool 評(píng)論0 收藏0

  • 1月份前端資源分享

    摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享視頻前端技術(shù)論壇融合不可錯(cuò)過的迷你庫(kù)測(cè)試框架實(shí)例教程為你詳細(xì)解讀請(qǐng)求頭的具體含意解析的庫(kù)如果要用前端框架，開發(fā)流程是怎樣的與有什么區(qū)別正確使用的方法是什么流程圖插件小如何讓元素只能輸入純文本前端技術(shù)中 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfront...

    solocoder 評(píng)論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 JavaScript 篇

    摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。背后的故事本文是對(duì)于年之間世界發(fā)生的大事件的詳細(xì)介紹，闡述了從提出到角力到流產(chǎn)的前世今生。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎...

    Vixb 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語(yǔ)言吧！

    摘要：入門，第一個(gè)這是一門很新的語(yǔ)言，年前后正式公布，算起來是比較年輕的編程語(yǔ)言了，更重要的是它是面向程序員的函數(shù)式編程語(yǔ)言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語(yǔ)言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...

    caspar 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<