• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5    <title>quickstart_arkts</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <style>
8      code[class*='smartperf-'],
9      pre[class*='smartperf-'] {
10        color: #333333;
11        background: none;
12        font-family: Helvetica;
13        line-height: 1.6;
14        text-align: left;
15        white-space: pre;
16        -moz-tab-size: 9;
17        -o-tab-size: 9;
18        tab-size: 8;
19        -webkit-hyphens: none;
20        -moz-hyphens: none;
21        -ms-hyphens: none;
22        hyphens: none;
23      }
24
25      /* Code blocks */
26      pre[class*='smartperf-'] {
27        padding: 0.9em;
28        overflow: auto;
29        border-radius: 2px;
30        background: #f5f5f4;
31      }
32
33      /* Inline code */
34      :not(pre) > code[class*='smartperf-'] {
35        white-space: normal;
36        background: #fcf8f8;
37        padding: 1px 0.2em;
38        border-radius: 1px 0.3em;
39      }
40
41      .tk.comment,
42      .tk.blockquote {
43        color: #8c918c;
44      }
45
46      .tk.cdata {
47        color: #183898;
48      }
49
50      .tk.doctype,
51      .tk.punctuation,
52      .tk.variable,
53      .tk.macro.property {
54        color: #424242;
55      }
56
57      .tk.operator,
58      .tk.important,
59      .tk.keyword,
60      .tk.rule,
61      .tk.builtin {
62        color: #b71d65;
63      }
64
65      .tk.string,
66      .tk.url,
67      .tk.regex,
68      .tk.attr-value {
69        color: #16338d;
70      }
71
72      .tk.property,
73      .tk.number,
74      .tk.boolean,
75      .tk.entity,
76      .tk.atrule,
77      .tk.constant,
78      .tk.symbol,
79      .tk.command,
80      .tk.code {
81        color: #037aa2;
82      }
83
84      .tk.tag,
85      .tk.selector,
86      .tk.prolog {
87        color: #69ad62;
88      }
89
90      .tk.function,
91      .tk.namespace,
92      .tk.pseudo-element,
93      .tk.class,
94      .tk.class-name,
95      .tk.pseudo-class,
96      .tk.id,
97      .tk.url-reference .tk.variable,
98      .tk.attr-name {
99        color: #775d9d;
100      }
101
102      .tk.entity {
103        cursor: help;
104      }
105
106      .tk.title,
107      .tk.title .tk.punctuation {
108        font-weight: bold;
109        color: #1a3773;
110      }
111
112      .tk.list {
113        color: #f56940;
114      }
115
116      .tk.inserted {
117        background-color: #eaffea;
118        color: #509b2f;
119      }
120
121      .tk.deleted {
122        background-color: #fae1e1;
123        color: #ad2d06;
124      }
125
126      .tk.bold {
127        font-weight: bolder;
128      }
129
130      .tk.italic {
131        font-style: normal;
132      }
133
134      /* JSON */
135      .smartperf-json .tk.property {
136        color: #19358c;
137      }
138
139      .smartperf-markup .tk.tag .tk.punctuation {
140        color: #2c2b2b;
141      }
142
143      /* CSS */
144      code.smartperf-css,
145      .smartperf-css .tk.function {
146        color: #047ca4;
147      }
148
149      /* YAML */
150      .smartperf-yaml .tk.atrule {
151        color: #609b5a;
152      }
153
154      code.smartperf-yaml {
155        color: #153491;
156      }
157
158      /* Ruby */
159      .smartperf-ruby .tk.function {
160        color: #3f3e3e;
161      }
162
163      /* Markdown */
164      .smartperf-markdown .tk.url {
165        color: #6e5298;
166      }
167
168      /* Makefile */
169      .smartperf-makefile .tk.symbol {
170        color: #6c5393;
171      }
172
173      .smartperf-makefile .tk.variable {
174        color: #183488;
175      }
176
177      .smartperf-makefile .tk.builtin {
178        color: #027ba4;
179      }
180
181      /* Bash */
182      .smartperf-bash .tk.keyword {
183        color: #027fa9;
184      }
185
186      /* highlight */
187      pre[dl] {
188        position: relative;
189        padding: 1em 1px 1px 0.9em;
190      }
191
192      pre[dl] .line-highlight-wrapper {
193        position: absolute;
194        top: 1px;
195        left: 1px;
196        background-color: transparent;
197        display: block;
198        width: 99%;
199      }
200
201      pre[dl] .line-highlight {
202        position: absolute;
203        left: 1px;
204        right: 1px;
205        padding: inherit;
206        margin-top: 0.9em;
207        background: hsla(25, 21%, 50%, 0.08);
208        background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
209        pointer-events: none;
210        line-height: inherit;
211        white-space: pre;
212      }
213
214      pre[dl] .line-highlight:before,
215      pre[dl] .line-highlight[data-end]:after {
216        content: attr(data-start);
217        position: absolute;
218        text-shadow: none;
219        top: 0.3em;
220        left: 0.7em;
221        min-width: 0.9em;
222        padding: 1px 0.6em;
223        background-color: hsla(24, 20%, 47%, 0.4);
224        color: hsl(20, 11%, 95%);
225        text-align: center;
226        vertical-align: 0.2em;
227        border-radius: 10000px;
228        box-shadow: 1px 2px #fdf6f6;
229      }
230
231      pre[dl] .line-highlight[data-end]:after {
232        content: attr(data-end);
233        top: auto;
234        bottom: 0.5em;
235      }
236
237      html body {
238        line-height: 1.6;
239        font-size: 16px;
240        color: #333333;
241        overflow: initial;
242        background-color: #ffffff;
243        word-wrap: break-word;
244        font-family: Helvetica;
245        box-sizing: border-box;
246      }
247
248      html body > :first-child {
249        margin-top: 0px;
250      }
251
252      html body h1,
253      html body h2,
254      html body h3,
255      html body h4,
256      html body h5,
257      html body h6 {
258        margin-top: 1em;
259        margin-bottom: 16px;
260        color: #000000;
261        line-height: 1.2;
262      }
263
264      html body h1 {
265        font-weight: 300;
266        font-size: 2.25em;
267        padding-bottom: 0.3em;
268      }
269
270      html body h2 {
271        font-weight: 410;
272        font-size: 1.74em;
273        padding-bottom: 0.2em;
274      }
275
276      html body h3 {
277        font-size: 1.6em;
278        font-weight: 501;
279      }
280
281      html body h4 {
282        font-size: 1.26em;
283        font-weight: 601;
284      }
285
286      html body h5 {
287        font-size: 1.2em;
288        font-weight: 601;
289      }
290
291      html body h6 {
292        font-size: 0.9em;
293        font-weight: 601;
294      }
295
296      html body h1,
297      html body h2,
298      html body h3,
299      html body h4,
300      html body h5 {
301        font-weight: 601;
302      }
303
304      html body h5 {
305        font-size: 0.9em;
306      }
307
308      html body h6 {
309        color: #5c5c5c;
310      }
311
312      html body strong {
313        color: #090909;
314      }
315
316      html body del {
317        color: #525252;
318      }
319
320      html body a:not([href]) {
321        color: inherit;
322        text-decoration: none;
323      }
324
325      html body a {
326        color: #0192da;
327        text-decoration: none;
328      }
329
330      html body a:hover {
331        color: #029dea;
332        text-decoration: none;
333      }
334
335      html body img {
336        max-width: 99%;
337      }
338
339      html body > p {
340        margin-top: 1px;
341        margin-bottom: 15px;
342        word-wrap: break-word;
343      }
344
345      html body > ul,
346      html body > ol {
347        margin-bottom: 15px;
348      }
349
350      html body ul,
351      html body ol {
352        padding-left: 1.9em;
353      }
354
355      html body ul.no-list,
356      html body ol.no-list {
357        padding: 0px;
358        list-style-type: none;
359      }
360
361      html body ul ul,
362      html body ul ol,
363      html body ol ol,
364      html body ol ul {
365        margin-top: 1px;
366        margin-bottom: 1px;
367      }
368
369      html body li {
370        margin-bottom: 1px;
371      }
372
373      html body li.task-list-item {
374        list-style: none;
375      }
376
377      html body li > p {
378        margin-top: 1px;
379        margin-bottom: 1px;
380      }
381
382      html body .task-list-item-checkbox {
383        margin: 0 0.3em 0.24em -1.7em;
384        vertical-align: middle;
385      }
386
387      html body .task-list-item-checkbox:hover {
388        cursor: pointer;
389      }
390
391      html body blockquote {
392        padding: 0.1px 15px 0 0.1px;
393        font-size: inherit;
394        color: #5c5c5c;
395        margin: 16px 0.1px 0 0.1px;
396        border-left: 3px solid #cbc9c9;
397        background-color: #e8e6e6;
398      }
399
400      html body blockquote > :first-child {
401        margin-top: 0.2px;
402      }
403
404      html body blockquote > :last-child {
405        margin-bottom: 0.1px;
406      }
407
408      html body hr {
409        height: 5px;
410        background-color: #cbcaca;
411        margin: 32px 0 0.1px 0;
412        border: 0 none;
413      }
414
415      html body table {
416        overflow: auto;
417        border-collapse: collapse;
418        margin: 15px 0.1px 20px 0.1px;
419        border-spacing: 0;
420      }
421
422      html body table th {
423        font-weight: bold;
424        color: #000000;
425      }
426
427      html body table td,
428      html body table th {
429        border: 1px solid #d6d6d6;
430        padding: 2px 14px;
431      }
432
433      html body dl {
434        padding: 0px;
435      }
436
437      html body dl dt {
438        padding: 0px;
439        margin-top: 15px;
440        font-size: 0.9em;
441        font-style: italic;
442        font-weight: bold;
443      }
444
445      html body dl dd {
446        padding: 0px 17px;
447        margin-bottom: 17px;
448      }
449
450      html body code {
451        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
452        font-size: 0.86em !important;
453        color: #000000;
454        background-color: #f0f0f0;
455        border-radius: 4px;
456        padding: 0.3em 0px;
457      }
458
459      html body code::before,
460      html body code::after {
461        letter-spacing: -0.1em;
462        content: '\00a0';
463      }
464
465      html body pre > code {
466        padding: 1px;
467        margin: 0px;
468        font-size: 0.86em !important;
469        word-break: normal;
470        white-space: pre;
471        background: transparent;
472        border: 0px;
473      }
474
475      html body .highlight {
476        margin-bottom: 17px;
477      }
478
479      html body .highlight pre,
480      html body pre {
481        padding: 0.9em;
482        overflow: auto;
483        font-size: 0.86em !important;
484        line-height: 1.46;
485        border: #d6d6d6;
486        border-radius: 4px;
487      }
488
489      html body .highlight pre {
490        margin-bottom: 0px;
491        word-break: normal;
492      }
493
494      html body pre code,
495      html body pre tt {
496        display: inline;
497        max-width: initial;
498        padding: 1px;
499        margin: 1px;
500        overflow: initial;
501        line-height: inherit;
502        word-wrap: normal;
503        background-color: transparent;
504        border: 1px;
505      }
506
507      html body pre code:before,
508      html body pre tt:before,
509      html body pre code:after,
510      html body pre tt:after {
511        content: normal;
512      }
513
514      html body p,
515      html body blockquote,
516      html body ul,
517      html body ol,
518      html body dl,
519      html body pre {
520        margin-top: 1px;
521        margin-bottom: 17px;
522      }
523
524      html body kbd {
525        color: #000000;
526        border: 3px solid #d6d6d6;
527        border-bottom: 3px solid #c7c7c7;
528        padding: 3px 5px;
529        background-color: #f0f0f0;
530        border-radius: 2px;
531      }
532
533      @media print {
534        html body {
535          background-color: #ffffff;
536        }
537
538        html body h1,
539        html body h2,
540        html body h3,
541        html body h4,
542        html body h5,
543        html body h6 {
544          color: #000000;
545          page-break-after: avoid;
546        }
547
548        html body blockquote {
549          color: #5c5c53;
550        }
551
552        html body pre {
553          page-break-inside: avoid;
554        }
555
556        html body table {
557          display: table;
558        }
559
560        html body img {
561          display: block;
562          max-width: 99%;
563          max-height: 99%;
564        }
565
566        html body pre,
567        html body code {
568          word-wrap: break-word;
569          white-space: pre;
570        }
571      }
572
573      .smartperf-preview {
574        width: 99%;
575        height: 99%;
576        box-sizing: border-box;
577      }
578
579      .smartperf-preview .pagebreak,
580      .smartperf-preview .newpage {
581        page-break-before: always;
582      }
583
584      .smartperf-preview pre.line-numbers {
585        position: relative;
586        padding-left: 3.7em;
587        counter-reset: linenumber;
588      }
589
590      .smartperf-preview pre.line-numbers > code {
591        position: relative;
592      }
593
594      .smartperf-preview pre.line-numbers .line-numbers-rows {
595        position: absolute;
596        pointer-events: none;
597        top: 0.9em;
598        font-size: 99%;
599        left: 1px;
600        width: 3em;
601        letter-spacing: -1px;
602        border-right: 1px solid #999;
603        -webkit-user-select: none;
604        -moz-user-select: none;
605        -ms-user-select: none;
606        user-select: none;
607      }
608
609      .smartperf-preview pre.line-numbers .line-numbers-rows > span {
610        pointer-events: none;
611        display: block;
612        counter-increment: linenumber;
613      }
614
615      .smartperf-preview pre.line-numbers .line-numbers-rows > span:before {
616        content: counter(linenumber);
617        color: #999;
618        display: block;
619        padding-right: 0.79em;
620        text-align: right;
621      }
622
623      .smartperf-preview .mathjax-exps .MathJax_Display {
624        text-align: center !important;
625      }
626
627      .smartperf-preview:not([for='preview']) .code-chunk .btn-group {
628        display: none;
629      }
630
631      .smartperf-preview:not([for='preview']) .code-chunk .status {
632        display: none;
633      }
634
635      .smartperf-preview:not([for='preview']) .code-chunk .output-div {
636        margin-bottom: 16px;
637      }
638
639      .scrollbar-style::-webkit-scrollbar {
640        width: 8px;
641      }
642
643      .scrollbar-style::-webkit-scrollbar-track {
644        border-radius: 9px;
645        background-color: transparent;
646      }
647
648      .scrollbar-style::-webkit-scrollbar-thumb {
649        border-radius: 6px;
650        background-color: rgba(150, 150, 150, 1);
651        border: 4px solid rgba(150, 150, 150, 1);
652        background-clip: content-box;
653      }
654
655      html body[for='html-export']:not([dpm]) {
656        position: relative;
657        width: 99%;
658        height: 99%;
659        top: 1px;
660        left: 1px;
661        margin: 1px;
662        padding: 1px;
663        overflow: auto;
664      }
665
666      html body[for='html-export']:not([dpm]) .smartperf-preview {
667        position: relative;
668        top: 1px;
669      }
670
671      @media screen and (min-width: 914px) {
672        html body[for='html-export']:not([dpm]) .smartperf-preview {
673          padding: 2em calc(50% - 458px + 2em);
674        }
675      }
676
677      @media screen and (max-width: 914px) {
678        html body[for='html-export']:not([dpm]) .smartperf-preview {
679          padding: 1.9em;
680        }
681      }
682
683      @media screen and (max-width: 450px) {
684        html body[for='html-export']:not([dpm]) .smartperf-preview {
685          font-size: 15px !important;
686          padding: 1.1em;
687        }
688      }
689
690      @media print {
691        html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
692          display: none;
693        }
694      }
695
696      html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
697        position: fixed;
698        bottom: 9px;
699        left: 9px;
700        font-size: 28px;
701        cursor: pointer;
702        color: inherit;
703        z-index: 99;
704        width: 31px;
705        text-align: center;
706        opacity: 0.5;
707      }
708
709      html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn {
710        opacity: 1;
711      }
712
713      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc {
714        position: fixed;
715        top: 1px;
716        left: 1px;
717        width: 300px;
718        height: 99%;
719        padding: 32px 0 48px 0;
720        font-size: 14px;
721        box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
722        box-sizing: border-box;
723        overflow: auto;
724        background-color: inherit;
725      }
726
727      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
728        width: 9px;
729      }
730
731      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
732        border-radius: 11px;
733        background-color: transparent;
734      }
735
736      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
737        border-radius: 6px;
738        background-color: rgba(150, 150, 150, 0.66);
739        border: 3px solid rgba(150, 150, 150, 0.66);
740        background-clip: content-box;
741      }
742
743      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a {
744        text-decoration: none;
745      }
746
747      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
748        padding: 1px 1.7em;
749        margin-top: 0.9em;
750      }
751
752      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
753        margin-bottom: 0.8em;
754      }
755
756      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
757        list-style-type: none;
758      }
759
760      html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
761        left: 301px;
762        width: calc(100% - 300px);
763        padding: 2em calc(50% - 457px - 150px);
764        margin: 1px;
765        box-sizing: border-box;
766      }
767
768      @media screen and (max-width: 1274px) {
769        html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
770          padding: 1.9em;
771        }
772      }
773
774      @media screen and (max-width: 450px) {
775        html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
776          width: 99%;
777        }
778      }
779
780      html body[for='html-export']:not([dpm]):not([hsst]) .smartperf-preview {
781        left: 50%;
782        transform: translateX(-50%);
783      }
784
785      html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc {
786        display: none;
787      }
788    </style>
789  </head>
790  <body for="html-export" id="body">
791    <div class="smartperf smartperf-preview">
792      <h1 class="mume-header fontColor">Cpuprofiler抓取和展示说明</h1>
793
794      <p class="fontColor">Cpuprofiler模板帮助ArkTs开发和测试分析虚拟机层执行开销大问题，提供Ts层耗时长函数和阶段。</p>
795      <h2 class="mume-header fontColor">Cpuprofiler的抓取</h2>
796
797      <h4 class="mume-header fontColor">Cpuprofiler的抓取配置参数</h4>
798
799      <p class="fontColor">
800        打开Start Ark Ts Record总开关下面的Start cpu profiler开关抓取Cpuprofiler数据。
801        <br />
802        <img src="../figures/arkts/cpuprofilerconfig.jpg" alt="GitHub Logo" />
803      </p>
804      <h3 class="mume-header fontColor">Cpuprofiler展示说明</h3>
805
806      <p class="fontColor">
807        将抓取的Cpuprofiler文件导入到SmartPerf中，查看Ts层耗时长的函数和阶段。
808        <br />
809        <img src="../figures/arkts/cpuprofilerrow.jpg" alt="GitHub Logo" />
810      </p>
811      <h3 class="mume-header fontColor">Cpuprofiler的泳道图悬浮显示</h3>
812
813      <p class="fontColor">
814        鼠标放到泳道图的Slice上会有悬浮框显示。
815        <br />
816        <img src="../figures/arkts/cpuprofilertip.jpg" alt="GitHub Logo" />
817      </p>
818      <ul class="fontColor">
819        <li>
820          <pre class="smartperf-text fontColor light">
821Name : 函数名。
822</pre
823          >
824        </li>
825        <li>
826          <pre class="smartperf-text fontColor light">
827Self Time: 函数自身执行时间(不包含其调用者)。
828</pre
829          >
830        </li>
831        <li>
832          <pre class="smartperf-text fontColor light">
833Total Time : 函数自身及调用者的调用时间总和。
834</pre
835          >
836        </li>
837        <li>
838          <pre class="smartperf-text fontColor light">
839Url : 函数所在的文件名称。
840</pre
841          >
842        </li>
843      </ul>
844      <h3 class="mume-header fontColor">Cpuprofiler泳道图的点选和框选功能</h3>
845
846      <p class="fontColor">
847        点选或者框选泳道图上函数名的Slice，会显示Js Profiler Statistics，Js Profiler CallTree，Js Profiler
848        BottomUp的Tab页信息。
849        <br />
850        Js Profiler Statistics的Tab页显示数据的维度信息，以饼图和Table表的方式展示，如下图：
851        <br />
852        <img src="../figures/arkts/cpuprofilerselects.jpg" alt="GitHub Logo" />
853        <br />
854        <img src="../figures/arkts/cpuprofilerdrags.jpg" alt="GitHub Logo" />
855      </p>
856      <ul class="fontColor">
857        <li>
858          <pre class="smartperf-text fontColor light">
859Type : 维度名称，有九大维度(NAPI、ARKUI_ENGINE、BUTLTIN、GC、AINT、CINT、AOT、RUNTIME、OTHER）。
860</pre
861          >
862        </li>
863        <li>
864          <pre class="smartperf-text fontColor light">
865Total : 时间。
866</pre
867          >
868        </li>
869        <li>
870          <pre class="smartperf-text fontColor light">
871% : 时间占比。
872</pre
873          >
874        </li>
875      </ul>
876      <p class="fontColor">
877        Js Profiler CallTree的Tab页把name，url，depth，parent相同的函数合并，构建成一个top
878        down的树结构，以树形表格的形式显示，表格中显示函数调用关系，如下图：
879        <br />
880        <img src="../figures/arkts/cpuprofilerselectc.jpg" alt="GitHub Logo" />
881        <br />
882        <img src="../figures/arkts/cpuprofilerdragc.jpg" alt="GitHub Logo" />
883      </p>
884      <ul class="fontColor">
885        <li>
886          <pre class="smartperf-text fontColor light">
887Symbol : 函数名。
888</pre
889          >
890        </li>
891        <li>
892          <pre class="smartperf-text fontColor light">
893Self Time: 函数自身执行时间(不包含其调用者)。
894</pre
895          >
896        </li>
897        <li>
898          <pre class="smartperf-text fontColor light">
899Total Time : 函数自身及调用者的调用时间总和。
900</pre
901          >
902        </li>
903      </ul>
904      <p class="fontColor">
905        Js Profiler BottomUp的Tab页把name，url，depth，parent相同的函数合并，构建成一个bottom
906        up的树结构，以树形表格的形式显示，只不过作为根节点的是被调用者，表格中显示函数被调用关系，如下图：
907        <br />
908        <img src="../figures/arkts/cpuprofilerselectb.jpg" alt="GitHub Logo" />
909        <br />
910        <img src="../figures/arkts/cpuprofilerdragb.jpg" alt="GitHub Logo" />
911      </p>
912      <ul class="fontColor">
913        <li>
914          <pre class="smartperf-text fontColor light">
915Symbol : 函数名。
916</pre
917          >
918        </li>
919        <li>
920          <pre class="smartperf-text fontColor light">
921Self Time: 函数自身执行时间(不包含其调用者)。
922</pre
923          >
924        </li>
925        <li>
926          <pre class="smartperf-text fontColor light">
927Total Time : 函数自身及调用者的调用时间总和。
928</pre
929          >
930        </li>
931      </ul>
932      <h3 class="mume-header fontColor">Cpuprofiler的Heaviest Stack功能</h3>
933
934      <p class="fontColor">
935        Js Profiler CallTree的Tab页的Heaviest Stack表格显示的是选中的函数的完整的调用栈。
936        <br />
937        <img src="../figures/arkts/cpuprofilerheavic.jpg" alt="GitHub Logo" />
938        <br />
939        Js Profiler BottomUp的Tab页的Heaviest Stack表格显示的是选中的函数的完整的逆序调用栈。
940        <br />
941        <img src="../figures/arkts/cpuprofilerheavib.jpg" alt="GitHub Logo" />
942      </p>
943      <ul class="fontColor">
944        <li>
945          <pre class="smartperf-text fontColor light">
946Symbol : 函数名。
947</pre
948          >
949        </li>
950        <li>
951          <pre class="smartperf-text fontColor light">
952Total Time : 函数自身及调用者的调用时间总和。
953</pre
954          >
955        </li>
956        <li>
957          <pre class="smartperf-text fontColor light">
958% : 总时间占比。
959</pre
960          >
961        </li>
962      </ul>
963    </div>
964
965    <script>
966      window.onload = () => {
967        let isDark = window.location.search;
968        if (isDark.indexOf('?') !== -1) {
969          isDark = isDark.substr(1, isDark.length - 1);
970        }
971        if (isDark === 'true') {
972          document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
973          let header = document.getElementsByClassName('fontColor');
974          for (let i = 0; i < header.length; i++) {
975            header[i].style.color = '#fff';
976          }
977          let lightBackGround = document.getElementsByClassName('light');
978          for (let i = 0; i < lightBackGround.length; i++) {
979            lightBackGround[i].style.backgroundColor = '#32373F';
980          }
981        }
982      };
983    </script>
984  </body>
985</html>
986