• 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      <p class="fontColor">
795        TaskPool分析模块主要展示应用程序使用taskpool时，任务的关联关系，任务调度开销和任务并发度分析情况，任务各阶段耗时情况，线程池的状态统计，队列任务数，任务是否超时。
796      </p>
797      <h2 class="mume-header fontColor">TaskPool的抓取</h2>
798      <h4 class="mume-header fontColor">TaskPool的抓取配置参数</h4>
799      <p class="fontColor">
800        打开Task pool开关抓取taskpool数据。同时请打开对应的Flags标记(Disabled切换为Enabled)。<br />
801        <img src="../figures/Taskpool/taskpoolconfig.jpg" alt="GitHub Logo" />
802      </p>
803      <h3 class="mume-header fontColor">TaskPool展示说明</h3>
804
805      <p class="fontColor">
806        将抓取的taskpool文件导入到smartperf中，查看任务的关联关系等信息。<br />
807        <img src="../figures/Taskpool/taskpoolrow.jpg" alt="GitHub Logo" />
808      </p>
809      <h3 class="mume-header fontColor">TaskPool的任务关联关系跟踪</h3>
810
811      <p class="fontColor">
812        任务关联关系就是根据任务的executeId，把一个taskpool任务的各个执行的函数调用栈连接起来，用于表示一个任务从开始分发到执行，再到最后任务结束的整个过程。<br />
813        <img src="../figures/Taskpool/taskpoolrelation.jpg" alt="GitHub Logo" /><br />
814        如上图所示，点击H:Task Perform: taskId : 2, executeId :
815        2的调用栈会出现红色连线，红色连线展示了executeId是2的任务的关联关系，连接的调用栈分别是：
816      </p>
817      <ul class="fontColor">
818        <li>
819          <pre class="smartperf-text fontColor light">
820H:Task Allocation: taskId : 2, executeId : 2, priority : 1, executeState : 1：任务分发。
821</pre
822          >
823        </li>
824        <li>
825          <pre class="smartperf-text fontColor light">
826H:Task Perform: taskId : 2, executeId : 2：任务执行。
827</pre
828          >
829        </li>
830        <li>
831          <pre class="smartperf-text fontColor light">
832H:Task PerformTask End: taskId : 2, executeId : 2, performResult : Successful：任务返回。
833</pre
834          >
835        </li>
836      </ul>
837      <h3 class="mume-header fontColor">TaskPool的并发度</h3>
838
839      <p class="fontColor">
840        点选或者框选任务状态为执行会进行任务并发度展示，如图所示并发度是3。<br />
841        <img src="../figures/Taskpool/taskpoolconcurrency.jpg" alt="GitHub Logo" />
842      </p>
843      <h3 class="mume-header fontColor">TaskPool泳道图的点选功能</h3>
844
845      <p class="fontColor">
846        点选taskpool的Slice，展示该taskpool信息的tab页。<br />
847        <img src="../figures/Taskpool/taskpoolselect.jpg" alt="GitHub Logo" />
848      </p>
849      <ul class="fontColor">
850        <li>
851          <pre class="smartperf-text fontColor light">
852Name： 任务调用栈名称。
853</pre
854          >
855        </li>
856        <li>
857          <pre class="smartperf-text fontColor light">
858StartTime： 任务调用栈开始时间。
859</pre
860          >
861        </li>
862        <li>
863          <pre class="smartperf-text fontColor light">
864Duration：任务调用栈持续时间。
865</pre
866          >
867        </li>
868        <li>
869          <pre class="smartperf-text fontColor light">
870depth：调用栈层级。
871</pre
872          >
873        </li>
874      </ul>
875      <h3 class="mume-header fontColor">TaskPool泳道图的框选功能</h3>
876
877      <p class="fontColor">
878        框选taskpool的泳道图，展示Frames的tab页。<br />
879        <img src="../figures/Taskpool/taskpooldrag.jpg" alt="GitHub Logo" />
880      </p>
881      <ul class="fontColor">
882        <li>
883          <pre class="smartperf-text fontColor light">
884Execute Id： 任务id。
885</pre
886          >
887        </li>
888        <li>
889          <pre class="smartperf-text fontColor light">
890Task Priority： 任务优先级(HIGH，MEDIUM，LOW)。
891</pre
892          >
893        </li>
894        <li>
895          <pre class="smartperf-text fontColor light">
896Scheduling Time(ms)：调度耗时(任务执行起始时间 - 任务分发起始时间)。
897</pre
898          >
899        </li>
900        <li>
901          <pre class="smartperf-text fontColor light">
902Execution Time(ms)：执行耗时(任务执行的duration)。
903</pre
904          >
905        </li>
906        <li>
907          <pre class="smartperf-text fontColor light">
908Return Time(ms)：返回耗时(任务返回的结束时间 – 任务执行的结束时间)。
909</pre
910          >
911        </li>
912      </ul>
913      <h3 class="mume-header fontColor">TaskPool的队列任务数和线程池里线程状态统计</h3>
914
915      <p class="fontColor">
916        <img src="../figures/Taskpool/taskpoolnum.jpg" alt="GitHub Logo" /><br />
917        如上图，H:threadNum，H:runningThreadNum，H:idleThreadNum，H:timeoutThreadNum是线程池里线程状态统计，H:taskNum是队列任务数。
918      </p>
919      <h3 class="mume-header fontColor">TaskPool的任务超时退出</h3>
920
921      <p class="fontColor">
922        在带有H:Thread Timeout Exit的调用栈的泳道图会采用黄色圆圈，中间为白色反叹号标记，代表任务超时退出。<br />
923        <img src="../figures/Taskpool/taskpoolexit.jpg" alt="GitHub Logo" />
924      </p>
925    </div>
926
927    <script>
928      window.onload = () => {
929        let isDark = window.location.search;
930        if (isDark.indexOf('?') !== -1) {
931          isDark = isDark.substr(1, isDark.length - 1);
932        }
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      };
945    </script>
946  </body>
947</html>
948