1<!DOCTYPE html>
2<html>
3  <head>
4    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5    <title>quickstart_taskpool</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
8    <style>
9      code[class*='smartperf-'],
10      pre[class*='smartperf-'] {
11        color: #333333;
12        background: none;
13        font-family: Helvetica;
14        line-height: 1.6;
15        text-align: left;
16        white-space: pre;
17        -moz-tab-size: 9;
18        -o-tab-size: 9;
19        tab-size: 8;
20        -webkit-hyphens: none;
21        -moz-hyphens: none;
22        -ms-hyphens: none;
23        hyphens: none;
24      }
25
26      /* Code blocks */
27      pre[class*='smartperf-'] {
28        padding: 0.9em;
29        overflow: auto;
30        border-radius: 2px;
31        background: #f5f5f4;
32      }
33
34      /* Inline code */
35      :not(pre) > code[class*='smartperf-'] {
36        white-space: normal;
37        background: #fcf8f8;
38        padding: 1px 0.2em;
39        border-radius: 1px 0.3em;
40      }
41
42      .tk.comment,
43      .tk.blockquote {
44        color: #8c918c;
45      }
46
47      .tk.cdata {
48        color: #183898;
49      }
50
51      .tk.doctype,
52      .tk.punctuation,
53      .tk.variable,
54      .tk.macro.property {
55        color: #424242;
56      }
57
58      .tk.operator,
59      .tk.important,
60      .tk.keyword,
61      .tk.rule,
62      .tk.builtin {
63        color: #b71d65;
64      }
65
66      .tk.string,
67      .tk.url,
68      .tk.regex,
69      .tk.attr-value {
70        color: #16338d;
71      }
72
73      .tk.property,
74      .tk.number,
75      .tk.boolean,
76      .tk.entity,
77      .tk.atrule,
78      .tk.constant,
79      .tk.symbol,
80      .tk.command,
81      .tk.code {
82        color: #037aa2;
83      }
84
85      .tk.tag,
86      .tk.selector,
87      .tk.prolog {
88        color: #69ad62;
89      }
90
91      .tk.function,
92      .tk.namespace,
93      .tk.pseudo-element,
94      .tk.class,
95      .tk.class-name,
96      .tk.pseudo-class,
97      .tk.id,
98      .tk.url-reference .tk.variable,
99      .tk.attr-name {
100        color: #775d9d;
101      }
102
103      .tk.entity {
104        cursor: help;
105      }
106
107      .tk.title,
108      .tk.title .tk.punctuation {
109        font-weight: bold;
110        color: #1a3773;
111      }
112
113      .tk.list {
114        color: #f56940;
115      }
116
117      .tk.inserted {
118        background-color: #eaffea;
119        color: #509b2f;
120      }
121
122      .tk.deleted {
123        background-color: #fae1e1;
124        color: #ad2d06;
125      }
126
127      .tk.bold {
128        font-weight: bolder;
129      }
130
131      .tk.italic {
132        font-style: normal;
133      }
134
135      /* JSON */
136      .smartperf-json .tk.property {
137        color: #19358c;
138      }
139
140      .smartperf-markup .tk.tag .tk.punctuation {
141        color: #2c2b2b;
142      }
143
144      /* CSS */
145      code.smartperf-css,
146      .smartperf-css .tk.function {
147        color: #047ca4;
148      }
149
150      /* YAML */
151      .smartperf-yaml .tk.atrule {
152        color: #609b5a;
153      }
154
155      code.smartperf-yaml {
156        color: #153491;
157      }
158
159      /* Ruby */
160      .smartperf-ruby .tk.function {
161        color: #3f3e3e;
162      }
163
164      /* Markdown */
165      .smartperf-markdown .tk.url {
166        color: #6e5298;
167      }
168
169      /* Makefile */
170      .smartperf-makefile .tk.symbol {
171        color: #6c5393;
172      }
173
174      .smartperf-makefile .tk.variable {
175        color: #183488;
176      }
177
178      .smartperf-makefile .tk.builtin {
179        color: #027ba4;
180      }
181
182      /* Bash */
183      .smartperf-bash .tk.keyword {
184        color: #027fa9;
185      }
186
187      /* highlight */
188      pre[dl] {
189        position: relative;
190        padding: 1em 1px 1px 0.9em;
191      }
192
193      pre[dl] .line-highlight-wrapper {
194        position: absolute;
195        top: 1px;
196        left: 1px;
197        background-color: transparent;
198        display: block;
199        width: 99%;
200      }
201
202      pre[dl] .line-highlight {
203        position: absolute;
204        left: 1px;
205        right: 1px;
206        padding: inherit;
207        margin-top: 0.9em;
208        background: hsla(25, 21%, 50%, 0.08);
209        background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
210        pointer-events: none;
211        line-height: inherit;
212        white-space: pre;
213      }
214
215      pre[dl] .line-highlight:before,
216      pre[dl] .line-highlight[data-end]:after {
217        content: attr(data-start);
218        position: absolute;
219        text-shadow: none;
220        top: 0.3em;
221        left: 0.7em;
222        min-width: 0.9em;
223        padding: 1px 0.6em;
224        background-color: hsla(24, 20%, 47%, 0.4);
225        color: hsl(20, 11%, 95%);
226        text-align: center;
227        vertical-align: 0.2em;
228        border-radius: 10000px;
229        box-shadow: 1px 2px #fdf6f6;
230      }
231
232      pre[dl] .line-highlight[data-end]:after {
233        content: attr(data-end);
234        top: auto;
235        bottom: 0.5em;
236      }
237
238      html body {
239        line-height: 1.6;
240        font-size: 16px;
241        color: #333333;
242        overflow: initial;
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: 68vw;
575        height: 99%;
576        box-sizing: border-box;
577        overflow: hidden;
578        background-color: #fff;
579      }
580
581      .smartperf-preview .pagebreak,
582      .smartperf-preview .newpage {
583        page-break-before: always;
584      }
585
586      .smartperf-preview pre.line-numbers {
587        position: relative;
588        padding-left: 3.7em;
589        counter-reset: linenumber;
590      }
591
592      .smartperf-preview pre.line-numbers > code {
593        position: relative;
594      }
595
596      .smartperf-preview pre.line-numbers .line-numbers-rows {
597        position: absolute;
598        pointer-events: none;
599        top: 0.9em;
600        font-size: 99%;
601        left: 1px;
602        width: 3em;
603        letter-spacing: -1px;
604        border-right: 1px solid #999;
605        -webkit-user-select: none;
606        -moz-user-select: none;
607        -ms-user-select: none;
608        user-select: none;
609      }
610
611      .smartperf-preview pre.line-numbers .line-numbers-rows > span {
612        pointer-events: none;
613        display: block;
614        counter-increment: linenumber;
615      }
616
617      .smartperf-preview pre.line-numbers .line-numbers-rows > span:before {
618        content: counter(linenumber);
619        color: #999;
620        display: block;
621        padding-right: 0.79em;
622        text-align: right;
623      }
624
625      .smartperf-preview .mathjax-exps .MathJax_Display {
626        text-align: center !important;
627      }
628
629      .smartperf-preview:not([for='preview']) .code-chunk .btn-group {
630        display: none;
631      }
632
633      .smartperf-preview:not([for='preview']) .code-chunk .status {
634        display: none;
635      }
636
637      .smartperf-preview:not([for='preview']) .code-chunk .output-div {
638        margin-bottom: 16px;
639      }
640
641      .scrollbar-style::-webkit-scrollbar {
642        width: 8px;
643      }
644
645      .scrollbar-style::-webkit-scrollbar-track {
646        border-radius: 9px;
647        background-color: transparent;
648      }
649
650      .scrollbar-style::-webkit-scrollbar-thumb {
651        border-radius: 6px;
652        background-color: rgba(150, 150, 150, 1);
653        border: 4px solid rgba(150, 150, 150, 1);
654        background-clip: content-box;
655      }
656
657      html body[for='html-export']:not([dpm]) {
658        position: relative;
659        width: 99%;
660        height: 99%;;
661        overflow: auto;
662      }
663
664      html body[for='html-export']:not([dpm]) .smartperf-preview {
665        position: relative;
666        top: 1px;
667      }
668
669      @media screen and (min-width: 914px) {
670        html body[for='html-export']:not([dpm]) .smartperf-preview {
671          padding: 2em;
672        }
673      }
674
675      @media screen and (max-width: 914px) {
676        html body[for='html-export']:not([dpm]) .smartperf-preview {
677          padding: 1.9em;
678        }
679      }
680
681      @media screen and (max-width: 450px) {
682        html body[for='html-export']:not([dpm]) .smartperf-preview {
683          font-size: 15px !important;
684          padding: 1.1em;
685        }
686      }
687
688      @media print {
689        html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
690          display: none;
691        }
692      }
693
694      html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
695        position: fixed;
696        bottom: 9px;
697        left: 9px;
698        font-size: 28px;
699        cursor: pointer;
700        color: inherit;
701        z-index: 99;
702        width: 31px;
703        text-align: center;
704        opacity: 0.5;
705      }
706
707      html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn {
708        opacity: 1;
709      }
710
711      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc {
712        position: fixed;
713        top: 1px;
714        left: 1px;
715        width: 300px;
716        height: 99%;
717        padding: 32px 0 48px 0;
718        font-size: 14px;
719        box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
720        box-sizing: border-box;
721        overflow: auto;
722        background-color: inherit;
723      }
724
725      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
726        width: 9px;
727      }
728
729      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
730        border-radius: 11px;
731        background-color: transparent;
732      }
733
734      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
735        border-radius: 6px;
736        background-color: rgba(150, 150, 150, 0.66);
737        border: 3px solid rgba(150, 150, 150, 0.66);
738        background-clip: content-box;
739      }
740
741      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a {
742        text-decoration: none;
743      }
744
745      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
746        padding: 1px 1.7em;
747        margin-top: 0.9em;
748      }
749
750      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
751        margin-bottom: 0.8em;
752      }
753
754      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
755        list-style-type: none;
756      }
757
758      html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
759        left: 301px;
760        width: calc(100% - 300px);
761        padding: 2em calc(50% - 457px - 150px);
762        margin: 1px;
763        box-sizing: border-box;
764      }
765
766      @media screen and (max-width: 1274px) {
767        html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
768          padding: 1.9em;
769        }
770      }
771
772      @media screen and (max-width: 450px) {
773        html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
774          width: 99%;
775        }
776      }
777
778      html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc {
779        display: none;
780      }
781    </style>
782  </head>
783  <body for="html-export" id="body" style="margin:0">
784    <div class="smartperf smartperf-preview" style="min-height: 99vh;">
785      <h1 class="mume-header fontColor">TaskPool抓取和展示说明</h1>
786      <p class="fontColor">
787        TaskPool分析模块主要展示应用程序使用taskpool时，任务的关联关系，任务调度开销和任务并发度分析情况，任务各阶段耗时情况，线程池的状态统计，队列任务数，任务是否超时。
788      </p>
789      <h2 class="mume-header fontColor">TaskPool的抓取</h2>
790      <h4 class="mume-header fontColor" id="header-index-1">TaskPool的抓取配置参数</h4>
791      <p class="fontColor">
792        打开Task pool开关抓取taskpool数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。
793        <br />
794        <img src="../figures/Taskpool/taskpoolconfig.jpg" alt="GitHub Logo" />
795      </p>
796      <h3 class="mume-header fontColor" id="header-index-2">TaskPool展示说明</h3>
797
798      <p class="fontColor">
799        将抓取的taskpool文件导入到smartperf中，查看任务的关联关系等信息。
800        <br />
801        <img src="../figures/Taskpool/taskpoolrow.jpg" alt="GitHub Logo" />
802      </p>
803      <h3 class="mume-header fontColor" id="header-index-3">TaskPool的任务关联关系跟踪</h3>
804
805      <p class="fontColor">
806        任务关联关系就是根据任务的executeId，把一个taskpool任务的各个执行的函数调用栈连接起来，用于表示一个任务从开始分发到执行，再到最后任务结束的整个过程。
807        <br />
808        <img src="../figures/Taskpool/taskpoolrelation.jpg" alt="GitHub Logo" />
809        <br />
810        如上图所示，点击H:Task Perform: taskId : 2, executeId :
811        2的调用栈会出现红色连线，红色连线展示了executeId是2的任务的关联关系，连接的调用栈分别是：
812      </p>
813      <ul class="fontColor">
814        <li>
815          <pre class="smartperf-text fontColor light">
816H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1：任务分发。
817</pre
818          >
819        </li>
820        <li>
821          <pre class="smartperf-text fontColor light">
822H:Task Perform: taskId : 2, executeId : 2：任务执行。
823</pre
824          >
825        </li>
826        <li>
827          <pre class="smartperf-text fontColor light">
828H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful：任务返回。
829</pre
830          >
831        </li>
832      </ul>
833      <h3 class="mume-header fontColor" id="header-index-4">TaskPool的并发度</h3>
834
835      <p class="fontColor">
836        点选或者框选任务状态为执行会进行任务并发度展示，如图所示并发度是3。
837        <br />
838        <img src="../figures/Taskpool/taskpoolconcurrency.jpg" alt="GitHub Logo" />
839      </p>
840      <h3 class="mume-header fontColor" id="header-index-5">TaskPool泳道图的点选功能</h3>
841
842      <p class="fontColor">
843        点选taskpool的Slice，展示该taskpool信息的tab页。
844        <br />
845        <img src="../figures/Taskpool/taskpoolselect.jpg" alt="GitHub Logo" />
846      </p>
847      <ul class="fontColor">
848        <li>
849          <pre class="smartperf-text fontColor light">
850Name： 任务调用栈名称。
851</pre
852          >
853        </li>
854        <li>
855          <pre class="smartperf-text fontColor light">
856StartTime： 任务调用栈开始时间。
857</pre
858          >
859        </li>
860        <li>
861          <pre class="smartperf-text fontColor light">
862Duration：任务调用栈持续时间。
863</pre
864          >
865        </li>
866        <li>
867          <pre class="smartperf-text fontColor light">
868depth：调用栈层级。
869</pre
870          >
871        </li>
872      </ul>
873      <h3 class="mume-header fontColor" id="header-index-6">TaskPool泳道图的框选功能</h3>
874
875      <p class="fontColor">
876        框选taskpool的泳道图，展示Frames的tab页。
877        <br />
878        <img src="../figures/Taskpool/taskpooldrag.jpg" alt="GitHub Logo" />
879      </p>
880      <ul class="fontColor">
881        <li>
882          <pre class="smartperf-text fontColor light">
883Execute Id： 任务id。
884</pre
885          >
886        </li>
887        <li>
888          <pre class="smartperf-text fontColor light">
889Task Priority： 任务优先级(HIGH，MEDIUM，LOW)。
890</pre
891          >
892        </li>
893        <li>
894          <pre class="smartperf-text fontColor light">
895Scheduling Time(ms)：调度耗时(任务执行起始时间 - 任务分发起始时间)。
896</pre
897          >
898        </li>
899        <li>
900          <pre class="smartperf-text fontColor light">
901Execution Time(ms)：执行耗时(任务执行的duration)。
902</pre
903          >
904        </li>
905        <li>
906          <pre class="smartperf-text fontColor light">
907Return Time(ms)：返回耗时(任务返回的结束时间 – 任务执行的结束时间)。
908</pre
909          >
910        </li>
911      </ul>
912      <h3 class="mume-header fontColor" id="header-index-7">TaskPool的队列任务数和线程池里线程状态统计</h3>
913
914      <p class="fontColor">
915        <img src="../figures/Taskpool/taskpoolnum.jpg" alt="GitHub Logo" />
916        <br />
917        如上图，H:threadNum，H:runningThreadNum，H:idleThreadNum，H:timeoutThreadNum是线程池里线程状态统计，H:taskNum是队列任务数。
918      </p>
919      <h3 class="mume-header fontColor" id="header-index-8">TaskPool的任务超时退出</h3>
920
921      <p class="fontColor">
922        在带有H:Thread Timeout Exit的调用栈的泳道图会采用黄色圆圈，中间为白色反叹号标记，代表任务超时退出。
923        <br />
924        <img src="../figures/Taskpool/taskpoolexit.jpg" alt="GitHub Logo" />
925      </p>
926    </div>
927
928    <script>
929      window.onload = () => {
930        let isDark = getURLParameter('dark'); 
931        let targetId = getURLParameter('targetId'); 
932        let isBack = getURLParameter('isBack'); 
933        if (isDark === 'true') {
934          document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
935          let header = document.getElementsByClassName('fontColor');
936          for (let i = 0; i < header.length; i++) {
937            header[i].style.color = '#fff';
938          }
939          let lightBackGround = document.getElementsByClassName('light');
940          for (let i = 0; i < lightBackGround.length; i++) {
941            lightBackGround[i].style.backgroundColor = '#32373F';
942          }
943        }
944        function getURLParameter(name) {  
945          return (new URL(document.location)).searchParams.get(name);  
946        }  
947  
948        if ( targetId !== null ) {
949          let targetElement = document.getElementById(targetId);
950          targetElement.scrollIntoView({ behavior: 'smooth' });
951        }
952      };
953    </script>
954  </body>
955</html>
956