• 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_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      background-color: #ffffff;
244      word-wrap: break-word;
245      font-family: Helvetica;
246      box-sizing: border-box;
247    }
248
249    html body > :first-child {
250      margin-top: 0px;
251    }
252
253    html body h1,
254    html body h2,
255    html body h3,
256    html body h4,
257    html body h5,
258    html body h6 {
259      margin-top: 1em;
260      margin-bottom: 16px;
261      color: #000000;
262      line-height: 1.2;
263    }
264
265    html body h1 {
266      font-weight: 300;
267      font-size: 2.25em;
268      padding-bottom: 0.3em;
269    }
270
271    html body h2 {
272      font-weight: 410;
273      font-size: 1.74em;
274      padding-bottom: 0.2em;
275    }
276
277    html body h3 {
278      font-size: 1.6em;
279      font-weight: 501;
280    }
281
282    html body h4 {
283      font-size: 1.26em;
284      font-weight: 601;
285    }
286
287    html body h5 {
288      font-size: 1.2em;
289      font-weight: 601;
290    }
291
292    html body h6 {
293      font-size: 0.9em;
294      font-weight: 601;
295    }
296
297    html body h1,
298    html body h2,
299    html body h3,
300    html body h4,
301    html body h5 {
302      font-weight: 601;
303    }
304
305    html body h5 {
306      font-size: 0.9em;
307    }
308
309    html body h6 {
310      color: #5c5c5c;
311    }
312
313    html body strong {
314      color: #090909;
315    }
316
317    html body del {
318      color: #525252;
319    }
320
321    html body a:not([href]) {
322      color: inherit;
323      text-decoration: none;
324    }
325
326    html body a {
327      color: #0192da;
328      text-decoration: none;
329    }
330
331    html body a:hover {
332      color: #029dea;
333      text-decoration: none;
334    }
335
336    html body img {
337      max-width: 99%;
338    }
339
340    html body > p {
341      margin-top: 1px;
342      margin-bottom: 15px;
343      word-wrap: break-word;
344    }
345
346    html body > ul,
347    html body > ol {
348      margin-bottom: 15px;
349    }
350
351    html body ul,
352    html body ol {
353      padding-left: 1.9em;
354    }
355
356    html body ul.no-list,
357    html body ol.no-list {
358      padding: 0px;
359      list-style-type: none;
360    }
361
362    html body ul ul,
363    html body ul ol,
364    html body ol ol,
365    html body ol ul {
366      margin-top: 1px;
367      margin-bottom: 1px;
368    }
369
370    html body li {
371      margin-bottom: 1px;
372    }
373
374    html body li.task-list-item {
375      list-style: none;
376    }
377
378    html body li > p {
379      margin-top: 1px;
380      margin-bottom: 1px;
381    }
382
383    html body .task-list-item-checkbox {
384      margin: 0 0.3em 0.24em -1.7em;
385      vertical-align: middle;
386    }
387
388    html body .task-list-item-checkbox:hover {
389      cursor: pointer;
390    }
391
392    html body blockquote {
393      padding: 0.1px 15px 0 0.1px;
394      font-size: inherit;
395      color: #5c5c5c;
396      margin: 16px 0.1px 0 0.1px;
397      border-left: 3px solid #cbc9c9;
398      background-color: #e8e6e6;
399    }
400
401    html body blockquote > :first-child {
402      margin-top: 0.2px;
403    }
404
405    html body blockquote > :last-child {
406      margin-bottom: 0.1px;
407    }
408
409    html body hr {
410      height: 5px;
411      background-color: #cbcaca;
412      margin: 32px 0 0.1px 0;
413      border: 0 none;
414    }
415
416    html body table {
417      overflow: auto;
418      border-collapse: collapse;
419      margin: 15px 0.1px 20px 0.1px;
420      border-spacing: 0;
421    }
422
423    html body table th {
424      font-weight: bold;
425      color: #000000;
426    }
427
428    html body table td,
429    html body table th {
430      border: 1px solid #d6d6d6;
431      padding: 2px 14px;
432    }
433
434    html body dl {
435      padding: 0px;
436    }
437
438    html body dl dt {
439      padding: 0px;
440      margin-top: 15px;
441      font-size: 0.9em;
442      font-style: italic;
443      font-weight: bold;
444    }
445
446    html body dl dd {
447      padding: 0px 17px;
448      margin-bottom: 17px;
449    }
450
451    html body code {
452      font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
453      font-size: 0.86em !important;
454      color: #000000;
455      background-color: #f0f0f0;
456      border-radius: 4px;
457      padding: 0.3em 0px;
458    }
459
460    html body code::before,
461    html body code::after {
462      letter-spacing: -0.1em;
463      content: '\00a0';
464    }
465
466    html body pre > code {
467      padding: 1px;
468      margin: 0px;
469      font-size: 0.86em !important;
470      word-break: normal;
471      white-space: pre;
472      background: transparent;
473      border: 0px;
474    }
475
476    html body .highlight {
477      margin-bottom: 17px;
478    }
479
480    html body .highlight pre,
481    html body pre {
482      padding: 0.9em;
483      overflow: auto;
484      font-size: 0.86em !important;
485      line-height: 1.46;
486      border: #d6d6d6;
487      border-radius: 4px;
488    }
489
490    html body .highlight pre {
491      margin-bottom: 0px;
492      word-break: normal;
493    }
494
495    html body pre code,
496    html body pre tt {
497      display: inline;
498      max-width: initial;
499      padding: 1px;
500      margin: 1px;
501      overflow: initial;
502      line-height: inherit;
503      word-wrap: normal;
504      background-color: transparent;
505      border: 1px;
506    }
507
508    html body pre code:before,
509    html body pre tt:before,
510    html body pre code:after,
511    html body pre tt:after {
512      content: normal;
513    }
514
515    html body p,
516    html body blockquote,
517    html body ul,
518    html body ol,
519    html body dl,
520    html body pre {
521      margin-top: 1px;
522      margin-bottom: 17px;
523    }
524
525    html body kbd {
526      color: #000000;
527      border: 3px solid #d6d6d6;
528      border-bottom: 3px solid #c7c7c7;
529      padding: 3px 5px;
530      background-color: #f0f0f0;
531      border-radius: 2px;
532    }
533
534    @media print {
535      html body {
536        background-color: #ffffff;
537      }
538
539      html body h1,
540      html body h2,
541      html body h3,
542      html body h4,
543      html body h5,
544      html body h6 {
545        color: #000000;
546        page-break-after: avoid;
547      }
548
549      html body blockquote {
550        color: #5c5c53;
551      }
552
553      html body pre {
554        page-break-inside: avoid;
555      }
556
557      html body table {
558        display: table;
559      }
560
561      html body img {
562        display: block;
563        max-width: 99%;
564        max-height: 99%;
565      }
566
567      html body pre,
568      html body code {
569        word-wrap: break-word;
570        white-space: pre;
571      }
572    }
573
574    .smartperf-preview {
575      width: 99%;
576      height: 99%;
577      box-sizing: border-box;
578    }
579
580    .smartperf-preview .pagebreak,
581    .smartperf-preview .newpage {
582      page-break-before: always;
583    }
584
585    .smartperf-preview pre.line-numbers {
586      position: relative;
587      padding-left: 3.7em;
588      counter-reset: linenumber;
589    }
590
591    .smartperf-preview pre.line-numbers > code {
592      position: relative;
593    }
594
595    .smartperf-preview pre.line-numbers .line-numbers-rows {
596      position: absolute;
597      pointer-events: none;
598      top: 0.9em;
599      font-size: 99%;
600      left: 1px;
601      width: 3em;
602      letter-spacing: -1px;
603      border-right: 1px solid #999;
604      -webkit-user-select: none;
605      -moz-user-select: none;
606      -ms-user-select: none;
607      user-select: none;
608    }
609
610    .smartperf-preview pre.line-numbers .line-numbers-rows > span {
611      pointer-events: none;
612      display: block;
613      counter-increment: linenumber;
614    }
615
616    .smartperf-preview pre.line-numbers .line-numbers-rows > span:before {
617      content: counter(linenumber);
618      color: #999;
619      display: block;
620      padding-right: 0.79em;
621      text-align: right;
622    }
623
624    .smartperf-preview .mathjax-exps .MathJax_Display {
625      text-align: center !important;
626    }
627
628    .smartperf-preview:not([for='preview']) .code-chunk .btn-group {
629      display: none;
630    }
631
632    .smartperf-preview:not([for='preview']) .code-chunk .status {
633      display: none;
634    }
635
636    .smartperf-preview:not([for='preview']) .code-chunk .output-div {
637      margin-bottom: 16px;
638    }
639
640    .scrollbar-style::-webkit-scrollbar {
641      width: 8px;
642    }
643
644    .scrollbar-style::-webkit-scrollbar-track {
645      border-radius: 9px;
646      background-color: transparent;
647    }
648
649    .scrollbar-style::-webkit-scrollbar-thumb {
650      border-radius: 6px;
651      background-color: rgba(150, 150, 150, 1);
652      border: 4px solid rgba(150, 150, 150, 1);
653      background-clip: content-box;
654    }
655
656    html body[for='html-export']:not([dpm]) {
657      position: relative;
658      width: 99%;
659      height: 99%;
660      top: 1px;
661      left: 1px;
662      margin: 1px;
663      padding: 1px;
664      overflow: auto;
665    }
666
667    html body[for='html-export']:not([dpm]) .smartperf-preview {
668      position: relative;
669      top: 1px;
670    }
671
672    @media screen and (min-width: 914px) {
673      html body[for='html-export']:not([dpm]) .smartperf-preview {
674        padding: 2em calc(50% - 458px + 2em);
675      }
676    }
677
678    @media screen and (max-width: 914px) {
679      html body[for='html-export']:not([dpm]) .smartperf-preview {
680        padding: 1.9em;
681      }
682    }
683
684    @media screen and (max-width: 450px) {
685      html body[for='html-export']:not([dpm]) .smartperf-preview {
686        font-size: 15px !important;
687        padding: 1.1em;
688      }
689    }
690
691    @media print {
692      html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
693        display: none;
694      }
695    }
696
697    html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
698      position: fixed;
699      bottom: 9px;
700      left: 9px;
701      font-size: 28px;
702      cursor: pointer;
703      color: inherit;
704      z-index: 99;
705      width: 31px;
706      text-align: center;
707      opacity: 0.5;
708    }
709
710    html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn {
711      opacity: 1;
712    }
713
714    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc {
715      position: fixed;
716      top: 1px;
717      left: 1px;
718      width: 300px;
719      height: 99%;
720      padding: 32px 0 48px 0;
721      font-size: 14px;
722      box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
723      box-sizing: border-box;
724      overflow: auto;
725      background-color: inherit;
726    }
727
728    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
729      width: 9px;
730    }
731
732    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
733      border-radius: 11px;
734      background-color: transparent;
735    }
736
737    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
738      border-radius: 6px;
739      background-color: rgba(150, 150, 150, 0.66);
740      border: 3px solid rgba(150, 150, 150, 0.66);
741      background-clip: content-box;
742    }
743
744    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a {
745      text-decoration: none;
746    }
747
748    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
749      padding: 1px 1.7em;
750      margin-top: 0.9em;
751    }
752
753    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
754      margin-bottom: 0.8em;
755    }
756
757    html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
758      list-style-type: none;
759    }
760
761    html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
762      left: 301px;
763      width: calc(100% - 300px);
764      padding: 2em calc(50% - 457px - 150px);
765      margin: 1px;
766      box-sizing: border-box;
767    }
768
769    @media screen and (max-width: 1274px) {
770      html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
771        padding: 1.9em;
772      }
773    }
774
775    @media screen and (max-width: 450px) {
776      html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
777        width: 99%;
778      }
779    }
780
781    html body[for='html-export']:not([dpm]):not([hsst]) .smartperf-preview {
782      left: 50%;
783      transform: translateX(-50%);
784    }
785
786    html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc {
787      display: none;
788    }
789  </style>
790</head>
791<body for="html-export" id="body">
792<div class="smartperf smartperf-preview">
793  <h1 class="mume-header fontColor">TaskPool抓取和展示说明</h1>
794
795  <p class="fontColor">
796    TaskPool分析模块主要展示应用程序使用taskpool时，任务的关联关系，任务调度开销和任务并发度分析情况，任务各阶段耗时情况，线程池的状态统计，队列任务数，任务是否超时。
797  </p>
798  <h2 class="mume-header fontColor">TaskPool的抓取</h2>
799
800  <h4 class="mume-header fontColor">TaskPool的抓取配置参数</h4>
801
802  <p class="fontColor">
803    打开Task pool开关抓取taskpool数据。<br/>
804    <img src="../figures/Taskpool/taskpoolconfig.jpg" alt="GitHub Logo"/>
805  </p>
806  <h3 class="mume-header fontColor">TaskPool展示说明</h3>
807
808  <p class="fontColor">
809    将抓取的taskpool文件导入到smartperf中，查看任务的关联关系等信息。<br/>
810    <img src="../figures/Taskpool/taskpoolrow.jpg" alt="GitHub Logo"/>
811  </p>
812  <h3 class="mume-header fontColor">TaskPool的任务关联关系跟踪</h3>
813
814  <p class="fontColor">
815    任务关联关系就是根据任务的executeId，把一个taskpool任务的各个执行的函数调用栈连接起来，用于表示一个任务从开始分发到执行，再到最后任务结束的整个过程。<br/>
816    <img src="../figures/Taskpool/taskpoolrelation.jpg" alt="GitHub Logo"/><br/>
817    如上图所示，点击H:Task Perform: taskId : 2, executeId :
818    2的调用栈会出现红色连线，红色连线展示了executeId是2的任务的关联关系，连接的调用栈分别是：
819  </p>
820  <ul class="fontColor">
821    <li>
822          <pre class="smartperf-text fontColor light">
823H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1：任务分发。
824</pre
825>
826    </li>
827    <li>
828          <pre class="smartperf-text fontColor light">
829H:Task Perform: taskId : 2, executeId : 2：任务执行。
830</pre
831>
832    </li>
833    <li>
834          <pre class="smartperf-text fontColor light">
835H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful：任务返回。
836</pre
837>
838    </li>
839  </ul>
840  <h3 class="mume-header fontColor">TaskPool的并发度</h3>
841
842  <p class="fontColor">
843    点选或者框选任务状态为执行会进行任务并发度展示，如图所示并发度是3。<br/>
844    <img src="../figures/Taskpool/taskpoolconcurrency.jpg" alt="GitHub Logo"/>
845  </p>
846  <h3 class="mume-header fontColor">TaskPool泳道图的点选功能</h3>
847
848  <p class="fontColor">
849    点选taskpool的Slice，展示该taskpool信息的tab页。<br/>
850    <img src="../figures/Taskpool/taskpoolselect.jpg" alt="GitHub Logo"/>
851  </p>
852  <ul class="fontColor">
853    <li>
854          <pre class="smartperf-text fontColor light">
855Name： 任务调用栈名称。
856</pre
857>
858    </li>
859    <li>
860          <pre class="smartperf-text fontColor light">
861StartTime： 任务调用栈开始时间。
862</pre
863>
864    </li>
865    <li>
866          <pre class="smartperf-text fontColor light">
867Duration：任务调用栈持续时间。
868</pre
869>
870    </li>
871    <li>
872          <pre class="smartperf-text fontColor light">
873depth：调用栈层级。
874</pre
875>
876    </li>
877  </ul>
878  <h3 class="mume-header fontColor">TaskPool泳道图的框选功能</h3>
879
880  <p class="fontColor">
881    框选taskpool的泳道图，展示Frames的tab页。<br/>
882    <img src="../figures/Taskpool/taskpooldrag.jpg" alt="GitHub Logo"/>
883  </p>
884  <ul class="fontColor">
885    <li>
886          <pre class="smartperf-text fontColor light">
887Execute Id： 任务id。
888</pre
889>
890    </li>
891    <li>
892          <pre class="smartperf-text fontColor light">
893Task Priority： 任务优先级(HIGH，MEDIUM，LOW)。
894</pre
895>
896    </li>
897    <li>
898          <pre class="smartperf-text fontColor light">
899Scheduling Time(ms)：调度耗时(任务执行起始时间 - 任务分发起始时间)。
900</pre
901>
902    </li>
903    <li>
904          <pre class="smartperf-text fontColor light">
905Execution Time(ms)：执行耗时(任务执行的duration)。
906</pre
907>
908    </li>
909    <li>
910          <pre class="smartperf-text fontColor light">
911Return Time(ms)：返回耗时(任务返回的结束时间 – 任务执行的结束时间)。
912</pre
913>
914    </li>
915  </ul>
916  <h3 class="mume-header fontColor">TaskPool的队列任务数和线程池里线程状态统计</h3>
917
918  <p class="fontColor">
919    <img src="../figures/Taskpool/taskpoolnum.jpg" alt="GitHub Logo"/><br/>
920    如上图，H:threadNum，H:runningThreadNum，H:idleThreadNum，H:timeoutThreadNum是线程池里线程状态统计，H:taskNum是队列任务数。
921  </p>
922  <h3 class="mume-header fontColor">TaskPool的任务超时退出</h3>
923
924  <p class="fontColor">
925    在带有H:Thread Timeout Exit的调用栈的泳道图会采用黄色圆圈，中间为白色反叹号标记，代表任务超时退出。<br/>
926    <img src="../figures/Taskpool/taskpoolexit.jpg" alt="GitHub Logo"/>
927  </p>
928</div>
929
930<script>
931  window.onload = () => {
932    let isDark = window.location.search;
933    if (isDark.indexOf('?') != -1) {
934      isDark = isDark.substr(1, isDark.length - 1);
935    }
936    if (isDark == 'true') {
937      document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
938      let header = document.getElementsByClassName('fontColor');
939      for (let i = 0; i < header.length; i++) {
940        header[i].style.color = '#fff';
941      }
942      let lightBackGround = document.getElementsByClassName('light');
943      for (let i = 0; i < lightBackGround.length; i++) {
944        lightBackGround[i].style.backgroundColor = '#32373F';
945      }
946    }
947  };
948</script>
949</body>
950</html>
951