• 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>页内存抓取和展示说明</title>
6
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
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: .9em;
29            overflow: auto;
30            border-radius: 2px;
31            background: #e7e6e6;
32        }
33
34        /* Inline code */
35        :not(pre) > code[class*="smartperf-"] {
36            white-space: normal;
37            background: #fcf8f8;
38            padding: 1px .2em;
39            border-radius: 1px .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
136        /* JSON */
137        .smartperf-json .tk.property {
138            color: #19358c;
139        }
140
141        .smartperf-markup .tk.tag .tk.punctuation {
142            color: #2c2b2b;
143        }
144
145        /* CSS */
146        code.smartperf-css,
147        .smartperf-css .tk.function {
148            color: #047ca4;
149        }
150
151        /* YAML */
152        .smartperf-yaml .tk.atrule {
153            color: #609b5a;
154        }
155
156        code.smartperf-yaml {
157            color: #153491;
158        }
159
160        /* Ruby */
161        .smartperf-ruby .tk.function {
162            color: #3f3e3e;
163        }
164
165        /* Markdown */
166        .smartperf-markdown .tk.url {
167            color: #6e5298;
168        }
169
170        /* Makefile */
171        .smartperf-makefile .tk.symbol {
172            color: #6c5393;
173        }
174
175        .smartperf-makefile .tk.variable {
176            color: #183488;
177        }
178
179        .smartperf-makefile .tk.builtin {
180            color: #027ba4;
181        }
182
183        /* Bash */
184        .smartperf-bash .tk.keyword {
185            color: #027fa9;
186        }
187
188        /* highlight */
189        pre[dl] {
190            position: relative;
191            padding: 1em 1px 1px .9em;
192        }
193
194        pre[dl] .line-highlight-wrapper {
195            position: absolute;
196            top: 1px;
197            left: 1px;
198            background-color: transparent;
199            display: block;
200            width: 99%;
201        }
202
203        pre[dl] .line-highlight {
204            position: absolute;
205            left: 1px;
206            right: 1px;
207            padding: inherit;
208            margin-top: 0.9em;
209            background: hsla(25, 21%, 50%, .08);
210            background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0));
211            pointer-events: none;
212            line-height: inherit;
213            white-space: pre;
214        }
215
216        pre[dl] .line-highlight:before,
217        pre[dl] .line-highlight[data-end]:after {
218            content: attr(data-start);
219            position: absolute;
220            text-shadow: none;
221            top: .3em;
222            left: .7em;
223            min-width: .9em;
224            padding: 1px .6em;
225            background-color: hsla(24, 20%, 47%, 0.4);
226            color: hsl(20, 11%, 95%);
227            text-align: center;
228            vertical-align: .2em;
229            border-radius: 10000px;
230            box-shadow: 1px 2px #fdf6f6;
231        }
232
233        pre[dl] .line-highlight[data-end]:after {
234            content: attr(data-end);
235            top: auto;
236            bottom: .5em;
237        }
238
239        html body {
240            line-height: 1.6;
241            font-size: 16px;
242            color: #333333;
243            overflow: initial;
244            background-color: #FFFFFF;
245            word-wrap: break-word;
246            font-family: Helvetica;
247            box-sizing: border-box;
248        }
249
250        html body > :first-child {
251            margin-top: 0px
252        }
253
254        html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
255            margin-top: 1em;
256            margin-bottom: 16px;
257            color: #000000;
258            line-height: 1.2;
259        }
260
261        html body h1 {
262            font-weight: 300;
263            font-size: 2.25em;
264            padding-bottom: .3em
265        }
266
267        html body h2 {
268            font-weight: 410;
269            font-size: 1.74em;
270            padding-bottom: .2em
271        }
272
273        html body h3 {
274            font-size: 1.6em;
275            font-weight: 501
276        }
277
278        html body h4 {
279            font-size: 1.26em;
280            font-weight: 601
281        }
282
283        html body h5 {
284            font-size: 1.2em;
285            font-weight: 601
286        }
287
288        html body h6 {
289            font-size: 0.9em;
290            font-weight: 601
291        }
292
293        html body h1, html body h2, html body h3, html body h4, html body h5 {
294            font-weight: 601
295        }
296
297        html body h5 {
298            font-size: 0.9em
299        }
300
301        html body h6 {
302            color: #5c5c5c
303        }
304
305        html body strong {
306            color: #090909
307        }
308
309        html body del {
310            color: #525252
311        }
312
313        html body a:not([href]) {
314            color: inherit;
315            text-decoration: none
316        }
317
318        html body a {
319            color: #0192da;
320            text-decoration: none
321        }
322
323        html body a:hover {
324            color: #029dea;
325            text-decoration: none
326        }
327
328        html body img {
329            max-width: 99%
330        }
331
332        html body > p {
333            margin-top: 1px;
334            margin-bottom: 15px;
335            word-wrap: break-word
336        }
337
338        html body > ul, html body > ol {
339            margin-bottom: 15px
340        }
341
342        html body ul, html body ol {
343            padding-left: 1.9em
344        }
345
346        html body ul.no-list, html body ol.no-list {
347            padding: 0px;
348            list-style-type: none
349        }
350
351        html body ul ul, html body ul ol, html body ol ol, html body ol ul {
352            margin-top: 1px;
353            margin-bottom: 1px
354        }
355
356        html body li {
357            margin-bottom: 1px
358        }
359
360        html body li.task-list-item {
361            list-style: none
362        }
363
364        html body li > p {
365            margin-top: 1px;
366            margin-bottom: 1px
367        }
368
369        html body .task-list-item-checkbox {
370            margin: 0 .3em .24em -1.7em;
371            vertical-align: middle
372        }
373
374        html body .task-list-item-checkbox:hover {
375            cursor: pointer
376        }
377
378        html body blockquote {
379            padding: 0.1px 15px 0 0.1px;
380            font-size: inherit;
381            color: #5c5c5c;
382            margin: 16px 0.1px 0 0.1px;
383            border-left: 3px solid #cbc9c9;
384            background-color: #e8e6e6;
385        }
386
387        html body blockquote > :first-child {
388            margin-top: 0.2px
389        }
390
391        html body blockquote > :last-child {
392            margin-bottom: 0.1px;
393        }
394
395        html body hr {
396            height: 5px;
397            background-color: #cbcaca;
398            margin: 32px 0 0.1px 0;
399            border: 0 none;
400        }
401
402        html body table {
403            overflow: auto;
404            border-collapse: collapse;
405            margin: 15px 0.1px 20px 0.1px;
406            border-spacing: 0;
407        }
408
409        html body table th {
410            font-weight: bold;
411            color: #000000
412        }
413
414        html body table td, html body table th {
415            border: 1px solid #d6d6d6;
416            padding: 2px 14px
417        }
418
419        html body dl {
420            padding: 0px
421        }
422
423        html body dl dt {
424            padding: 0px;
425            margin-top: 15px;
426            font-size: 0.9em;
427            font-style: italic;
428            font-weight: bold
429        }
430
431        html body dl dd {
432            padding: 0px 17px;
433            margin-bottom: 17px
434        }
435
436        html body code {
437            font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
438            font-size: .86em !important;
439            color: #000000;
440            background-color: #f0f0f0;
441            border-radius: 4px;
442            padding: .3em 0px
443        }
444
445        html body code::before, html body code::after {
446            letter-spacing: -0.1em;
447            content: "\00a0"
448        }
449
450        html body pre > code {
451            padding: 1px;
452            margin: 0px;
453            font-size: .86em !important;
454            word-break: normal;
455            white-space: pre;
456            background: transparent;
457            border: 0px
458        }
459
460        html body .highlight {
461            margin-bottom: 17px
462        }
463
464        html body .highlight pre, html body pre {
465            padding: 0.9em;
466            overflow: auto;
467            font-size: .86em !important;
468            line-height: 1.46;
469            border: #d6d6d6;
470            border-radius: 4px
471        }
472
473        html body .highlight pre {
474            margin-bottom: 0px;
475            word-break: normal
476        }
477
478        html body pre code, html body pre tt {
479            display: inline;
480            max-width: initial;
481            padding: 1px;
482            margin: 1px;
483            overflow: initial;
484            line-height: inherit;
485            word-wrap: normal;
486            background-color: transparent;
487            border: 1px
488        }
489
490        html body pre code:before, html body pre tt:before, html body pre code:after, html body pre tt:after {
491            content: normal
492        }
493
494        html body p, html body blockquote, html body ul, html body ol, html body dl, html body pre {
495            margin-top: 1px;
496            margin-bottom: 17px
497        }
498
499        html body kbd {
500            color: #000000;
501            border: 3px solid #d6d6d6;
502            border-bottom: 3px solid #c7c7c7;
503            padding: 3px 5px;
504            background-color: #f0f0f0;
505            border-radius: 2px
506        }
507
508        @media print {
509            html body {
510                background-color: #ffffff
511            }
512
513            html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
514                color: #000000;
515                page-break-after: avoid
516            }
517
518            html body blockquote {
519                color: #5c5c53
520            }
521
522            html body pre {
523                page-break-inside: avoid
524            }
525
526            html body table {
527                display: table
528            }
529
530            html body img {
531                display: block;
532                max-width: 99%;
533                max-height: 99%
534            }
535
536            html body pre, html body code {
537                word-wrap: break-word;
538                white-space: pre
539            }
540        }
541
542        .smartperf-preview {
543            width: 99%;
544            height: 99%;
545            box-sizing: border-box
546        }
547
548        .smartperf-preview .pagebreak, .smartperf-preview .newpage {
549            page-break-before: always
550        }
551
552        .smartperf-preview pre.line-numbers {
553            position: relative;
554            padding-left: 3.7em;
555            counter-reset: linenumber
556        }
557
558        .smartperf-preview pre.line-numbers > code {
559            position: relative
560        }
561
562        .smartperf-preview pre.line-numbers .line-numbers-rows {
563            position: absolute;
564            pointer-events: none;
565            top: 0.9em;
566            font-size: 99%;
567            left: 1px;
568            width: 3em;
569            letter-spacing: -1px;
570            border-right: 1px solid #999;
571            -webkit-user-select: none;
572            -moz-user-select: none;
573            -ms-user-select: none;
574            user-select: none
575        }
576
577        .smartperf-preview pre.line-numbers .line-numbers-rows > span {
578            pointer-events: none;
579            display: block;
580            counter-increment: linenumber
581        }
582
583        .smartperf-preview pre.line-numbers .line-numbers-rows > span:before {
584            content: counter(linenumber);
585            color: #999;
586            display: block;
587            padding-right: .79em;
588            text-align: right
589        }
590
591        .smartperf-preview .mathjax-exps .MathJax_Display {
592            text-align: center !important
593        }
594
595        .smartperf-preview:not([for="preview"]) .code-chunk .btn-group {
596            display: none
597        }
598
599        .smartperf-preview:not([for="preview"]) .code-chunk .status {
600            display: none
601        }
602
603        .smartperf-preview:not([for="preview"]) .code-chunk .output-div {
604            margin-bottom: 16px
605        }
606
607        .scrollbar-style::-webkit-scrollbar {
608            width: 8px
609        }
610
611        .scrollbar-style::-webkit-scrollbar-track {
612            border-radius: 9px;
613            background-color: transparent
614        }
615
616        .scrollbar-style::-webkit-scrollbar-thumb {
617            border-radius: 6px;
618            background-color: rgba(150, 150, 150, 1);
619            border: 4px solid rgba(150, 150, 150, 1);
620            background-clip: content-box
621        }
622
623        html body[for="html-export"]:not([dpm]) {
624            position: relative;
625            width: 99%;
626            height: 99%;
627            top: 1px;
628            left: 1px;
629            margin: 1px;
630            padding: 1px;
631            overflow: auto
632        }
633
634        html body[for="html-export"]:not([dpm]) .smartperf-preview {
635            position: relative;
636            top: 1px
637        }
638
639        @media screen and (min-width: 914px) {
640            html body[for="html-export"]:not([dpm]) .smartperf-preview {
641                padding: 2em calc(50% - 458px + 2em)
642            }
643        }
644
645        @media screen and (max-width: 914px) {
646            html body[for="html-export"]:not([dpm]) .smartperf-preview {
647                padding: 1.9em
648            }
649        }
650
651        @media screen and (max-width: 450px) {
652            html body[for="html-export"]:not([dpm]) .smartperf-preview {
653                font-size: 15px !important;
654                padding: 1.1em
655            }
656        }
657
658        @media print {
659            html body[for="html-export"]:not([dpm]) #sidebar-toc-btn {
660                display: none
661            }
662        }
663
664        html body[for="html-export"]:not([dpm]) #sidebar-toc-btn {
665            position: fixed;
666            bottom: 9px;
667            left: 9px;
668            font-size: 28px;
669            cursor: pointer;
670            color: inherit;
671            z-index: 99;
672            width: 31px;
673            text-align: center;
674            opacity: .5
675        }
676
677        html body[for="html-export"]:not([dpm])[hsst] #sidebar-toc-btn {
678            opacity: 1
679        }
680
681        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc {
682            position: fixed;
683            top: 1px;
684            left: 1px;
685            width: 300px;
686            height: 99%;
687            padding: 32px 0 48px 0;
688            font-size: 14px;
689            box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
690            box-sizing: border-box;
691            overflow: auto;
692            background-color: inherit
693        }
694
695        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
696            width: 9px
697        }
698
699        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
700            border-radius: 11px;
701            background-color: transparent
702        }
703
704        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
705            border-radius: 6px;
706            background-color: rgba(150, 150, 150, 0.66);
707            border: 3px solid rgba(150, 150, 150, 0.66);
708            background-clip: content-box
709        }
710
711        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc a {
712            text-decoration: none
713        }
714
715        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc ul {
716            padding: 1px 1.7em;
717            margin-top: .9em
718        }
719
720        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc li {
721            margin-bottom: .8em
722        }
723
724        html body[for="html-export"]:not([dpm])[hsst] .md-sidebar-toc ul {
725            list-style-type: none
726        }
727
728        html body[for="html-export"]:not([dpm])[hsst] .smartperf-preview {
729            left: 301px;
730            width: calc(100% - 300px);
731            padding: 2em calc(50% - 457px - 150px);
732            margin: 1px;
733            box-sizing: border-box
734        }
735
736        @media screen and (max-width: 1274px) {
737            html body[for="html-export"]:not([dpm])[hsst] .smartperf-preview {
738                padding: 1.9em
739            }
740        }
741
742        @media screen and (max-width: 450px) {
743            html body[for="html-export"]:not([dpm])[hsst] .smartperf-preview {
744                width: 99%
745            }
746        }
747
748        html body[for="html-export"]:not([dpm]):not([hsst]) .smartperf-preview {
749            left: 50%;
750            transform: translateX(-50%)
751        }
752
753        html body[for="html-export"]:not([dpm]):not([hsst]) .md-sidebar-toc {
754            display: none
755        }
756
757
758    </style>
759</head>
760<body for="html-export" id="body">
761<div class="smartperf smartperf-preview  ">
762    <h1 class="fontColor mume-header">
763        页内存的抓取和展示说明</h1>
764
765    <p class="fontColor">页内存从page层面更深层次剖析应用程序的虚拟内存操作</p>
766    <h2 class="fontColor mume-header">1.页内存的抓取</h2>
767
768    <h3 class="fontColor mume-header">1.1.页内存抓取配置参数</h3>
769
770    <p class="fontColor"><img src="../figures/memoryFetching/ebpfsetting.jpg" alt="GitHub Logo"><br>
771        配置项说明</p>
772    <ul class="fontColor">
773        <li>
774<pre class="smartperf-text fontColor light">Start Virtual Memory Record:配置项的总开关
775</pre>
776        </li>
777        <li>
778<pre class="smartperf-text fontColor light">Process：默认配置的是整个系统的,也可选择单进程抓取
779</pre>
780        </li>
781    </ul>
782    <p class="fontColor">再点击Record setting,在output file path输入文件名hiprofiler_data_ebpf.htrace,拖动滚动条设置buffer
783        size大小是64M,抓取时长是50s<br>
784        <img src="../figures/memoryFetching/ebpfrecord.jpg" alt="GitHub Logo"><br>
785        点击Trace command,就会根据上面的配置生成抓取命令,点击Record抓取，抓取过程中会显示抓取时长<br>
786        <img src="../figures/memoryFetching/ebpfexcuting.jpg" alt="GitHub Logo"></p>
787    <h3 class="fontColor mume-header">
788        2.页内存展示说明</h3>
789
790    <p class="fontColor">抓取结束后页内存的trace会自动加载展示<br>
791        <img src="../figures/memoryFetching/ebpfsummary.jpg" alt="GitHub Logo"></p>
792    <p class="fontColor">界面布局介绍：页内存整体界面布局分为3个部分，其中</p>
793    <ul class="fontColor">
794        <li>
795<pre class="smartperf-text fontColor light">红色区域：泳道图
796</pre>
797        </li>
798        <li>
799<pre class="smartperf-text fontColor light">绿色区域：详细信息
800</pre>
801        </li>
802        <li>
803<pre class="smartperf-text fontColor light">黄色区域：辅助信息(Callstack)
804</pre>
805        </li>
806    </ul>
807    <h3 class="fontColor mume-header">
808        2.1.页内存泳道图展示</h3>
809
810    <p class="fontColor">页内存泳道图展示事件(Operation)发生的次数,每个事件都有持续时间,鼠标悬浮以10ms为区间进行次数统计<br>
811        <img src="../figures/memoryFetching/EBPFchart.jpg" alt="GitHub Logo"><br>
812        按住w键放大界面，悬浮框会显示当前时刻的事件发生次数<br>
813        <img src="../figures/memoryFetching/EBPFcount.jpg" alt="GitHub Logo"></p>
814    <h3 class="fontColor mume-header">
815        2.2.页内存泳道图的框选功能</h3>
816
817    <p class="fontColor">可以对泳道图进行框选,框选后在最下方的弹出层中会展示框选数据的统计表格,总共有三个tab页<br>
818        Virtual Memory Statistics的Tab页<br>
819        <img src="../figures/memoryFetching/vmstatistics.jpg" alt="GitHub Logo"></p>
820    <ul class="fontColor">
821        <li>
822<pre class="smartperf-text fontColor light">Operation/Process/Thread: 按照Operation为基点显示
823</pre>
824        </li>
825        <li>
826<pre class="smartperf-text fontColor light">Count: 事件数量
827</pre>
828        </li>
829        <li>
830<pre class="smartperf-text fontColor light">Duration:总时长
831</pre>
832        </li>
833        <li>
834<pre class="smartperf-text fontColor light">Min Duration：最小时长
835</pre>
836        </li>
837        <li>
838<pre class="smartperf-text fontColor light">Avg Duration: 平均时长
839</pre>
840        </li>
841        <li>
842<pre class="smartperf-text fontColor light">Max Duration：最大时长
843</pre>
844        </li>
845    </ul>
846    <p class="fontColor">点击下方的Statistics by Thread,可以切换到按照Thread为基点显示数据<br>
847        <img src="../figures/memoryFetching/ebpf_bythread.jpg" alt="GitHub Logo"><br>
848        Virtual Memory Calltree的Tab页<br>
849        <img src="../figures/memoryFetching/VMCalltree.jpg" alt="GitHub Logo"></p>
850    <ul class="fontColor">
851        <li>
852<pre class="smartperf-text fontColor light">Call Stack:为经过符号解析后的Callstack,并且给出动态链接库或者进程名的信息
853</pre>
854        </li>
855        <li>
856<pre class="smartperf-text fontColor light">Local:为该调用方法自身占用的CPU时间
857</pre>
858        </li>
859        <li>
860<pre class="smartperf-text fontColor light">Weight:调用方法的执行占比
861</pre>
862        </li>
863    </ul>
864    <p class="fontColor">Virtual Memory Events的Tab页<br>
865        <img src="../figures/memoryFetching/VMEvents.jpg" alt="GitHub Logo"></p>
866    <ul class="fontColor">
867        <li>
868<pre class="smartperf-text fontColor light">Start Time:起始时间
869</pre>
870        </li>
871        <li>
872<pre class="smartperf-text fontColor light">Duration:时长
873</pre>
874        </li>
875        <li>
876<pre class="smartperf-text fontColor light">Thread:线程名
877</pre>
878        </li>
879        <li>
880<pre class="smartperf-text fontColor light">Operation:事件类型
881</pre>
882        </li>
883        <li>
884<pre class="smartperf-text fontColor light">Address:内存地址
885</pre>
886        </li>
887        <li>
888<pre class="smartperf-text fontColor light">Size:内存大小
889</pre>
890        </li>
891    </ul>
892    <h3 class="fontColor mume-header">
893        2.3.页内存支持多种Options展示风格</h3>
894
895    <p class="fontColor">点击Virtual Memory Calltree的Tab页底部的Options,会有两个CheckBox复选框<br>
896        <img src="../figures/memoryFetching/vmOptions.jpg" alt="GitHub Logo"></p>
897    <ul class="fontColor">
898        <li>
899<pre class="smartperf-text fontColor light">Invert:反向输出调用树
900</pre>
901        </li>
902        <li>
903<pre class="smartperf-text fontColor light">Hide System so:隐藏系统库文件
904</pre>
905        </li>
906    </ul>
907    <h3 class="fontColor mume-header">
908        2.4.页内存支持过滤调用栈调用次数的展示风格</h3>
909
910    <p class="fontColor">点击Virtual Memory Calltree的Tab页底部的Sample Counter Filter,可以填上区间值。过滤出符合该区间值调用次数的调用栈信息<br>
911        <img src="../figures/memoryFetching/vmcounter.jpg" alt="GitHub Logo"></p>
912    <h3 class="fontColor mume-header">
913        2.5.页内存功能的调用栈Group展示-数据分析支持剪裁功能</h3>
914
915    <p class="fontColor"><img src="../figures/memoryFetching/vmdatamining.jpg" alt="GitHub Logo"></p>
916    <ul class="fontColor">
917        <li>
918            <p class="fontColor">裁剪Callstack,点击Callstack上一个节点符号，再点击底部Symbol
919                Filter按钮，则该符号自动被裁剪掉，同时将该节点往下所有的Callstack内容裁剪掉</p>
920        </li>
921        <li>
922            <p class="fontColor">裁剪Library，点击Library Filter按钮，则该库文件符号下所有的子节点也被裁剪</p>
923        </li>
924        <li>
925            <p class="fontColor">点击Reset按钮，将恢复选中的裁剪内容</p>
926        </li>
927    </ul>
928    <h3 class="fontColor mume-header">
929        2.6.页内存功能的调用栈Group展示支持按条件过滤</h3>
930
931    <p class="fontColor">在Input Filter输入关键字，会显示出带有该关键字的展示信息<br>
932        <img src="../figures/memoryFetching/vminputfilter.jpg" alt="GitHub Logo"></p>
933    <h3 class="fontColor mume-header">
934        2.7.页内存辅助信息区展示调用栈</h3>
935
936    <p class="fontColor">当在详细信息区选择一个符号时，将展示与该符号相关的完整的调用栈。如下图的Heaviest Stack Trace：<br>
937        <img src="../figures/memoryFetching/vmheaviesttrace.jpg" alt="GitHub Logo"></p>
938    <h3 class="fontColor">2.8.页内存的事件类型的过滤</h3>
939    <p class="fontColor">通过选择可以过滤是File Backed In类型，还是Copy On Write类型事件<br>
940        <img src="../figures/memoryFetching/VMfilter.jpg" alt="GitHub Logo"></p>
941    <h3 class="fontColor">2.9.页内存的火焰图功能</h3>
942    <p class="fontColor">点击Virtual Memory Calltree左下角的柱状图的图标,会切换到火焰图页面<br>
943        <img src="../figures/memoryFetching/vmflame.jpg" alt="GitHub Logo"><br>
944        进入到火焰图页面,火焰图的展示跟Callinfo的tab页的调用栈显示一致,鼠标放到色块上，悬浮框可以显示调用栈名称和Duration时长<br>
945        <img src="../figures/memoryFetching/vmflameshow.jpg" alt="GitHub Logo"><br>
946        鼠标左键火焰图，会进入下一级界面，右键回到上一级<br>
947        <img src="../figures/memoryFetching/vmflamelevel.jpg" alt="GitHub Logo"></p>
948
949</div>
950<script>
951    window.onload = (() => {
952        let isDark = window.location.search;
953        if (isDark.indexOf("?") != -1) {
954            isDark = isDark.substr(1, isDark.length - 1);
955        }
956        if (isDark == 'true') {
957            document.getElementById("body").setAttribute('style', 'background-color:#272C34;')
958            let header = document.getElementsByClassName('fontColor')
959            for (let i = 0; i < header.length; i++) {
960                header[i].style.color = '#fff';
961            }
962            let lightBackGround = document.getElementsByClassName('light')
963            for (let i = 0; i < lightBackGround.length; i++) {
964                lightBackGround[i].style.backgroundColor = '#32373F'
965            }
966        }
967    })
968</script>
969
970</body>
971</html>