• 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数据。<br/>
801    <img src="../figures/arkts/cpuprofilerconfig.jpg" alt="GitHub Logo"/>
802  </p>
803  <h3 class="mume-header fontColor">Cpuprofiler展示说明</h3>
804
805  <p class="fontColor">
806    将抓取的cpuprofiler文件导入到smartperf中，查看Ts层耗时长的函数和阶段。<br/>
807    <img src="../figures/arkts/cpuprofilerrow.jpg" alt="GitHub Logo"/>
808  </p>
809  <h3 class="mume-header fontColor">Cpuprofiler的泳道图悬浮显示</h3>
810
811  <p class="fontColor">
812    鼠标放到泳道图的Slice上会有悬浮框显示。<br/>
813    <img src="../figures/arkts/cpuprofilertip.jpg" alt="GitHub Logo"/>
814  </p>
815  <ul class="fontColor">
816    <li>
817          <pre class="smartperf-text fontColor light">
818Name : 函数名。
819</pre
820>
821    </li>
822    <li>
823          <pre class="smartperf-text fontColor light">
824Self Time: 函数自身执行时间(不包含其调用者)。
825</pre
826>
827    </li>
828    <li>
829          <pre class="smartperf-text fontColor light">
830Total Time : 函数自身及调用者的调用时间总和。
831</pre
832>
833    </li>
834    <li>
835          <pre class="smartperf-text fontColor light">
836Url : 函数所在的文件名称。
837</pre
838>
839    </li>
840  </ul>
841  <h3 class="mume-header fontColor">Cpuprofiler泳道图的点选和框选功能</h3>
842
843  <p class="fontColor">
844    点选或者框选泳道图上函数名的Slice，会显示Js Profiler Statistics，Js Profiler CallTree，Js Profiler
845    BottomUp的Tab页信息。<br/>
846    Js Profiler Statistics的Tab页显示数据的维度信息，以饼图和Table表的方式展示，如下图：<br/>
847    <img src="../figures/arkts/cpuprofilerselects.jpg" alt="GitHub Logo"/><br/>
848    <img src="../figures/arkts/cpuprofilerdrags.jpg" alt="GitHub Logo"/>
849  </p>
850  <ul class="fontColor">
851    <li>
852          <pre class="smartperf-text fontColor light">
853Type : 维度名称，有九大维度(NAPI、ARKUI_ENGINE、BUTLTIN、GC、AINT、CINT、AOT、RUNTIME、OTHER）。
854</pre
855>
856    </li>
857    <li>
858          <pre class="smartperf-text fontColor light">
859Total : 时间。
860</pre
861>
862    </li>
863    <li>
864          <pre class="smartperf-text fontColor light">
865% : 时间占比。
866</pre
867>
868    </li>
869  </ul>
870  <p class="fontColor">
871    Js Profiler CallTree的Tab页把name，url，depth，parent相同的函数合并，构建成一个top
872    down的树结构，以树形表格的形式显示，表格中显示函数调用关系，如下图：<br/>
873    <img src="../figures/arkts/cpuprofilerselectc.jpg" alt="GitHub Logo"/><br/>
874    <img src="../figures/arkts/cpuprofilerdragc.jpg" alt="GitHub Logo"/>
875  </p>
876  <ul class="fontColor">
877    <li>
878          <pre class="smartperf-text fontColor light">
879Symbol : 函数名。
880</pre
881>
882    </li>
883    <li>
884          <pre class="smartperf-text fontColor light">
885Self Time: 函数自身执行时间(不包含其调用者)。
886</pre
887>
888    </li>
889    <li>
890          <pre class="smartperf-text fontColor light">
891Total Time : 函数自身及调用者的调用时间总和。
892</pre
893>
894    </li>
895  </ul>
896  <p class="fontColor">
897    Js Profiler BottomUp的Tab页把name，url，depth，parent相同的函数合并，构建成一个bottom
898    up的树结构，以树形表格的形式显示，只不过作为根节点的是被调用者，表格中显示函数被调用关系，如下图：<br/>
899    <img src="../figures/arkts/cpuprofilerselectb.jpg" alt="GitHub Logo"/><br/>
900    <img src="../figures/arkts/cpuprofilerdragb.jpg" alt="GitHub Logo"/>
901  </p>
902  <ul class="fontColor">
903    <li>
904          <pre class="smartperf-text fontColor light">
905Symbol : 函数名。
906</pre
907>
908    </li>
909    <li>
910          <pre class="smartperf-text fontColor light">
911Self Time: 函数自身执行时间(不包含其调用者)。
912</pre
913>
914    </li>
915    <li>
916          <pre class="smartperf-text fontColor light">
917Total Time : 函数自身及调用者的调用时间总和。
918</pre
919>
920    </li>
921  </ul>
922  <h3 class="mume-header fontColor">Cpuprofiler的Heaviest Stack功能</h3>
923
924  <p class="fontColor">
925    Js Profiler CallTree的Tab页的Heaviest Stack表格显示的是选中的函数的完整的调用栈。<br/>
926    <img src="../figures/arkts/cpuprofilerheavic.jpg" alt="GitHub Logo"/><br/>
927    Js Profiler BottomUp的Tab页的Heaviest Stack表格显示的是选中的函数的完整的逆序调用栈。<br/>
928    <img src="../figures/arkts/cpuprofilerheavib.jpg" alt="GitHub Logo"/>
929  </p>
930  <ul class="fontColor">
931    <li>
932          <pre class="smartperf-text fontColor light">
933Symbol : 函数名。
934</pre
935>
936    </li>
937    <li>
938          <pre class="smartperf-text fontColor light">
939Total Time : 函数自身及调用者的调用时间总和。
940</pre
941>
942    </li>
943    <li>
944          <pre class="smartperf-text fontColor light">
945% : 总时间占比。
946</pre
947>
948    </li>
949  </ul>
950</div>
951
952<script>
953  window.onload = () => {
954    let isDark = window.location.search;
955    if (isDark.indexOf('?') != -1) {
956      isDark = isDark.substr(1, isDark.length - 1);
957    }
958    if (isDark == 'true') {
959      document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
960      let header = document.getElementsByClassName('fontColor');
961      for (let i = 0; i < header.length; i++) {
962        header[i].style.color = '#fff';
963      }
964      let lightBackGround = document.getElementsByClassName('light');
965      for (let i = 0; i < lightBackGround.length; i++) {
966        lightBackGround[i].style.backgroundColor = '#32373F';
967      }
968    }
969  };
970</script>
971</body>
972</html>
973