• 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_Js_memory</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">Js Memory抓取和展示说明</h1>
793
794      <p class="fontColor">Js Memory是查看程序中存量内存的情况。</p>
795      <h2 class="mume-header fontColor">Js Memory的抓取</h2>
796
797      <h3 class="mume-header fontColor">Js Memory抓取配置参数</h3>
798
799      <p class="fontColor">
800        <img src="../figures/Jsmemory/jsmemorysetting.jpg" alt="GitHub Logo" /><br />
801        配置参数说明：
802      </p>
803      <ul class="fontColor">
804        <li>Process：设置抓取的进程ID，此处以1747进程号为例。</li>
805        <li>Heap snapshot：堆快照性能分析会显示网页的JavaScript对象和相关DOM节点中内存分配情况。</li>
806        <li>include numerical values in capture：在快照中添加数字。</li>
807        <li>Interval：抓取的时间间隔。</li>
808        <li>Allocation insteumentation on timeline：分配时间轴显示了插桩的JavaScript内存分配随时间变化的情况。</li>
809        <li>
810          record stack traces of allocations(extra performance overhead)：录制各项分配的堆栈轨迹(会产生额外的性能开销)。
811        </li>
812      </ul>
813      <p class="fontColor">
814        再点击Record setting，在output file path输入文件名hiprofiler_data_jsmemory.htrace，拖动滚动条设置buffer
815        size大小是64M，抓取时长是30s。<br />
816        <img src="../figures/Jsmemory/jsmemoryset.jpg" alt="GitHub Logo" />
817      </p>
818      <p class="fontColor">
819        点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。<br />
820        <img src="../figures/Jsmemory/jsmemoryrecord.jpg" alt="GitHub Logo" />
821      </p>
822      <h2 class="mume-header fontColor">Js Memory展示说明</h2>
823
824      <p class="fontColor">将抓取的jsmemory文件导入到smartperf工具中查看，查看程序中存量内存的情况。</p>
825      <h3 class="mume-header fontColor">Js Memory泳道图展示类型</h3>
826
827      <p class="fontColor">
828        堆快照类型文件的泳道图展示。<br />
829        <img src="../figures/Jsmemory/jsnapshotChart.jpg" alt="GitHub Logo" />
830      </p>
831      <ul class="fontColor">
832        <li>
833          <pre class="smartperf-text fontColor light">
834Heapsnapshot：堆快照性能分析会显示网页的JavaScript对象和相关DOM节点中内存分配情况。
835</pre
836          >
837        </li>
838      </ul>
839      <p class="fontColor">
840        时间轴上分配插桩类型文件的泳道图展示。<br />
841        <img src="../figures/Jsmemory/jstimelineChart.jpg" alt="GitHub Logo" />
842      </p>
843      <ul class="fontColor">
844        <li>
845          <pre class="smartperf-text fontColor light">
846Heaptimeline：分配时间轴显示了插桩的JavaScript内存分配随时间变化的情况。
847</pre
848          >
849        </li>
850      </ul>
851      <h3 class="mume-header fontColor">Js Memory泳道图的框选功能</h3>
852
853      <p class="fontColor">
854        可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有两个tab页。<br />
855        Summary的Tab页，主要显示了总览视图，通过类的名称来分组显示对象。<br />
856        <img src="../figures/Jsmemory/JsSummary.jpg" alt="GitHub Logo" />
857      </p>
858      <ul class="fontColor">
859        <li>
860          <pre class="smartperf-text fontColor light">
861Constructor：类创建的所有对象，其中
862              第一层为类名，后面的x表示该类创建了多少实例。
863              第二层为该类的实例名+id，id唯一。
864              第三层以下为实例中的成员变量。
865</pre
866          >
867        </li>
868        <li>
869          <pre class="smartperf-text fontColor light">
870Distance：使用节点的最短简单路径显示到根的距离。
871</pre
872          >
873          <p class="fontColor">
874            例如下图其中GC
875            Root为根节点，distance为0,G为上次GC之后新申请内存的实例，distance为100000000。在界面上显示为-，A、B、C、D、E、F、H为调用节点；以E为例，从A-&gt;D-&gt;F&gt;E,distance为4，从A-&gt;D-&gt;E，distance为3;从B-&gt;E,distance为2,遵循最小distance原则，E的distance为2,同理D的distance为2,F的distance为2,H的distance也为2。
876          </p>
877          <p class="fontColor">
878            其中第一层类的distance为该类所有实例中最小的distance,如果有实例的distance为-，类的distance也为-(-表示没有被root节点引用的实例，如下图的G)<br />
879            <img src="../figures/Jsmemory/js_sample.png" alt="GitHub Logo" />
880          </p>
881        </li>
882        <li>
883          <pre class="smartperf-text fontColor light">
884ShallowSize：是指实例自身占用的内存, 可以理解为保存该'数据结构'需要多少内存
885  例如下面的代码：
886</pre
887          >
888        </li>
889      </ul>
890      <pre data-role="codeBlock" data-info="javascript" class="fontColor light smartperf-javascript">    <span
891            class="token keyword keyword-class">class</span> <span class="token class-name">X</span> <span
892            class="token punctuation">{</span>
893        a<span class="token operator">:</span> number <span class="token operator">=</span> <span
894                class="token number">0</span><span class="token punctuation">;</span>
895        b<span class="token operator">:</span> boolean <span class="token operator">=</span> <span
896                class="token boolean">false</span><span class="token punctuation">;</span>
897        c<span class="token operator">:</span> <span class="token maybe-class-name">ChartStruct</span> <span
898                class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span
899                class="token class-name">ChartStruct</span><span class="token punctuation">(</span><span
900                class="token punctuation">)</span><span class="token punctuation">;</span>
901    <span class="token punctuation">}</span>
902</pre>
903      <pre class="smartperf-text fontColor light">
904    假设当前是在64位系统, 对于类X来说, 一个X实例的Shallow Size为:
905
906    类定义的8byte
907    没有继承其他类, 所以没有父类fields
908    a,b变量为基本类型number,boolean型, js中都为8byte;
909    c变量是引用类型, 和它是否指向具体实例无关, 固定占4byte
910</pre
911      >
912      <ul class="fontColor">
913        <li>
914          <pre class="smartperf-text fontColor light">
915RetainedSize：Retained Size含义为表示当一个实例被GC回收时, 可以同时被回收的实例的Shallow Size之和。
916</pre
917          >
918          <ul class="fontColor">
919            <li>
920              如上图所示；假设所有的节点Size都为1,按照A-&gt;B-&gt;C的顺序回收。
921              <ul class="fontColor">
922                <li>
923                  当A被回收时，H被D调用，先不回收，D没有被调用，D回收，由于D被回收，H没有被调用，H回收，由于F被C调用，E被B、F也调用了，所以不能被回收,此时A的Retained
924                  Size为3,D的Retained Size为2, H的Retained Size为1。
925                </li>
926                <li>当B被回收时，由于E被F占用，所以E不会被回收，此时B的Retained Size为1。</li>
927                <li>
928                  当C被回收时，F没有被调用，E没有被调用,所以都会被回收，此时C的Retained Size为3，F的Retained Size为2,
929                  E的Retained Size为1。
930                </li>
931              </ul>
932            </li>
933          </ul>
934        </li>
935      </ul>
936      <p class="fontColor">
937        Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。<br />
938        <img src="../figures/Jsmemory/JsComparison.jpg" alt="GitHub Logo" />
939      </p>
940      <ul class="fontColor">
941        <li>
942          <pre class="smartperf-text fontColor light">
943#Constructor：类创建的所有对象，类名与id相同视为同一个实例，其中
944              第一层为类的比较，每个时间点的对比其他时间点的类创建与销毁了哪些实例。
945              第二层为实例，由于展示的是创建或者销毁实例，固只展示Size大小。
946              第三层以下为实例的成员变量，不存在比较信息。
947</pre
948          >
949        </li>
950        <li>
951          <pre class="smartperf-text fontColor light">
952#New：新增的实例数量，圆点代表有意义的数据，下划线代表无意义的数据。
953</pre
954          >
955        </li>
956        <li>
957          <pre class="smartperf-text fontColor light">
958#Deleted：删除的实例数量。
959</pre
960          >
961        </li>
962        <li>
963          <pre class="smartperf-text fontColor light">
964#Delta：#New减去#Deleted的数量。
965</pre
966          >
967        </li>
968        <li>
969          <pre class="smartperf-text fontColor light">
970Alloc.Size：新增实例的Size。
971</pre
972          >
973        </li>
974        <li>
975          <pre class="smartperf-text fontColor light">
976Freed Size：删除实例的Size。
977</pre
978          >
979        </li>
980        <li>
981          <pre class="smartperf-text fontColor light">
982Size Delta：Delta的Size。
983</pre
984          >
985        </li>
986      </ul>
987      <h3 class="mume-header fontColor">Js Memory的辅助信息功能</h3>
988
989      <p class="fontColor">
990        在Summary和Comparison的Tab页，选中左边实例，右边Retainers的Tab页会显示多少个实例引用了左边选中的实例。<br />
991        <img src="../figures/Jsmemory/jsmemorycallstack.jpg" alt="GitHub Logo" />
992      </p>
993      <ul class="fontColor">
994        <li>
995          <pre class="smartperf-text fontColor light">
996Object：引用的实例。
997</pre
998          >
999        </li>
1000        <li>
1001          <pre class="smartperf-text fontColor light">
1002Distance：使用节点的最短简单路径显示到根的距离。
1003</pre
1004          >
1005        </li>
1006        <li>
1007          <pre class="smartperf-text fontColor light">
1008ShallowSize：所有对象的本身的内存大小之和。
1009</pre
1010          >
1011        </li>
1012        <li>
1013          <pre class="smartperf-text fontColor light">
1014RetainedSize：对象以及其相关的对象一起被删除后所释放的内存大小，同一组对象之间的最大保留大小。
1015</pre
1016          >
1017        </li>
1018      </ul>
1019      <h3 class="mume-header fontColor">Js Memory详细显示的过滤功能</h3>
1020
1021      <p class="fontColor">
1022        在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。<br />
1023        <img src="../figures/Jsmemory/Jsmemoryfilter.jpg" alt="GitHub Logo" />
1024      </p>
1025    </div>
1026
1027    <script>
1028      window.onload = () => {
1029        let isDark = window.location.search;
1030        if (isDark.indexOf('?') != -1) {
1031          isDark = isDark.substr(1, isDark.length - 1);
1032        }
1033        if (isDark == 'true') {
1034          document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
1035          let header = document.getElementsByClassName('fontColor');
1036          for (let i = 0; i < header.length; i++) {
1037            header[i].style.color = '#fff';
1038          }
1039          let lightBackGround = document.getElementsByClassName('light');
1040          for (let i = 0; i < lightBackGround.length; i++) {
1041            lightBackGround[i].style.backgroundColor = '#32373F';
1042          }
1043        }
1044      };
1045    </script>
1046  </body>
1047</html>
1048