| <!DOCTYPE HTML> |
| |
| <!-- |
| about:memory template page |
| --> |
| <html id="t"> |
| <head> |
| <title>About Memory</title> |
| <link rel="stylesheet" href="shared/css/about_memory.css"> |
| |
| <style> |
| body { |
| font-family: Arial, Helvetica, sans-serif; |
| } |
| div#header select { |
| font-family: Arial, Helvetica, sans-serif; |
| } |
| div.viewOptions input { |
| font-family: Arial, Helvetica, sans-serif; |
| } |
| div.otherbrowsers { |
| font-family: Arial, Helvetica, sans-serif; |
| } |
| table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(1), |
| table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(4), |
| table.list#browserComparison tr.firstRow th:nth-child(1) { |
| border-right: 1px solid #b5c6de; |
| } |
| table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(2), |
| table.list#memoryDetails tr:not([class*='firstRow']) > *:nth-child(5), |
| table.list#memoryDetails tr.firstRow th:nth-child(2) { |
| border-right: 1px solid #b5c6de; |
| } |
| </style> |
| <script> |
| function reload() { |
| if (document.getElementById('helpTooltip')) |
| return; |
| history.go(0); |
| } |
| |
| function formatNumber(str) { |
| str += ''; |
| if (str == '0') { |
| return 'N/A '; |
| } |
| var x = str.split('.'); |
| var x1 = x[0]; |
| var x2 = x.length > 1 ? '.' + x[1] : ''; |
| var regex = /(\d+)(\d{3})/; |
| while (regex.test(x1)) { |
| x1 = x1.replace(regex, '$1' + ',' + '$2'); |
| } |
| return x1; |
| } |
| |
| function addToSum(id, value) { |
| var target = document.getElementById(id); |
| var sum = parseInt(target.innerHTML); |
| sum += parseInt(value); |
| target.innerHTML = sum; |
| } |
| |
| function handleHelpTooltipMouseOver(event) { |
| var el = document.createElement('div'); |
| el.id = 'helpTooltip'; |
| el.innerHTML = event.toElement.getElementsByTagName('div')[0].innerHTML; |
| el.style.top = 0; |
| el.style.left = 0; |
| el.style.visibility = 'hidden'; |
| document.body.appendChild(el); |
| |
| var width = el.offsetWidth; |
| var height = el.offsetHeight; |
| |
| if (event.pageX - width - 50 + document.body.scrollLeft >= 0 ) { |
| el.style.left = (event.pageX - width - 20) + 'px'; |
| } else { |
| el.style.left = (event.pageX + 20) + 'px'; |
| } |
| |
| |
| if (event.pageY - height - 50 + document.body.scrollTop >= 0) { |
| el.style.top = (event.pageY - height - 20) + 'px'; |
| } else { |
| el.style.top = (event.pageY + 20) + 'px'; |
| } |
| |
| el.style.visibility = 'visible'; |
| } |
| |
| function handleHelpTooltipMouseOut(event) { |
| var el = document.getElementById('helpTooltip'); |
| el.parentNode.removeChild(el); |
| } |
| |
| function enableHelpTooltips() { |
| var helpEls = document.getElementsByClassName('help'); |
| |
| for (var i = 0, helpEl; helpEl = helpEls[i]; i++) { |
| helpEl.onmouseover = handleHelpTooltipMouseOver; |
| helpEl.onmouseout = handleHelpTooltipMouseOut; |
| } |
| } |
| |
| //setInterval("reload()", 10000); |
| </script> |
| </head> |
| <body> |
| <div id='header'> |
| <h1> |
| About memory |
| </h1> |
| <p> |
| Measuring memory usage in a multi-process browser |
| </p> |
| </div> |
| |
| <div id='content'> |
| <h2> |
| Summary |
| <div class='help'> |
| <div> |
| <p> |
| Summary of memory used by currently active browsers. |
| For browsers which use multiple processes, memory reflects |
| aggregate memory used across all browser processes.<p> |
| For Chromium, processes used to to display diagnostics |
| information (such as this "about:memory") are excluded. |
| </p> |
| </div> |
| </div> |
| </h2> |
| |
| <table class='list' id='browserComparison'> |
| <colgroup> |
| <col class='name' /> |
| <col class='number' /> |
| <col class='number' /> |
| </colgroup> |
| <tr class='firstRow doNotFilter'> |
| <th> |
| </th> |
| <th colspan='2'> |
| Memory |
| <div class='help'> |
| <div> |
| <p> |
| <strong>Memory</strong> |
| </p> |
| <p> |
| <strong>Private:</strong> |
| Resident memory size that is not shared with any other process. |
| This is the best indicator of browser memory resource usage. |
| </p> |
| <p> |
| <strong>Proportional:</strong> |
| Accounts for each page of memory as a fraction based on the number of |
| processes that have it mapped. Thus, for each page of memory mapped by two |
| processes, this sum will count half of the bytes towards each. |
| Therefore, this number is greater than the private count. |
| </p> |
| |
| <p><i>(Note that the memory for this tab is not included in the browser totals)</i></p> |
| </div> |
| </div> |
| </th> |
| </tr> |
| <tr class='secondRow doNotFilter'> |
| <th class='name'> |
| Browser |
| </th> |
| <th class='name'> |
| Private |
| </th> |
| <th class='number'> |
| Proportional |
| </th> |
| </tr> |
| <tr jsselect="browsers"> |
| <td class='name'> |
| <div> |
| <strong jscontent="name"></strong> <span jscontent="version"></span> |
| </div> |
| </td> |
| <td class='number'> |
| <span class='th' jscontent="formatNumber(ws_priv)"></span><span class='k'>k</span> |
| </td> |
| <td class='number'> |
| <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span> |
| </td> |
| </tr> |
| </table> |
| <div class=otherbrowsers jsdisplay="show_other_browsers && browsers.length == 1"> |
| Note: If other browsers (e.g. IE, Firefox, Safari) are running, |
| I'll show their memory details here. |
| </div> |
| |
| <br /><br /><br /> |
| |
| <h2> |
| Processes |
| <div class='help'> |
| <div> |
| <p> |
| Details of memory usage for each of Chromium's processes. |
| </p> |
| </div> |
| </div> |
| </h2> |
| |
| <table class='list' id='memoryDetails'> |
| <colgroup> |
| <col class='pid' /> |
| <col class='name' /> |
| <col class='number' /> |
| <col class='number' /> |
| </colgroup> |
| <tr class='firstRow doNotFilter'> |
| <th> |
| </th> |
| <th> |
| </th> |
| <th colspan='2'> |
| Memory |
| </th> |
| </tr> |
| <tr class='secondRow doNotFilter'> |
| <th class='pid'> |
| PID |
| </th> |
| <th class='name'> |
| Name |
| </th> |
| <th class='number'> |
| Private |
| </th> |
| <th class='number'> |
| Proportional |
| </th> |
| </tr> |
| |
| <tr jsselect="browzr_data"> |
| <td class='pid'> |
| <span class='th' jscontent="pid"></span> |
| </td> |
| <td class='name'> |
| <div> |
| Browser |
| </div> |
| </td> |
| <td class='number'> |
| <span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv)" jscontent="formatNumber(ws_priv)"></span><span class='k'>k</span> |
| </td> |
| <td class='number'> |
| <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span> |
| </td> |
| </tr> |
| <tr jsselect="child_data"> |
| <td class='pid'> |
| <span class='th' jscontent="pid"></span> |
| </td> |
| <td class='name'> |
| <div jscontent="child_name"></div> |
| <div jsselect="titles"> |
| <span jscontent="$this"></span><br> |
| </div> |
| </td> |
| <td class='number'> |
| <span class='th' jseval="addToSum('tot_ws_priv', $this.ws_priv)" jscontent="formatNumber(ws_priv)"></span><span class='k'>k</span> |
| </td> |
| <td class='number'> |
| <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span> |
| </td> |
| </tr> |
| <tr class='total doNotFilter'> |
| <td class='pid'> |
| </td> |
| <td class='name'> |
| Σ |
| </td> |
| <td class='number'> |
| <span class='th' id="tot_ws_priv">0</span><span class='k'>k</span> |
| </td> |
| <td class='number'> |
| </td> |
| </tr> |
| |
| <tr class='noResults'> |
| <td colspan='99'> |
| No results found. |
| </td> |
| </tr> |
| </table> |
| |
| <div class="otherbrowsers">(The memory usage of our renderer processes is slightly less accurate when they are sandboxed.)</div> |
| |
| </div> |
| </body> |
| <script> |
| enableHelpTooltips(); |
| </script> |
| </html> |
