chrome devtools 如何计算性能图表中最后一项的时间?

问题描述 投票:0回答:1

这是我的个人资料示例:

{
  "nodes": [
    {
      "id": 1,
      "callFrame": {
        "functionName": "ROOT",
        "scriptId": "0",
        "url": "",
        "lineNumber": 0,
        "columnNumber": 0
      },
      "hitCount": 0,
      "children": [
        2,
        8
      ]
    },
    {
      "id": 2,
      "callFrame": {
        "functionName": "level-0",
        "scriptId": "0",
        "url": "",
        "lineNumber": 0,
        "columnNumber": 0
      },
      "hitCount": 0,
      "children": [
        3
      ]
    },
    {
      "id": 3,
      "callFrame": {
        "functionName": "level-1",
        "scriptId": "0",
        "url": "",
        "lineNumber": 0,
        "columnNumber": 10
      },
      "hitCount": 0,
      "children": [
        4,
        6
      ]
    },
    {
      "id": 4,
      "callFrame": {
        "functionName": "level-2-1",
        "scriptId": "0",
        "url": "",
        "lineNumber": 5,
        "columnNumber": 10
      },
      "hitCount": 0,
      "children": [
        5
      ]
    },
    {
      "id": 5,
      "callFrame": {
        "functionName": "level-3-1",
        "scriptId": "0",
        "url": "",
        "lineNumber": 13,
        "columnNumber": 10
      },
      "hitCount": 0,
      "positionTicks": [],
      "children": []
    },
    {
      "id": 6,
      "callFrame": {
        "functionName": "level-2-2",
        "scriptId": "0",
        "url": "",
        "lineNumber": 9,
        "columnNumber": 10
      },
      "hitCount": 0,
      "children": [
        7
      ]
    },
    {
      "id": 7,
      "callFrame": {
        "functionName": "level-3-2",
        "scriptId": "0",
        "url": "",
        "lineNumber": 13,
        "columnNumber": 10
      },
      "hitCount": 0,
      "positionTicks": [],
      "children": []
    },
    {
      "id": 8,
      "callFrame": {
        "functionName": "level-0-2",
        "scriptId": "level-0-2",
        "url": "",
        "lineNumber": 0,
        "columnNumber": 0
      },
      "hitCount": 0,
      "positionTicks": [],
      "children": [9]
    },
    {
      "id": 9,
      "callFrame": {
        "functionName": "level-1-2",
        "scriptId": "level-1-2",
        "url": "",
        "lineNumber": 0,
        "columnNumber": 0
      },
      "hitCount": 0,
      "positionTicks": [],
      "children": []
    }

  ],
  "startTime": 1,
  "endTime": 40000,
  "samples": [
    2,
    5,
    6,
    7,
    7,
    7,
    8,
    9
  ],
  "timeDeltas": [
    0,
    5000,
    4000,
    1000,
    500,
    1000,
    1000,
    500
  ]
}

enter image description here

当我把它放在 chrome devtools 上时,我了解了除最后一项之外的所有结果是如何生成的,它的自时间是如何计算的

文档中关于探查器的信息很少https://chromedevtools.github.io/devtools-protocol/tot/Profiler/

也许我正在尝试的个人资料不正确?我手动编写了它以了解它是如何工作的

javascript google-chrome google-chrome-devtools profiler flamegraph
1个回答
0
投票

原来只需要在末尾添加根样本即可。通常配置文件包含它来测量最后一个功能的持续时间

Index: test.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/test.json b/test.json
--- a/test.json (revision 0a5b4910bff63416fec3ec597ee18b99b4f39f62)
+++ b/test.json (date 1703267577313)
@@ -109,7 +109,8 @@
     1,
     1,
     8,
-    9
+    9,
+    1
   ],
   "timeDeltas": [
     0,
@@ -119,7 +120,8 @@
     500,
     1000,
     1000,
-    500
+    500,
+    5000
   ]
 }
 
© www.soinside.com 2019 - 2024. All rights reserved.