1fb726d48Sopenharmony_ci<!DOCTYPE html> 2fb726d48Sopenharmony_ci<html> 3fb726d48Sopenharmony_ci <head> 4fb726d48Sopenharmony_ci <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5fb726d48Sopenharmony_ci <title>quickstart_Js_memory</title> 6fb726d48Sopenharmony_ci <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7fb726d48Sopenharmony_ci <style> 8fb726d48Sopenharmony_ci code[class*='smartperf-'], 9fb726d48Sopenharmony_ci pre[class*='smartperf-'] { 10fb726d48Sopenharmony_ci color: #333333; 11fb726d48Sopenharmony_ci background: none; 12fb726d48Sopenharmony_ci font-family: Helvetica; 13fb726d48Sopenharmony_ci line-height: 1.6; 14fb726d48Sopenharmony_ci text-align: left; 15fb726d48Sopenharmony_ci white-space: pre; 16fb726d48Sopenharmony_ci -moz-tab-size: 9; 17fb726d48Sopenharmony_ci -o-tab-size: 9; 18fb726d48Sopenharmony_ci tab-size: 8; 19fb726d48Sopenharmony_ci -webkit-hyphens: none; 20fb726d48Sopenharmony_ci -moz-hyphens: none; 21fb726d48Sopenharmony_ci -ms-hyphens: none; 22fb726d48Sopenharmony_ci hyphens: none; 23fb726d48Sopenharmony_ci } 24fb726d48Sopenharmony_ci 25fb726d48Sopenharmony_ci /* Code blocks */ 26fb726d48Sopenharmony_ci pre[class*='smartperf-'] { 27fb726d48Sopenharmony_ci padding: 0.9em; 28fb726d48Sopenharmony_ci overflow: auto; 29fb726d48Sopenharmony_ci border-radius: 2px; 30fb726d48Sopenharmony_ci background: #f5f5f4; 31fb726d48Sopenharmony_ci } 32fb726d48Sopenharmony_ci 33fb726d48Sopenharmony_ci /* Inline code */ 34fb726d48Sopenharmony_ci :not(pre) > code[class*='smartperf-'] { 35fb726d48Sopenharmony_ci white-space: normal; 36fb726d48Sopenharmony_ci background: #fcf8f8; 37fb726d48Sopenharmony_ci padding: 1px 0.2em; 38fb726d48Sopenharmony_ci border-radius: 1px 0.3em; 39fb726d48Sopenharmony_ci } 40fb726d48Sopenharmony_ci 41fb726d48Sopenharmony_ci .tk.comment, 42fb726d48Sopenharmony_ci .tk.blockquote { 43fb726d48Sopenharmony_ci color: #8c918c; 44fb726d48Sopenharmony_ci } 45fb726d48Sopenharmony_ci 46fb726d48Sopenharmony_ci .tk.cdata { 47fb726d48Sopenharmony_ci color: #183898; 48fb726d48Sopenharmony_ci } 49fb726d48Sopenharmony_ci 50fb726d48Sopenharmony_ci .tk.doctype, 51fb726d48Sopenharmony_ci .tk.punctuation, 52fb726d48Sopenharmony_ci .tk.variable, 53fb726d48Sopenharmony_ci .tk.macro.property { 54fb726d48Sopenharmony_ci color: #424242; 55fb726d48Sopenharmony_ci } 56fb726d48Sopenharmony_ci 57fb726d48Sopenharmony_ci .tk.operator, 58fb726d48Sopenharmony_ci .tk.important, 59fb726d48Sopenharmony_ci .tk.keyword, 60fb726d48Sopenharmony_ci .tk.rule, 61fb726d48Sopenharmony_ci .tk.builtin { 62fb726d48Sopenharmony_ci color: #b71d65; 63fb726d48Sopenharmony_ci } 64fb726d48Sopenharmony_ci 65fb726d48Sopenharmony_ci .tk.string, 66fb726d48Sopenharmony_ci .tk.url, 67fb726d48Sopenharmony_ci .tk.regex, 68fb726d48Sopenharmony_ci .tk.attr-value { 69fb726d48Sopenharmony_ci color: #16338d; 70fb726d48Sopenharmony_ci } 71fb726d48Sopenharmony_ci 72fb726d48Sopenharmony_ci .tk.property, 73fb726d48Sopenharmony_ci .tk.number, 74fb726d48Sopenharmony_ci .tk.boolean, 75fb726d48Sopenharmony_ci .tk.entity, 76fb726d48Sopenharmony_ci .tk.atrule, 77fb726d48Sopenharmony_ci .tk.constant, 78fb726d48Sopenharmony_ci .tk.symbol, 79fb726d48Sopenharmony_ci .tk.command, 80fb726d48Sopenharmony_ci .tk.code { 81fb726d48Sopenharmony_ci color: #037aa2; 82fb726d48Sopenharmony_ci } 83fb726d48Sopenharmony_ci 84fb726d48Sopenharmony_ci .tk.tag, 85fb726d48Sopenharmony_ci .tk.selector, 86fb726d48Sopenharmony_ci .tk.prolog { 87fb726d48Sopenharmony_ci color: #69ad62; 88fb726d48Sopenharmony_ci } 89fb726d48Sopenharmony_ci 90fb726d48Sopenharmony_ci .tk.function, 91fb726d48Sopenharmony_ci .tk.namespace, 92fb726d48Sopenharmony_ci .tk.pseudo-element, 93fb726d48Sopenharmony_ci .tk.class, 94fb726d48Sopenharmony_ci .tk.class-name, 95fb726d48Sopenharmony_ci .tk.pseudo-class, 96fb726d48Sopenharmony_ci .tk.id, 97fb726d48Sopenharmony_ci .tk.url-reference .tk.variable, 98fb726d48Sopenharmony_ci .tk.attr-name { 99fb726d48Sopenharmony_ci color: #775d9d; 100fb726d48Sopenharmony_ci } 101fb726d48Sopenharmony_ci 102fb726d48Sopenharmony_ci .tk.entity { 103fb726d48Sopenharmony_ci cursor: help; 104fb726d48Sopenharmony_ci } 105fb726d48Sopenharmony_ci 106fb726d48Sopenharmony_ci .tk.title, 107fb726d48Sopenharmony_ci .tk.title .tk.punctuation { 108fb726d48Sopenharmony_ci font-weight: bold; 109fb726d48Sopenharmony_ci color: #1a3773; 110fb726d48Sopenharmony_ci } 111fb726d48Sopenharmony_ci 112fb726d48Sopenharmony_ci .tk.list { 113fb726d48Sopenharmony_ci color: #f56940; 114fb726d48Sopenharmony_ci } 115fb726d48Sopenharmony_ci 116fb726d48Sopenharmony_ci .tk.inserted { 117fb726d48Sopenharmony_ci background-color: #eaffea; 118fb726d48Sopenharmony_ci color: #509b2f; 119fb726d48Sopenharmony_ci } 120fb726d48Sopenharmony_ci 121fb726d48Sopenharmony_ci .tk.deleted { 122fb726d48Sopenharmony_ci background-color: #fae1e1; 123fb726d48Sopenharmony_ci color: #ad2d06; 124fb726d48Sopenharmony_ci } 125fb726d48Sopenharmony_ci 126fb726d48Sopenharmony_ci .tk.bold { 127fb726d48Sopenharmony_ci font-weight: bolder; 128fb726d48Sopenharmony_ci } 129fb726d48Sopenharmony_ci 130fb726d48Sopenharmony_ci .tk.italic { 131fb726d48Sopenharmony_ci font-style: normal; 132fb726d48Sopenharmony_ci } 133fb726d48Sopenharmony_ci 134fb726d48Sopenharmony_ci /* JSON */ 135fb726d48Sopenharmony_ci .smartperf-json .tk.property { 136fb726d48Sopenharmony_ci color: #19358c; 137fb726d48Sopenharmony_ci } 138fb726d48Sopenharmony_ci 139fb726d48Sopenharmony_ci .smartperf-markup .tk.tag .tk.punctuation { 140fb726d48Sopenharmony_ci color: #2c2b2b; 141fb726d48Sopenharmony_ci } 142fb726d48Sopenharmony_ci 143fb726d48Sopenharmony_ci /* CSS */ 144fb726d48Sopenharmony_ci code.smartperf-css, 145fb726d48Sopenharmony_ci .smartperf-css .tk.function { 146fb726d48Sopenharmony_ci color: #047ca4; 147fb726d48Sopenharmony_ci } 148fb726d48Sopenharmony_ci 149fb726d48Sopenharmony_ci /* YAML */ 150fb726d48Sopenharmony_ci .smartperf-yaml .tk.atrule { 151fb726d48Sopenharmony_ci color: #609b5a; 152fb726d48Sopenharmony_ci } 153fb726d48Sopenharmony_ci 154fb726d48Sopenharmony_ci code.smartperf-yaml { 155fb726d48Sopenharmony_ci color: #153491; 156fb726d48Sopenharmony_ci } 157fb726d48Sopenharmony_ci 158fb726d48Sopenharmony_ci /* Ruby */ 159fb726d48Sopenharmony_ci .smartperf-ruby .tk.function { 160fb726d48Sopenharmony_ci color: #3f3e3e; 161fb726d48Sopenharmony_ci } 162fb726d48Sopenharmony_ci 163fb726d48Sopenharmony_ci /* Markdown */ 164fb726d48Sopenharmony_ci .smartperf-markdown .tk.url { 165fb726d48Sopenharmony_ci color: #6e5298; 166fb726d48Sopenharmony_ci } 167fb726d48Sopenharmony_ci 168fb726d48Sopenharmony_ci /* Makefile */ 169fb726d48Sopenharmony_ci .smartperf-makefile .tk.symbol { 170fb726d48Sopenharmony_ci color: #6c5393; 171fb726d48Sopenharmony_ci } 172fb726d48Sopenharmony_ci 173fb726d48Sopenharmony_ci .smartperf-makefile .tk.variable { 174fb726d48Sopenharmony_ci color: #183488; 175fb726d48Sopenharmony_ci } 176fb726d48Sopenharmony_ci 177fb726d48Sopenharmony_ci .smartperf-makefile .tk.builtin { 178fb726d48Sopenharmony_ci color: #027ba4; 179fb726d48Sopenharmony_ci } 180fb726d48Sopenharmony_ci 181fb726d48Sopenharmony_ci /* Bash */ 182fb726d48Sopenharmony_ci .smartperf-bash .tk.keyword { 183fb726d48Sopenharmony_ci color: #027fa9; 184fb726d48Sopenharmony_ci } 185fb726d48Sopenharmony_ci 186fb726d48Sopenharmony_ci /* highlight */ 187fb726d48Sopenharmony_ci pre[dl] { 188fb726d48Sopenharmony_ci position: relative; 189fb726d48Sopenharmony_ci padding: 1em 1px 1px 0.9em; 190fb726d48Sopenharmony_ci } 191fb726d48Sopenharmony_ci 192fb726d48Sopenharmony_ci pre[dl] .line-highlight-wrapper { 193fb726d48Sopenharmony_ci position: absolute; 194fb726d48Sopenharmony_ci top: 1px; 195fb726d48Sopenharmony_ci left: 1px; 196fb726d48Sopenharmony_ci background-color: transparent; 197fb726d48Sopenharmony_ci display: block; 198fb726d48Sopenharmony_ci width: 99%; 199fb726d48Sopenharmony_ci } 200fb726d48Sopenharmony_ci 201fb726d48Sopenharmony_ci pre[dl] .line-highlight { 202fb726d48Sopenharmony_ci position: absolute; 203fb726d48Sopenharmony_ci left: 1px; 204fb726d48Sopenharmony_ci right: 1px; 205fb726d48Sopenharmony_ci padding: inherit; 206fb726d48Sopenharmony_ci margin-top: 0.9em; 207fb726d48Sopenharmony_ci background: hsla(25, 21%, 50%, 0.08); 208fb726d48Sopenharmony_ci background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0)); 209fb726d48Sopenharmony_ci pointer-events: none; 210fb726d48Sopenharmony_ci line-height: inherit; 211fb726d48Sopenharmony_ci white-space: pre; 212fb726d48Sopenharmony_ci } 213fb726d48Sopenharmony_ci 214fb726d48Sopenharmony_ci pre[dl] .line-highlight:before, 215fb726d48Sopenharmony_ci pre[dl] .line-highlight[data-end]:after { 216fb726d48Sopenharmony_ci content: attr(data-start); 217fb726d48Sopenharmony_ci position: absolute; 218fb726d48Sopenharmony_ci text-shadow: none; 219fb726d48Sopenharmony_ci top: 0.3em; 220fb726d48Sopenharmony_ci left: 0.7em; 221fb726d48Sopenharmony_ci min-width: 0.9em; 222fb726d48Sopenharmony_ci padding: 1px 0.6em; 223fb726d48Sopenharmony_ci background-color: hsla(24, 20%, 47%, 0.4); 224fb726d48Sopenharmony_ci color: hsl(20, 11%, 95%); 225fb726d48Sopenharmony_ci text-align: center; 226fb726d48Sopenharmony_ci vertical-align: 0.2em; 227fb726d48Sopenharmony_ci border-radius: 10000px; 228fb726d48Sopenharmony_ci box-shadow: 1px 2px #fdf6f6; 229fb726d48Sopenharmony_ci } 230fb726d48Sopenharmony_ci 231fb726d48Sopenharmony_ci pre[dl] .line-highlight[data-end]:after { 232fb726d48Sopenharmony_ci content: attr(data-end); 233fb726d48Sopenharmony_ci top: auto; 234fb726d48Sopenharmony_ci bottom: 0.5em; 235fb726d48Sopenharmony_ci } 236fb726d48Sopenharmony_ci 237fb726d48Sopenharmony_ci html body { 238fb726d48Sopenharmony_ci line-height: 1.6; 239fb726d48Sopenharmony_ci font-size: 16px; 240fb726d48Sopenharmony_ci color: #333333; 241fb726d48Sopenharmony_ci overflow: initial; 242fb726d48Sopenharmony_ci word-wrap: break-word; 243fb726d48Sopenharmony_ci font-family: Helvetica; 244fb726d48Sopenharmony_ci box-sizing: border-box; 245fb726d48Sopenharmony_ci } 246fb726d48Sopenharmony_ci 247fb726d48Sopenharmony_ci html body > :first-child { 248fb726d48Sopenharmony_ci margin-top: 0px; 249fb726d48Sopenharmony_ci } 250fb726d48Sopenharmony_ci 251fb726d48Sopenharmony_ci html body h1, 252fb726d48Sopenharmony_ci html body h2, 253fb726d48Sopenharmony_ci html body h3, 254fb726d48Sopenharmony_ci html body h4, 255fb726d48Sopenharmony_ci html body h5, 256fb726d48Sopenharmony_ci html body h6 { 257fb726d48Sopenharmony_ci margin-top: 1em; 258fb726d48Sopenharmony_ci margin-bottom: 16px; 259fb726d48Sopenharmony_ci color: #000000; 260fb726d48Sopenharmony_ci line-height: 1.2; 261fb726d48Sopenharmony_ci } 262fb726d48Sopenharmony_ci 263fb726d48Sopenharmony_ci html body h1 { 264fb726d48Sopenharmony_ci font-weight: 300; 265fb726d48Sopenharmony_ci font-size: 2.25em; 266fb726d48Sopenharmony_ci padding-bottom: 0.3em; 267fb726d48Sopenharmony_ci } 268fb726d48Sopenharmony_ci 269fb726d48Sopenharmony_ci html body h2 { 270fb726d48Sopenharmony_ci font-weight: 410; 271fb726d48Sopenharmony_ci font-size: 1.74em; 272fb726d48Sopenharmony_ci padding-bottom: 0.2em; 273fb726d48Sopenharmony_ci } 274fb726d48Sopenharmony_ci 275fb726d48Sopenharmony_ci html body h3 { 276fb726d48Sopenharmony_ci font-size: 1.6em; 277fb726d48Sopenharmony_ci font-weight: 501; 278fb726d48Sopenharmony_ci } 279fb726d48Sopenharmony_ci 280fb726d48Sopenharmony_ci html body h4 { 281fb726d48Sopenharmony_ci font-size: 1.26em; 282fb726d48Sopenharmony_ci font-weight: 601; 283fb726d48Sopenharmony_ci } 284fb726d48Sopenharmony_ci 285fb726d48Sopenharmony_ci html body h5 { 286fb726d48Sopenharmony_ci font-size: 1.2em; 287fb726d48Sopenharmony_ci font-weight: 601; 288fb726d48Sopenharmony_ci } 289fb726d48Sopenharmony_ci 290fb726d48Sopenharmony_ci html body h6 { 291fb726d48Sopenharmony_ci font-size: 0.9em; 292fb726d48Sopenharmony_ci font-weight: 601; 293fb726d48Sopenharmony_ci } 294fb726d48Sopenharmony_ci 295fb726d48Sopenharmony_ci html body h1, 296fb726d48Sopenharmony_ci html body h2, 297fb726d48Sopenharmony_ci html body h3, 298fb726d48Sopenharmony_ci html body h4, 299fb726d48Sopenharmony_ci html body h5 { 300fb726d48Sopenharmony_ci font-weight: 601; 301fb726d48Sopenharmony_ci } 302fb726d48Sopenharmony_ci 303fb726d48Sopenharmony_ci html body h5 { 304fb726d48Sopenharmony_ci font-size: 0.9em; 305fb726d48Sopenharmony_ci } 306fb726d48Sopenharmony_ci 307fb726d48Sopenharmony_ci html body h6 { 308fb726d48Sopenharmony_ci color: #5c5c5c; 309fb726d48Sopenharmony_ci } 310fb726d48Sopenharmony_ci 311fb726d48Sopenharmony_ci html body strong { 312fb726d48Sopenharmony_ci color: #090909; 313fb726d48Sopenharmony_ci } 314fb726d48Sopenharmony_ci 315fb726d48Sopenharmony_ci html body del { 316fb726d48Sopenharmony_ci color: #525252; 317fb726d48Sopenharmony_ci } 318fb726d48Sopenharmony_ci 319fb726d48Sopenharmony_ci html body a:not([href]) { 320fb726d48Sopenharmony_ci color: inherit; 321fb726d48Sopenharmony_ci text-decoration: none; 322fb726d48Sopenharmony_ci } 323fb726d48Sopenharmony_ci 324fb726d48Sopenharmony_ci html body a { 325fb726d48Sopenharmony_ci color: #0192da; 326fb726d48Sopenharmony_ci text-decoration: none; 327fb726d48Sopenharmony_ci } 328fb726d48Sopenharmony_ci 329fb726d48Sopenharmony_ci html body a:hover { 330fb726d48Sopenharmony_ci color: #029dea; 331fb726d48Sopenharmony_ci text-decoration: none; 332fb726d48Sopenharmony_ci } 333fb726d48Sopenharmony_ci 334fb726d48Sopenharmony_ci html body img { 335fb726d48Sopenharmony_ci max-width: 99%; 336fb726d48Sopenharmony_ci } 337fb726d48Sopenharmony_ci 338fb726d48Sopenharmony_ci html body > p { 339fb726d48Sopenharmony_ci margin-top: 1px; 340fb726d48Sopenharmony_ci margin-bottom: 15px; 341fb726d48Sopenharmony_ci word-wrap: break-word; 342fb726d48Sopenharmony_ci } 343fb726d48Sopenharmony_ci 344fb726d48Sopenharmony_ci html body > ul, 345fb726d48Sopenharmony_ci html body > ol { 346fb726d48Sopenharmony_ci margin-bottom: 15px; 347fb726d48Sopenharmony_ci } 348fb726d48Sopenharmony_ci 349fb726d48Sopenharmony_ci html body ul, 350fb726d48Sopenharmony_ci html body ol { 351fb726d48Sopenharmony_ci padding-left: 1.9em; 352fb726d48Sopenharmony_ci } 353fb726d48Sopenharmony_ci 354fb726d48Sopenharmony_ci html body ul.no-list, 355fb726d48Sopenharmony_ci html body ol.no-list { 356fb726d48Sopenharmony_ci padding: 0px; 357fb726d48Sopenharmony_ci list-style-type: none; 358fb726d48Sopenharmony_ci } 359fb726d48Sopenharmony_ci 360fb726d48Sopenharmony_ci html body ul ul, 361fb726d48Sopenharmony_ci html body ul ol, 362fb726d48Sopenharmony_ci html body ol ol, 363fb726d48Sopenharmony_ci html body ol ul { 364fb726d48Sopenharmony_ci margin-top: 1px; 365fb726d48Sopenharmony_ci margin-bottom: 1px; 366fb726d48Sopenharmony_ci } 367fb726d48Sopenharmony_ci 368fb726d48Sopenharmony_ci html body li { 369fb726d48Sopenharmony_ci margin-bottom: 1px; 370fb726d48Sopenharmony_ci } 371fb726d48Sopenharmony_ci 372fb726d48Sopenharmony_ci html body li.task-list-item { 373fb726d48Sopenharmony_ci list-style: none; 374fb726d48Sopenharmony_ci } 375fb726d48Sopenharmony_ci 376fb726d48Sopenharmony_ci html body li > p { 377fb726d48Sopenharmony_ci margin-top: 1px; 378fb726d48Sopenharmony_ci margin-bottom: 1px; 379fb726d48Sopenharmony_ci } 380fb726d48Sopenharmony_ci 381fb726d48Sopenharmony_ci html body .task-list-item-checkbox { 382fb726d48Sopenharmony_ci margin: 0 0.3em 0.24em -1.7em; 383fb726d48Sopenharmony_ci vertical-align: middle; 384fb726d48Sopenharmony_ci } 385fb726d48Sopenharmony_ci 386fb726d48Sopenharmony_ci html body .task-list-item-checkbox:hover { 387fb726d48Sopenharmony_ci cursor: pointer; 388fb726d48Sopenharmony_ci } 389fb726d48Sopenharmony_ci 390fb726d48Sopenharmony_ci html body blockquote { 391fb726d48Sopenharmony_ci padding: 0.1px 15px 0 0.1px; 392fb726d48Sopenharmony_ci font-size: inherit; 393fb726d48Sopenharmony_ci color: #5c5c5c; 394fb726d48Sopenharmony_ci margin: 16px 0.1px 0 0.1px; 395fb726d48Sopenharmony_ci border-left: 3px solid #cbc9c9; 396fb726d48Sopenharmony_ci background-color: #e8e6e6; 397fb726d48Sopenharmony_ci } 398fb726d48Sopenharmony_ci 399fb726d48Sopenharmony_ci html body blockquote > :first-child { 400fb726d48Sopenharmony_ci margin-top: 0.2px; 401fb726d48Sopenharmony_ci } 402fb726d48Sopenharmony_ci 403fb726d48Sopenharmony_ci html body blockquote > :last-child { 404fb726d48Sopenharmony_ci margin-bottom: 0.1px; 405fb726d48Sopenharmony_ci } 406fb726d48Sopenharmony_ci 407fb726d48Sopenharmony_ci html body hr { 408fb726d48Sopenharmony_ci height: 5px; 409fb726d48Sopenharmony_ci background-color: #cbcaca; 410fb726d48Sopenharmony_ci margin: 32px 0 0.1px 0; 411fb726d48Sopenharmony_ci border: 0 none; 412fb726d48Sopenharmony_ci } 413fb726d48Sopenharmony_ci 414fb726d48Sopenharmony_ci html body table { 415fb726d48Sopenharmony_ci overflow: auto; 416fb726d48Sopenharmony_ci border-collapse: collapse; 417fb726d48Sopenharmony_ci margin: 15px 0.1px 20px 0.1px; 418fb726d48Sopenharmony_ci border-spacing: 0; 419fb726d48Sopenharmony_ci } 420fb726d48Sopenharmony_ci 421fb726d48Sopenharmony_ci html body table th { 422fb726d48Sopenharmony_ci font-weight: bold; 423fb726d48Sopenharmony_ci color: #000000; 424fb726d48Sopenharmony_ci } 425fb726d48Sopenharmony_ci 426fb726d48Sopenharmony_ci html body table td, 427fb726d48Sopenharmony_ci html body table th { 428fb726d48Sopenharmony_ci border: 1px solid #d6d6d6; 429fb726d48Sopenharmony_ci padding: 2px 14px; 430fb726d48Sopenharmony_ci } 431fb726d48Sopenharmony_ci 432fb726d48Sopenharmony_ci html body dl { 433fb726d48Sopenharmony_ci padding: 0px; 434fb726d48Sopenharmony_ci } 435fb726d48Sopenharmony_ci 436fb726d48Sopenharmony_ci html body dl dt { 437fb726d48Sopenharmony_ci padding: 0px; 438fb726d48Sopenharmony_ci margin-top: 15px; 439fb726d48Sopenharmony_ci font-size: 0.9em; 440fb726d48Sopenharmony_ci font-style: italic; 441fb726d48Sopenharmony_ci font-weight: bold; 442fb726d48Sopenharmony_ci } 443fb726d48Sopenharmony_ci 444fb726d48Sopenharmony_ci html body dl dd { 445fb726d48Sopenharmony_ci padding: 0px 17px; 446fb726d48Sopenharmony_ci margin-bottom: 17px; 447fb726d48Sopenharmony_ci } 448fb726d48Sopenharmony_ci 449fb726d48Sopenharmony_ci html body code { 450fb726d48Sopenharmony_ci font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; 451fb726d48Sopenharmony_ci font-size: 0.86em !important; 452fb726d48Sopenharmony_ci color: #000000; 453fb726d48Sopenharmony_ci background-color: #f0f0f0; 454fb726d48Sopenharmony_ci border-radius: 4px; 455fb726d48Sopenharmony_ci padding: 0.3em 0px; 456fb726d48Sopenharmony_ci } 457fb726d48Sopenharmony_ci 458fb726d48Sopenharmony_ci html body code::before, 459fb726d48Sopenharmony_ci html body code::after { 460fb726d48Sopenharmony_ci letter-spacing: -0.1em; 461fb726d48Sopenharmony_ci content: '\00a0'; 462fb726d48Sopenharmony_ci } 463fb726d48Sopenharmony_ci 464fb726d48Sopenharmony_ci html body pre > code { 465fb726d48Sopenharmony_ci padding: 1px; 466fb726d48Sopenharmony_ci margin: 0px; 467fb726d48Sopenharmony_ci font-size: 0.86em !important; 468fb726d48Sopenharmony_ci word-break: normal; 469fb726d48Sopenharmony_ci white-space: pre; 470fb726d48Sopenharmony_ci background: transparent; 471fb726d48Sopenharmony_ci border: 0px; 472fb726d48Sopenharmony_ci } 473fb726d48Sopenharmony_ci 474fb726d48Sopenharmony_ci html body .highlight { 475fb726d48Sopenharmony_ci margin-bottom: 17px; 476fb726d48Sopenharmony_ci } 477fb726d48Sopenharmony_ci 478fb726d48Sopenharmony_ci html body .highlight pre, 479fb726d48Sopenharmony_ci html body pre { 480fb726d48Sopenharmony_ci padding: 0.9em; 481fb726d48Sopenharmony_ci overflow: auto; 482fb726d48Sopenharmony_ci font-size: 0.86em !important; 483fb726d48Sopenharmony_ci line-height: 1.46; 484fb726d48Sopenharmony_ci border: #d6d6d6; 485fb726d48Sopenharmony_ci border-radius: 4px; 486fb726d48Sopenharmony_ci } 487fb726d48Sopenharmony_ci 488fb726d48Sopenharmony_ci html body .highlight pre { 489fb726d48Sopenharmony_ci margin-bottom: 0px; 490fb726d48Sopenharmony_ci word-break: normal; 491fb726d48Sopenharmony_ci } 492fb726d48Sopenharmony_ci 493fb726d48Sopenharmony_ci html body pre code, 494fb726d48Sopenharmony_ci html body pre tt { 495fb726d48Sopenharmony_ci display: inline; 496fb726d48Sopenharmony_ci max-width: initial; 497fb726d48Sopenharmony_ci padding: 1px; 498fb726d48Sopenharmony_ci margin: 1px; 499fb726d48Sopenharmony_ci overflow: initial; 500fb726d48Sopenharmony_ci line-height: inherit; 501fb726d48Sopenharmony_ci word-wrap: normal; 502fb726d48Sopenharmony_ci background-color: transparent; 503fb726d48Sopenharmony_ci border: 1px; 504fb726d48Sopenharmony_ci } 505fb726d48Sopenharmony_ci 506fb726d48Sopenharmony_ci html body pre code:before, 507fb726d48Sopenharmony_ci html body pre tt:before, 508fb726d48Sopenharmony_ci html body pre code:after, 509fb726d48Sopenharmony_ci html body pre tt:after { 510fb726d48Sopenharmony_ci content: normal; 511fb726d48Sopenharmony_ci } 512fb726d48Sopenharmony_ci 513fb726d48Sopenharmony_ci html body p, 514fb726d48Sopenharmony_ci html body blockquote, 515fb726d48Sopenharmony_ci html body ul, 516fb726d48Sopenharmony_ci html body ol, 517fb726d48Sopenharmony_ci html body dl, 518fb726d48Sopenharmony_ci html body pre { 519fb726d48Sopenharmony_ci margin-top: 1px; 520fb726d48Sopenharmony_ci margin-bottom: 17px; 521fb726d48Sopenharmony_ci } 522fb726d48Sopenharmony_ci 523fb726d48Sopenharmony_ci html body kbd { 524fb726d48Sopenharmony_ci color: #000000; 525fb726d48Sopenharmony_ci border: 3px solid #d6d6d6; 526fb726d48Sopenharmony_ci border-bottom: 3px solid #c7c7c7; 527fb726d48Sopenharmony_ci padding: 3px 5px; 528fb726d48Sopenharmony_ci background-color: #f0f0f0; 529fb726d48Sopenharmony_ci border-radius: 2px; 530fb726d48Sopenharmony_ci } 531fb726d48Sopenharmony_ci 532fb726d48Sopenharmony_ci @media print { 533fb726d48Sopenharmony_ci html body { 534fb726d48Sopenharmony_ci background-color: #ffffff; 535fb726d48Sopenharmony_ci } 536fb726d48Sopenharmony_ci 537fb726d48Sopenharmony_ci html body h1, 538fb726d48Sopenharmony_ci html body h2, 539fb726d48Sopenharmony_ci html body h3, 540fb726d48Sopenharmony_ci html body h4, 541fb726d48Sopenharmony_ci html body h5, 542fb726d48Sopenharmony_ci html body h6 { 543fb726d48Sopenharmony_ci color: #000000; 544fb726d48Sopenharmony_ci page-break-after: avoid; 545fb726d48Sopenharmony_ci } 546fb726d48Sopenharmony_ci 547fb726d48Sopenharmony_ci html body blockquote { 548fb726d48Sopenharmony_ci color: #5c5c53; 549fb726d48Sopenharmony_ci } 550fb726d48Sopenharmony_ci 551fb726d48Sopenharmony_ci html body pre { 552fb726d48Sopenharmony_ci page-break-inside: avoid; 553fb726d48Sopenharmony_ci } 554fb726d48Sopenharmony_ci 555fb726d48Sopenharmony_ci html body table { 556fb726d48Sopenharmony_ci display: table; 557fb726d48Sopenharmony_ci } 558fb726d48Sopenharmony_ci 559fb726d48Sopenharmony_ci html body img { 560fb726d48Sopenharmony_ci display: block; 561fb726d48Sopenharmony_ci max-width: 99%; 562fb726d48Sopenharmony_ci max-height: 99%; 563fb726d48Sopenharmony_ci } 564fb726d48Sopenharmony_ci 565fb726d48Sopenharmony_ci html body pre, 566fb726d48Sopenharmony_ci html body code { 567fb726d48Sopenharmony_ci word-wrap: break-word; 568fb726d48Sopenharmony_ci white-space: pre; 569fb726d48Sopenharmony_ci } 570fb726d48Sopenharmony_ci } 571fb726d48Sopenharmony_ci 572fb726d48Sopenharmony_ci .smartperf-preview { 573fb726d48Sopenharmony_ci width: 68vw; 574fb726d48Sopenharmony_ci height: 99%; 575fb726d48Sopenharmony_ci box-sizing: border-box; 576fb726d48Sopenharmony_ci overflow: hidden; 577fb726d48Sopenharmony_ci background-color: #fff; 578fb726d48Sopenharmony_ci } 579fb726d48Sopenharmony_ci 580fb726d48Sopenharmony_ci .smartperf-preview .pagebreak, 581fb726d48Sopenharmony_ci .smartperf-preview .newpage { 582fb726d48Sopenharmony_ci page-break-before: always; 583fb726d48Sopenharmony_ci } 584fb726d48Sopenharmony_ci 585fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers { 586fb726d48Sopenharmony_ci position: relative; 587fb726d48Sopenharmony_ci padding-left: 3.7em; 588fb726d48Sopenharmony_ci counter-reset: linenumber; 589fb726d48Sopenharmony_ci } 590fb726d48Sopenharmony_ci 591fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers > code { 592fb726d48Sopenharmony_ci position: relative; 593fb726d48Sopenharmony_ci } 594fb726d48Sopenharmony_ci 595fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers .line-numbers-rows { 596fb726d48Sopenharmony_ci position: absolute; 597fb726d48Sopenharmony_ci pointer-events: none; 598fb726d48Sopenharmony_ci top: 0.9em; 599fb726d48Sopenharmony_ci font-size: 99%; 600fb726d48Sopenharmony_ci left: 1px; 601fb726d48Sopenharmony_ci width: 3em; 602fb726d48Sopenharmony_ci letter-spacing: -1px; 603fb726d48Sopenharmony_ci border-right: 1px solid #999; 604fb726d48Sopenharmony_ci -webkit-user-select: none; 605fb726d48Sopenharmony_ci -moz-user-select: none; 606fb726d48Sopenharmony_ci -ms-user-select: none; 607fb726d48Sopenharmony_ci user-select: none; 608fb726d48Sopenharmony_ci } 609fb726d48Sopenharmony_ci 610fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers .line-numbers-rows > span { 611fb726d48Sopenharmony_ci pointer-events: none; 612fb726d48Sopenharmony_ci display: block; 613fb726d48Sopenharmony_ci counter-increment: linenumber; 614fb726d48Sopenharmony_ci } 615fb726d48Sopenharmony_ci 616fb726d48Sopenharmony_ci .smartperf-preview pre.line-numbers .line-numbers-rows > span:before { 617fb726d48Sopenharmony_ci content: counter(linenumber); 618fb726d48Sopenharmony_ci color: #999; 619fb726d48Sopenharmony_ci display: block; 620fb726d48Sopenharmony_ci padding-right: 0.79em; 621fb726d48Sopenharmony_ci text-align: right; 622fb726d48Sopenharmony_ci } 623fb726d48Sopenharmony_ci 624fb726d48Sopenharmony_ci .smartperf-preview .mathjax-exps .MathJax_Display { 625fb726d48Sopenharmony_ci text-align: center !important; 626fb726d48Sopenharmony_ci } 627fb726d48Sopenharmony_ci 628fb726d48Sopenharmony_ci .smartperf-preview:not([for='preview']) .code-chunk .btn-group { 629fb726d48Sopenharmony_ci display: none; 630fb726d48Sopenharmony_ci } 631fb726d48Sopenharmony_ci 632fb726d48Sopenharmony_ci .smartperf-preview:not([for='preview']) .code-chunk .status { 633fb726d48Sopenharmony_ci display: none; 634fb726d48Sopenharmony_ci } 635fb726d48Sopenharmony_ci 636fb726d48Sopenharmony_ci .smartperf-preview:not([for='preview']) .code-chunk .output-div { 637fb726d48Sopenharmony_ci margin-bottom: 16px; 638fb726d48Sopenharmony_ci } 639fb726d48Sopenharmony_ci 640fb726d48Sopenharmony_ci .scrollbar-style::-webkit-scrollbar { 641fb726d48Sopenharmony_ci width: 8px; 642fb726d48Sopenharmony_ci } 643fb726d48Sopenharmony_ci 644fb726d48Sopenharmony_ci .scrollbar-style::-webkit-scrollbar-track { 645fb726d48Sopenharmony_ci border-radius: 9px; 646fb726d48Sopenharmony_ci background-color: transparent; 647fb726d48Sopenharmony_ci } 648fb726d48Sopenharmony_ci 649fb726d48Sopenharmony_ci .scrollbar-style::-webkit-scrollbar-thumb { 650fb726d48Sopenharmony_ci border-radius: 6px; 651fb726d48Sopenharmony_ci background-color: rgba(150, 150, 150, 1); 652fb726d48Sopenharmony_ci border: 4px solid rgba(150, 150, 150, 1); 653fb726d48Sopenharmony_ci background-clip: content-box; 654fb726d48Sopenharmony_ci } 655fb726d48Sopenharmony_ci 656fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) { 657fb726d48Sopenharmony_ci position: relative; 658fb726d48Sopenharmony_ci width: 99%; 659fb726d48Sopenharmony_ci height: 99%;; 660fb726d48Sopenharmony_ci overflow: auto; 661fb726d48Sopenharmony_ci } 662fb726d48Sopenharmony_ci 663fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 664fb726d48Sopenharmony_ci position: relative; 665fb726d48Sopenharmony_ci top: 1px; 666fb726d48Sopenharmony_ci } 667fb726d48Sopenharmony_ci 668fb726d48Sopenharmony_ci @media screen and (min-width: 914px) { 669fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 670fb726d48Sopenharmony_ci padding: 2em; 671fb726d48Sopenharmony_ci } 672fb726d48Sopenharmony_ci } 673fb726d48Sopenharmony_ci 674fb726d48Sopenharmony_ci @media screen and (max-width: 914px) { 675fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 676fb726d48Sopenharmony_ci padding: 1.9em; 677fb726d48Sopenharmony_ci } 678fb726d48Sopenharmony_ci } 679fb726d48Sopenharmony_ci 680fb726d48Sopenharmony_ci @media screen and (max-width: 450px) { 681fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) .smartperf-preview { 682fb726d48Sopenharmony_ci font-size: 15px !important; 683fb726d48Sopenharmony_ci padding: 1.1em; 684fb726d48Sopenharmony_ci } 685fb726d48Sopenharmony_ci } 686fb726d48Sopenharmony_ci 687fb726d48Sopenharmony_ci @media print { 688fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) #sidebar-toc-btn { 689fb726d48Sopenharmony_ci display: none; 690fb726d48Sopenharmony_ci } 691fb726d48Sopenharmony_ci } 692fb726d48Sopenharmony_ci 693fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]) #sidebar-toc-btn { 694fb726d48Sopenharmony_ci position: fixed; 695fb726d48Sopenharmony_ci bottom: 9px; 696fb726d48Sopenharmony_ci left: 9px; 697fb726d48Sopenharmony_ci font-size: 28px; 698fb726d48Sopenharmony_ci cursor: pointer; 699fb726d48Sopenharmony_ci color: inherit; 700fb726d48Sopenharmony_ci z-index: 99; 701fb726d48Sopenharmony_ci width: 31px; 702fb726d48Sopenharmony_ci text-align: center; 703fb726d48Sopenharmony_ci opacity: 0.5; 704fb726d48Sopenharmony_ci } 705fb726d48Sopenharmony_ci 706fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn { 707fb726d48Sopenharmony_ci opacity: 1; 708fb726d48Sopenharmony_ci } 709fb726d48Sopenharmony_ci 710fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc { 711fb726d48Sopenharmony_ci position: fixed; 712fb726d48Sopenharmony_ci top: 1px; 713fb726d48Sopenharmony_ci left: 1px; 714fb726d48Sopenharmony_ci width: 300px; 715fb726d48Sopenharmony_ci height: 99%; 716fb726d48Sopenharmony_ci padding: 32px 0 48px 0; 717fb726d48Sopenharmony_ci font-size: 14px; 718fb726d48Sopenharmony_ci box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33); 719fb726d48Sopenharmony_ci box-sizing: border-box; 720fb726d48Sopenharmony_ci overflow: auto; 721fb726d48Sopenharmony_ci background-color: inherit; 722fb726d48Sopenharmony_ci } 723fb726d48Sopenharmony_ci 724fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar { 725fb726d48Sopenharmony_ci width: 9px; 726fb726d48Sopenharmony_ci } 727fb726d48Sopenharmony_ci 728fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track { 729fb726d48Sopenharmony_ci border-radius: 11px; 730fb726d48Sopenharmony_ci background-color: transparent; 731fb726d48Sopenharmony_ci } 732fb726d48Sopenharmony_ci 733fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb { 734fb726d48Sopenharmony_ci border-radius: 6px; 735fb726d48Sopenharmony_ci background-color: rgba(150, 150, 150, 0.66); 736fb726d48Sopenharmony_ci border: 3px solid rgba(150, 150, 150, 0.66); 737fb726d48Sopenharmony_ci background-clip: content-box; 738fb726d48Sopenharmony_ci } 739fb726d48Sopenharmony_ci 740fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a { 741fb726d48Sopenharmony_ci text-decoration: none; 742fb726d48Sopenharmony_ci } 743fb726d48Sopenharmony_ci 744fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul { 745fb726d48Sopenharmony_ci padding: 1px 1.7em; 746fb726d48Sopenharmony_ci margin-top: 0.9em; 747fb726d48Sopenharmony_ci } 748fb726d48Sopenharmony_ci 749fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li { 750fb726d48Sopenharmony_ci margin-bottom: 0.8em; 751fb726d48Sopenharmony_ci } 752fb726d48Sopenharmony_ci 753fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul { 754fb726d48Sopenharmony_ci list-style-type: none; 755fb726d48Sopenharmony_ci } 756fb726d48Sopenharmony_ci 757fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .smartperf-preview { 758fb726d48Sopenharmony_ci left: 301px; 759fb726d48Sopenharmony_ci width: calc(100% - 300px); 760fb726d48Sopenharmony_ci padding: 2em calc(50% - 457px - 150px); 761fb726d48Sopenharmony_ci margin: 1px; 762fb726d48Sopenharmony_ci box-sizing: border-box; 763fb726d48Sopenharmony_ci } 764fb726d48Sopenharmony_ci 765fb726d48Sopenharmony_ci @media screen and (max-width: 1274px) { 766fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .smartperf-preview { 767fb726d48Sopenharmony_ci padding: 1.9em; 768fb726d48Sopenharmony_ci } 769fb726d48Sopenharmony_ci } 770fb726d48Sopenharmony_ci 771fb726d48Sopenharmony_ci @media screen and (max-width: 450px) { 772fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm])[hsst] .smartperf-preview { 773fb726d48Sopenharmony_ci width: 99%; 774fb726d48Sopenharmony_ci } 775fb726d48Sopenharmony_ci } 776fb726d48Sopenharmony_ci 777fb726d48Sopenharmony_ci html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc { 778fb726d48Sopenharmony_ci display: none; 779fb726d48Sopenharmony_ci } 780fb726d48Sopenharmony_ci </style> 781fb726d48Sopenharmony_ci </head> 782fb726d48Sopenharmony_ci <body for="html-export" id="body" style="margin:0"> 783fb726d48Sopenharmony_ci <div class="smartperf smartperf-preview" style="min-height: 99vh;"> 784fb726d48Sopenharmony_ci <h1 class="mume-header fontColor">Js Memory抓取和展示说明</h1> 785fb726d48Sopenharmony_ci 786fb726d48Sopenharmony_ci <p class="fontColor">Js Memory是查看程序中存量内存的情况。</p> 787fb726d48Sopenharmony_ci <h2 class="mume-header fontColor">Js Memory的抓取</h2> 788fb726d48Sopenharmony_ci 789fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-1">Js Memory抓取配置参数</h3> 790fb726d48Sopenharmony_ci 791fb726d48Sopenharmony_ci <p class="fontColor"> 792fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/jsmemorysetting.jpg" alt="GitHub Logo" /> 793fb726d48Sopenharmony_ci <br /> 794fb726d48Sopenharmony_ci 配置参数说明： 795fb726d48Sopenharmony_ci </p> 796fb726d48Sopenharmony_ci <ul class="fontColor"> 797fb726d48Sopenharmony_ci <li>Process：设置抓取的进程ID，此处以1747进程号为例。</li> 798fb726d48Sopenharmony_ci <li>Heap snapshot：堆快照性能分析会显示网页的JavaScript对象和相关DOM节点中内存分配情况。</li> 799fb726d48Sopenharmony_ci <li>include numerical values in capture：在快照中添加数字。</li> 800fb726d48Sopenharmony_ci <li>Interval：抓取的时间间隔。</li> 801fb726d48Sopenharmony_ci <li>Allocation insteumentation on timeline：分配时间轴显示了插桩的JavaScript内存分配随时间变化的情况。</li> 802fb726d48Sopenharmony_ci <li> 803fb726d48Sopenharmony_ci record stack traces of allocations(extra performance overhead)：录制各项分配的堆栈轨迹(会产生额外的性能开销)。 804fb726d48Sopenharmony_ci </li> 805fb726d48Sopenharmony_ci </ul> 806fb726d48Sopenharmony_ci <p class="fontColor"> 807fb726d48Sopenharmony_ci 再点击Record setting，在output file path输入文件名hiprofiler_data_jsmemory.htrace，拖动滚动条设置buffer 808fb726d48Sopenharmony_ci size大小是64MB，抓取时长是30s。 809fb726d48Sopenharmony_ci <br /> 810fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/jsmemoryset.jpg" alt="GitHub Logo" /> 811fb726d48Sopenharmony_ci </p> 812fb726d48Sopenharmony_ci <p class="fontColor"> 813fb726d48Sopenharmony_ci 点击Trace command，就会根据上面的配置生成抓取命令，点击Record抓取，抓取过程中会显示抓取时长。 814fb726d48Sopenharmony_ci <br /> 815fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/jsmemoryrecord.jpg" alt="GitHub Logo" /> 816fb726d48Sopenharmony_ci </p> 817fb726d48Sopenharmony_ci <h2 class="mume-header fontColor">Js Memory展示说明</h2> 818fb726d48Sopenharmony_ci 819fb726d48Sopenharmony_ci <p class="fontColor">将抓取的jsmemory文件导入到smartperf工具中查看，查看程序中存量内存的情况。</p> 820fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-2">Js Memory泳道图展示类型</h3> 821fb726d48Sopenharmony_ci 822fb726d48Sopenharmony_ci <p class="fontColor"> 823fb726d48Sopenharmony_ci 堆快照类型文件的泳道图展示。 824fb726d48Sopenharmony_ci <br /> 825fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/jsnapshotChart.jpg" alt="GitHub Logo" /> 826fb726d48Sopenharmony_ci </p> 827fb726d48Sopenharmony_ci <ul class="fontColor"> 828fb726d48Sopenharmony_ci <li> 829fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 830fb726d48Sopenharmony_ciHeapsnapshot：堆快照性能分析会显示网页的JavaScript对象和相关DOM节点中内存分配情况。 831fb726d48Sopenharmony_ci</pre 832fb726d48Sopenharmony_ci > 833fb726d48Sopenharmony_ci </li> 834fb726d48Sopenharmony_ci </ul> 835fb726d48Sopenharmony_ci <p class="fontColor"> 836fb726d48Sopenharmony_ci 时间轴上分配插桩类型文件的泳道图展示。 837fb726d48Sopenharmony_ci <br /> 838fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/jstimelineChart.jpg" alt="GitHub Logo" /> 839fb726d48Sopenharmony_ci </p> 840fb726d48Sopenharmony_ci <ul class="fontColor"> 841fb726d48Sopenharmony_ci <li> 842fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 843fb726d48Sopenharmony_ciHeaptimeline：分配时间轴显示了插桩的JavaScript内存分配随时间变化的情况。 844fb726d48Sopenharmony_ci</pre 845fb726d48Sopenharmony_ci > 846fb726d48Sopenharmony_ci </li> 847fb726d48Sopenharmony_ci </ul> 848fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-3">Js Memory泳道图的框选功能</h3> 849fb726d48Sopenharmony_ci 850fb726d48Sopenharmony_ci <p class="fontColor"> 851fb726d48Sopenharmony_ci 可以对内存的数据进行框选，框选后在最下方的弹出层中会展示框选数据的统计表格，总共有两个tab页。 852fb726d48Sopenharmony_ci <br /> 853fb726d48Sopenharmony_ci Summary的Tab页，主要显示了总览视图，通过类的名称来分组显示对象。 854fb726d48Sopenharmony_ci <br /> 855fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/JsSummary.jpg" alt="GitHub Logo" /> 856fb726d48Sopenharmony_ci </p> 857fb726d48Sopenharmony_ci <ul class="fontColor"> 858fb726d48Sopenharmony_ci <li> 859fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 860fb726d48Sopenharmony_ciConstructor：类创建的所有对象，其中 861fb726d48Sopenharmony_ci 第一层为类名，后面的x表示该类创建了多少实例。 862fb726d48Sopenharmony_ci 第二层为该类的实例名+id，id唯一。 863fb726d48Sopenharmony_ci 第三层以下为实例中的成员变量。 864fb726d48Sopenharmony_ci</pre 865fb726d48Sopenharmony_ci > 866fb726d48Sopenharmony_ci </li> 867fb726d48Sopenharmony_ci <li> 868fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 869fb726d48Sopenharmony_ciDistance：使用节点的最短简单路径显示到根的距离。 870fb726d48Sopenharmony_ci</pre 871fb726d48Sopenharmony_ci > 872fb726d48Sopenharmony_ci <p class="fontColor"> 873fb726d48Sopenharmony_ci 例如下图其中GC 874fb726d48Sopenharmony_ci Root为根节点，distance为0,G为上次GC之后新申请内存的实例，distance为100000000。在界面上显示为-，A、B、C、D、E、F、H为调用节点；以E为例，从A->D->F>E,distance为4，从A->D->E，distance为3;从B->E,distance为2,遵循最小distance原则，E的distance为2,同理D的distance为2,F的distance为2,H的distance也为2。 875fb726d48Sopenharmony_ci </p> 876fb726d48Sopenharmony_ci <p class="fontColor"> 877fb726d48Sopenharmony_ci 其中第一层类的distance为该类所有实例中最小的distance,如果有实例的distance为-，类的distance也为-(-表示没有被root节点引用的实例，如下图的G) 878fb726d48Sopenharmony_ci <br /> 879fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/js_sample.png" alt="GitHub Logo" /> 880fb726d48Sopenharmony_ci </p> 881fb726d48Sopenharmony_ci </li> 882fb726d48Sopenharmony_ci <li> 883fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 884fb726d48Sopenharmony_ciShallowSize：是指实例自身占用的内存, 可以理解为保存该'数据结构'需要多少内存 885fb726d48Sopenharmony_ci 例如下面的代码： 886fb726d48Sopenharmony_ci</pre 887fb726d48Sopenharmony_ci > 888fb726d48Sopenharmony_ci </li> 889fb726d48Sopenharmony_ci </ul> 890fb726d48Sopenharmony_ci <pre data-role="codeBlock" data-info="javascript" class="fontColor light smartperf-javascript"> <span 891fb726d48Sopenharmony_ci class="token keyword keyword-class">class</span> <span class="token class-name">X</span> <span 892fb726d48Sopenharmony_ci class="token punctuation">{</span> 893fb726d48Sopenharmony_ci a<span class="token operator">:</span> number <span class="token operator">=</span> <span 894fb726d48Sopenharmony_ci class="token number">0</span><span class="token punctuation">;</span> 895fb726d48Sopenharmony_ci b<span class="token operator">:</span> boolean <span class="token operator">=</span> <span 896fb726d48Sopenharmony_ci class="token boolean">false</span><span class="token punctuation">;</span> 897fb726d48Sopenharmony_ci c<span class="token operator">:</span> <span class="token maybe-class-name">ChartStruct</span> <span 898fb726d48Sopenharmony_ci class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span 899fb726d48Sopenharmony_ci class="token class-name">ChartStruct</span><span class="token punctuation">(</span><span 900fb726d48Sopenharmony_ci class="token punctuation">)</span><span class="token punctuation">;</span> 901fb726d48Sopenharmony_ci <span class="token punctuation">}</span> 902fb726d48Sopenharmony_ci</pre> 903fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 904fb726d48Sopenharmony_ci 假设当前是在64位系统, 对于类X来说, 一个X实例的Shallow Size为: 905fb726d48Sopenharmony_ci 906fb726d48Sopenharmony_ci 类定义的8byte 907fb726d48Sopenharmony_ci 没有继承其他类, 所以没有父类fields 908fb726d48Sopenharmony_ci a,b变量为基本类型number,boolean型, js中都为8byte; 909fb726d48Sopenharmony_ci c变量是引用类型, 和它是否指向具体实例无关, 固定占4byte 910fb726d48Sopenharmony_ci</pre 911fb726d48Sopenharmony_ci > 912fb726d48Sopenharmony_ci <ul class="fontColor"> 913fb726d48Sopenharmony_ci <li> 914fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 915fb726d48Sopenharmony_ciRetainedSize：Retained Size含义为表示当一个实例被GC回收时, 可以同时被回收的实例的Shallow Size之和。 916fb726d48Sopenharmony_ci</pre 917fb726d48Sopenharmony_ci > 918fb726d48Sopenharmony_ci <ul class="fontColor"> 919fb726d48Sopenharmony_ci <li> 920fb726d48Sopenharmony_ci 如上图所示；假设所有的节点Size都为1,按照A->B->C的顺序回收。 921fb726d48Sopenharmony_ci <ul class="fontColor"> 922fb726d48Sopenharmony_ci <li> 923fb726d48Sopenharmony_ci 当A被回收时，H被D调用，先不回收，D没有被调用，D回收，由于D被回收，H没有被调用，H回收，由于F被C调用，E被B、F也调用了，所以不能被回收,此时A的Retained 924fb726d48Sopenharmony_ci Size为3,D的Retained Size为2, H的Retained Size为1。 925fb726d48Sopenharmony_ci </li> 926fb726d48Sopenharmony_ci <li>当B被回收时，由于E被F占用，所以E不会被回收，此时B的Retained Size为1。</li> 927fb726d48Sopenharmony_ci <li> 928fb726d48Sopenharmony_ci 当C被回收时，F没有被调用，E没有被调用,所以都会被回收，此时C的Retained Size为3，F的Retained Size为2, 929fb726d48Sopenharmony_ci E的Retained Size为1。 930fb726d48Sopenharmony_ci </li> 931fb726d48Sopenharmony_ci </ul> 932fb726d48Sopenharmony_ci </li> 933fb726d48Sopenharmony_ci </ul> 934fb726d48Sopenharmony_ci </li> 935fb726d48Sopenharmony_ci </ul> 936fb726d48Sopenharmony_ci <p class="fontColor"> 937fb726d48Sopenharmony_ci Comparison的Tab页，主要显示了比较视图，显示两份快照间的不同之处，主要比较类创建与释放的实例数量。 938fb726d48Sopenharmony_ci <br /> 939fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/JsComparison.jpg" alt="GitHub Logo" /> 940fb726d48Sopenharmony_ci </p> 941fb726d48Sopenharmony_ci <ul class="fontColor"> 942fb726d48Sopenharmony_ci <li> 943fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 944fb726d48Sopenharmony_ci#Constructor：类创建的所有对象，类名与id相同视为同一个实例，其中 945fb726d48Sopenharmony_ci 第一层为类的比较，每个时间点的对比其他时间点的类创建与销毁了哪些实例。 946fb726d48Sopenharmony_ci 第二层为实例，由于展示的是创建或者销毁实例，固只展示Size大小。 947fb726d48Sopenharmony_ci 第三层以下为实例的成员变量，不存在比较信息。 948fb726d48Sopenharmony_ci</pre 949fb726d48Sopenharmony_ci > 950fb726d48Sopenharmony_ci </li> 951fb726d48Sopenharmony_ci <li> 952fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 953fb726d48Sopenharmony_ci#New：新增的实例数量，圆点代表有意义的数据，下划线代表无意义的数据。 954fb726d48Sopenharmony_ci</pre 955fb726d48Sopenharmony_ci > 956fb726d48Sopenharmony_ci </li> 957fb726d48Sopenharmony_ci <li> 958fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 959fb726d48Sopenharmony_ci#Deleted：删除的实例数量。 960fb726d48Sopenharmony_ci</pre 961fb726d48Sopenharmony_ci > 962fb726d48Sopenharmony_ci </li> 963fb726d48Sopenharmony_ci <li> 964fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 965fb726d48Sopenharmony_ci#Delta：#New减去#Deleted的数量。 966fb726d48Sopenharmony_ci</pre 967fb726d48Sopenharmony_ci > 968fb726d48Sopenharmony_ci </li> 969fb726d48Sopenharmony_ci <li> 970fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 971fb726d48Sopenharmony_ciAlloc.Size：新增实例的Size。 972fb726d48Sopenharmony_ci</pre 973fb726d48Sopenharmony_ci > 974fb726d48Sopenharmony_ci </li> 975fb726d48Sopenharmony_ci <li> 976fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 977fb726d48Sopenharmony_ciFreed Size：删除实例的Size。 978fb726d48Sopenharmony_ci</pre 979fb726d48Sopenharmony_ci > 980fb726d48Sopenharmony_ci </li> 981fb726d48Sopenharmony_ci <li> 982fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 983fb726d48Sopenharmony_ciSize Delta：Delta的Size。 984fb726d48Sopenharmony_ci</pre 985fb726d48Sopenharmony_ci > 986fb726d48Sopenharmony_ci </li> 987fb726d48Sopenharmony_ci </ul> 988fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-4">Js Memory的辅助信息功能</h3> 989fb726d48Sopenharmony_ci 990fb726d48Sopenharmony_ci <p class="fontColor"> 991fb726d48Sopenharmony_ci 在Summary和Comparison的Tab页，选中左边实例，右边Retainers的Tab页会显示多少个实例引用了左边选中的实例。 992fb726d48Sopenharmony_ci <br /> 993fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/jsmemorycallstack.jpg" alt="GitHub Logo" /> 994fb726d48Sopenharmony_ci </p> 995fb726d48Sopenharmony_ci <ul class="fontColor"> 996fb726d48Sopenharmony_ci <li> 997fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 998fb726d48Sopenharmony_ciObject：引用的实例。 999fb726d48Sopenharmony_ci</pre 1000fb726d48Sopenharmony_ci > 1001fb726d48Sopenharmony_ci </li> 1002fb726d48Sopenharmony_ci <li> 1003fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 1004fb726d48Sopenharmony_ciDistance：使用节点的最短简单路径显示到根的距离。 1005fb726d48Sopenharmony_ci</pre 1006fb726d48Sopenharmony_ci > 1007fb726d48Sopenharmony_ci </li> 1008fb726d48Sopenharmony_ci <li> 1009fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 1010fb726d48Sopenharmony_ciShallowSize：所有对象的本身的内存大小之和。 1011fb726d48Sopenharmony_ci</pre 1012fb726d48Sopenharmony_ci > 1013fb726d48Sopenharmony_ci </li> 1014fb726d48Sopenharmony_ci <li> 1015fb726d48Sopenharmony_ci <pre class="smartperf-text fontColor light"> 1016fb726d48Sopenharmony_ciRetainedSize：对象以及其相关的对象一起被删除后所释放的内存大小，同一组对象之间的最大保留大小。 1017fb726d48Sopenharmony_ci</pre 1018fb726d48Sopenharmony_ci > 1019fb726d48Sopenharmony_ci </li> 1020fb726d48Sopenharmony_ci </ul> 1021fb726d48Sopenharmony_ci <h3 class="mume-header fontColor" id="header-index-5">Js Memory详细显示的过滤功能</h3> 1022fb726d48Sopenharmony_ci 1023fb726d48Sopenharmony_ci <p class="fontColor"> 1024fb726d48Sopenharmony_ci 在下方的Class Filter中输入类名，可以对类名进行过滤，如下图输入array，会过滤出类名是array的相关数据。 1025fb726d48Sopenharmony_ci <br /> 1026fb726d48Sopenharmony_ci <img src="../figures/Jsmemory/Jsmemoryfilter.jpg" alt="GitHub Logo" /> 1027fb726d48Sopenharmony_ci </p> 1028fb726d48Sopenharmony_ci </div> 1029fb726d48Sopenharmony_ci 1030fb726d48Sopenharmony_ci <script> 1031fb726d48Sopenharmony_ci window.onload = () => { 1032fb726d48Sopenharmony_ci let isDark = getURLParameter('dark'); 1033fb726d48Sopenharmony_ci let targetId = getURLParameter('targetId'); 1034fb726d48Sopenharmony_ci let isBack = getURLParameter('isBack'); 1035fb726d48Sopenharmony_ci if (isDark === 'true') { 1036fb726d48Sopenharmony_ci document.getElementById('body').setAttribute('style', 'background-color:#272C34;'); 1037fb726d48Sopenharmony_ci let header = document.getElementsByClassName('fontColor'); 1038fb726d48Sopenharmony_ci for (let i = 0; i < header.length; i++) { 1039fb726d48Sopenharmony_ci header[i].style.color = '#fff'; 1040fb726d48Sopenharmony_ci } 1041fb726d48Sopenharmony_ci let lightBackGround = document.getElementsByClassName('light'); 1042fb726d48Sopenharmony_ci for (let i = 0; i < lightBackGround.length; i++) { 1043fb726d48Sopenharmony_ci lightBackGround[i].style.backgroundColor = '#32373F'; 1044fb726d48Sopenharmony_ci } 1045fb726d48Sopenharmony_ci } 1046fb726d48Sopenharmony_ci function getURLParameter(name) { 1047fb726d48Sopenharmony_ci return (new URL(document.location)).searchParams.get(name); 1048fb726d48Sopenharmony_ci } 1049fb726d48Sopenharmony_ci 1050fb726d48Sopenharmony_ci if ( targetId !== null ) { 1051fb726d48Sopenharmony_ci let targetElement = document.getElementById(targetId); 1052fb726d48Sopenharmony_ci targetElement.scrollIntoView({ behavior: 'smooth' }); 1053fb726d48Sopenharmony_ci } 1054fb726d48Sopenharmony_ci }; 1055fb726d48Sopenharmony_ci </script> 1056fb726d48Sopenharmony_ci </body> 1057fb726d48Sopenharmony_ci</html> 1058
