Html程序  |  335行  |  9.31 KB

<!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: Helvetica, sans-serif;
}
div#header select {
  font-family: Helvetica, sans-serif;
}
div.viewOptions input {
  font-family: Helvetica, sans-serif;
}
div.otherbrowsers {
  font-family: Helvetica, sans-serif;
}
table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(1),
table.list#browserComparison tr:not([class*='firstRow']) > *:nth-child(6),
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(7),
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.<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' />
          <col class='number' />
          <col class='number' />
        </colgroup>
        <tr class='firstRow doNotFilter'>
          <th>
          </th>
          <th colspan='4'>
            Memory
            <div class='help'>
              <div>
                <p>
                  <strong>Memory</strong>
                </p>
                <p>
                  <strong>Resident:</strong>
                  Amount of memory that is present in physical RAM.
                  This is the best indicator of browser memory resource usage.
                </p>
                <p>
                  <strong>Shared:</strong>
                  Amount of memory that is present in physical RAM and can
                  be shared with another process.
                </p>
                <p>
                  <strong>Private:</strong>
                  Amount of memory that is present in physical RAM and can not
                  be shared with another process.
                </p>
                <p>
                  <strong>Virtual:</strong>
                  Amount of address space allocated in virtual memory.
                </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='number'>
            Resident
          </th>
          <th class='number'>
            Shared
          </th>
          <th class='number'>
            Private
          </th>
          <th class='number'>
            Virtual
          </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_shareable)"></span><span class='k'>k</span>
          </td>
          <td class='number'>
            <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span>
          </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(comm_priv)"></span><span class='k'>k</span>
          </td>
        </tr>
      </table>
      <div class=otherbrowsers jsdisplay="browsers.length == 1">
        Note: If other browsers (e.g., Safari, Firefox, Camino) are running, I'll show their memory details here.
      </div>
      <div class="otherbrowsers">
        (Bug: We seriously overcount our own memory usage: <a href="http://crbug.com/25454">Issue 25454</a>.)
      </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' />
          <col class='number' />
          <col class='number' />
        </colgroup>
        <tr class='firstRow doNotFilter'>
          <th>
          </th>
          <th>
          </th>
          <th colspan='4'>
            Memory
          </th>
        </tr>
        <tr class='secondRow doNotFilter'>
          <th class='pid'>
            PID
          </th>
          <th class='name'>
            Name
          </th>
          <th class='number'>
            Resident
          </th>
          <th class='number'>
            Shared
          </th>
          <th class='number'>
            Private
          </th>
          <th class='number'>
            Virtual
          </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' jscontent="formatNumber(ws_shareable)"></span><span class='k'>k</span>
          </td>
          <td class='number'>
            <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span>
          </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(comm_priv)"></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' jscontent="formatNumber(ws_shareable)"></span><span class='k'>k</span>
          </td>
          <td class='number'>
            <span class='th' jscontent="formatNumber(ws_shared)"></span><span class='k'>k</span>
          </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(comm_priv)"></span><span class='k'>k</span>
          </td>
        </tr>

        <tr class='noResults'>
          <td colspan='99'>
            No results found.
          </td>
        </tr>
      </table>
      <div class="otherbrowsers">
        (Note: Due to memory sharing between processes, summing memory usage does not give total memory usage.)
      </div>
    </div>
</body>
<script>
  enableHelpTooltips();
</script>
</html>