1 <!DOCTYPE HTML> 2 3 <!-- 4 about:memory template page 5 --> 6 <html id="t"> 7 <head> 8 <title>About Memory</title> 9 <link rel="stylesheet" href="shared/css/about_memory.css"> 10 11 <style> 12 body { 13 font-family: Arial, Helvetica, sans-serif; 14 } 15 div#header select { 16 font-family: Arial, Helvetica, sans-serif; 17 } 18 div.viewOptions input { 19 font-family: Arial, Helvetica, sans-serif; 20 } 21 div.otherbrowsers { 22 font-family: Arial, Helvetica, sans-serif; 23 } 24 table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(1), 25 table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(4), 26 table.list#browserComparison tr.firstRow th:nth-child(1) { 27 border-right: 1px solid #b5c6de; 28 } 29 table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(2), 30 table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(5), 31 table.list#memoryDetails tr.firstRow th:nth-child(2) { 32 border-right: 1px solid #b5c6de; 33 } 34 </style> 35 <script> 36 function reload() { 37 if (document.getElementById('helpTooltip')) 38 return; 39 history.go(0); 40 } 41 42 function formatNumber(str) { 43 str += ''; 44 if (str == '0') { 45 return 'N/A '; 46 } 47 var x = str.split('.'); 48 var x1 = x[0]; 49 var x2 = x.length > 1 ? '.' + x[1] : ''; 50 var regex = /(\d+)(\d{3})/; 51 while (regex.test(x1)) { 52 x1 = x1.replace(regex, '$1' + ',' + '$2'); 53 } 54 return x1; 55 } 56 57 function addToSum(id, value) { 58 var target = document.getElementById(id); 59 var sum = parseInt(target.innerHTML); 60 sum += parseInt(value); 61 target.innerHTML = sum; 62 } 63 64 function handleHelpTooltipMouseOver(event) { 65 var el = document.createElement('div'); 66 el.id = 'helpTooltip'; 67 el.innerHTML = event.toElement.getElementsByTagName('div')[0].innerHTML; 68 el.style.top = 0; 69 el.style.left = 0; 70 el.style.visibility = 'hidden'; 71 document.body.appendChild(el); 72 73 var width = el.offsetWidth; 74 var height = el.offsetHeight; 75 76 if (event.pageX - width - 50 + document.body.scrollLeft >= 0 ) { 77 el.style.left = (event.pageX - width - 20) + 'px'; 78 } else { 79 el.style.left = (event.pageX + 20) + 'px'; 80 } 81 82 83 if (event.pageY - height - 50 + document.body.scrollTop >= 0) { 84 el.style.top = (event.pageY - height - 20) + 'px'; 85 } else { 86 el.style.top = (event.pageY + 20) + 'px'; 87 } 88 89 el.style.visibility = 'visible'; 90 } 91 92 function handleHelpTooltipMouseOut(event) { 93 var el = document.getElementById('helpTooltip'); 94 el.parentNode.removeChild(el); 95 } 96 97 function enableHelpTooltips() { 98 var helpEls = document.getElementsByClassName('help'); 99 100 for (var i = 0, helpEl; helpEl = helpEls[i]; i++) { 101 helpEl.onmouseover = handleHelpTooltipMouseOver; 102 helpEl.onmouseout = handleHelpTooltipMouseOut; 103 } 104 } 105 106 //setInterval("reload()", 10000); 107 </script> 108 </head> 109 <body> 110 <div id='header'> 111 <h1> 112 About memory 113 </h1> 114 <p> 115 Measuring memory usage in a multi-process browser 116 </p> 117 </div> 118 119 <div id='content'> 120 <h2> 121 Summary 122 <div class='help'> 123 <div> 124 <p> 125 Summary of memory used by currently active browsers. 126 For browsers which use multiple processes, memory reflects 127 aggregate memory used across all browser processes.<p> 128 For Chromium, processes used to to display diagnostics 129 information (such as this "about:memory") are excluded. 130 </p> 131 </div> 132 </div> 133 </h2> 134 135 <table class='list' id='browserComparison'> 136 <colgroup> 137 <col class='name' /> 138 <col class='number' /> 139 <col class='number' /> 140 </colgroup> 141 <tr class='firstRow doNotFilter'> 142 <th> 143 </th> 144 <th colspan='2'> 145 Memory 146 <div class='help'> 147 <div> 148 <p> 149 <strong>Memory</strong> 150 </p> 151 <p> 152 <strong>Private:</strong> 153 Resident memory size that is not shared with any other process. 154 This is the best indicator of browser memory resource usage. 155 </p> 156 <p> 157 <strong>Proportional:</strong> 158 Accounts for each page of memory as a fraction based on the number of 159 processes that have it mapped. Thus, for each page of memory mapped by two 160 processes, this sum will count half of the bytes towards each. 161 Therefore, this number is greater than the private count. 162 </p> 163 164 <p><i>(Note that the memory for this tab is not included in the browser totals)</i></p> 165 </div> 166 </div> 167 </th> 168 </tr> 169 <tr class='secondRow doNotFilter'> 170 <th class='name'> 171 Browser 172 </th> 173 <th class='name'> 174 Private 175 </th> 176 <th class='number'> 177 Proportional 178 </th> 179 </tr> 180 <tr jsselect="browsers"> 181 <td class='name'> 182 <div> 183 <strong jscontent="name"></strong> <span jscontent="version"></span> 184 </div> 185 </td> 186 <td class='number'> 187 <span class='th' jscontent="formatNumber(ws_priv)"></span><span class='k'>k</span> 188 </td> 189 <td class='number'> 190 <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span> 191 </td> 192 </tr> 193 </table> 194 <div class=otherbrowsers jsdisplay="show_other_browsers && browsers.length == 1"> 195 Note: If other browsers (e.g. IE, Firefox, Safari) are running, 196 I'll show their memory details here. 197 </div> 198 199 <br /><br /><br /> 200 201 <h2> 202 Processes 203 <div class='help'> 204 <div> 205 <p> 206 Details of memory usage for each of Chromium's processes. 207 </p> 208 </div> 209 </div> 210 </h2> 211 212 <table class='list' id='memoryDetails'> 213 <colgroup> 214 <col class='pid' /> 215 <col class='name' /> 216 <col class='number' /> 217 <col class='number' /> 218 </colgroup> 219 <tr class='firstRow doNotFilter'> 220 <th> 221 </th> 222 <th> 223 </th> 224 <th colspan='2'> 225 Memory 226 </th> 227 </tr> 228 <tr class='secondRow doNotFilter'> 229 <th class='pid'> 230 PID 231 </th> 232 <th class='name'> 233 Name 234 </th> 235 <th class='number'> 236 Private 237 </th> 238 <th class='number'> 239 Proportional 240 </th> 241 </tr> 242 243 <tr jsselect="browzr_data"> 244 <td class='pid'> 245 <span class='th' jscontent="pid"></span> 246 </td> 247 <td class='name'> 248 <div> 249 Browser 250 </div> 251 </td> 252 <td class='number'> 253 <span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv)" jscontent="formatNumber(ws_priv)"></span><span class='k'>k</span> 254 </td> 255 <td class='number'> 256 <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span> 257 </td> 258 </tr> 259 <tr jsselect="child_data"> 260 <td class='pid'> 261 <span class='th' jscontent="pid"></span> 262 </td> 263 <td class='name'> 264 <div jscontent="child_name"></div> 265 <div jsselect="titles"> 266 <span jscontent="$this"></span><br> 267 </div> 268 </td> 269 <td class='number'> 270 <span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv)" jscontent="formatNumber(ws_priv)"></span><span class='k'>k</span> 271 </td> 272 <td class='number'> 273 <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span> 274 </td> 275 </tr> 276 <tr class='total doNotFilter'> 277 <td class='pid'> 278 </td> 279 <td class='name'> 280 Σ 281 </td> 282 <td class='number'> 283 <span class='th' id="tot_ws_priv">0</span><span class='k'>k</span> 284 </td> 285 <td class='number'> 286 </td> 287 </tr> 288 289 <tr class='noResults'> 290 <td colspan='99'> 291 No results found. 292 </td> 293 </tr> 294 </table> 295 296 <div class="otherbrowsers">(The memory usage of our renderer processes is slightly less accurate when they are sandboxed.)</div> 297 298 </div> 299 </body> 300 <script> 301 enableHelpTooltips(); 302 </script> 303 </html> 304
