Quelle  dhtml.html   Sprache: HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta charset="utf-8">
<head>
<title>accessibility perf for dhtml</title>
<script src="resource://talos-powers/TalosContentProfiler.js"></script>
<script>
  /* globals initAccessibility */
  // based on: http://hacks.mozilla.org/2010/05/better-performance-with-lazy-frame-construction/
  var ppDate = null;
  var startTime;

  function doInsertion() {
    if (!initAccessibility()) {
      dump("__FAILinit:AccessibilityUnvailable__FAIL");
      return;
    }

    TalosContentProfiler.subtestStart("a11y: Begin dhtml test", true).then(() => {
      var container = document.getElementById("container");
      var lastchild = document.getElementById("lastchild");

      startTime = window.performance.now();

      var i, div;
      for (i = 0; i < 2000; i++) {
        div = document.createElement("div");
        div.innerHTML = "<input type='text' value='a bc def g hijkl mn op qrs'/>";
        container.insertBefore(div, lastchild);
      }
      for (i = 0; i < 2000; i++) {
        div = document.createElement("div");
        div.innerHTML = "<ul><li>foo<ul><li>bar</li></ul></li><li>baz</li></ul>";
        container.insertBefore(div, lastchild);
      }
      for (i = 0; i < 2000; i++) {
        div = document.createElement("div");

        // eslint-disable-next-line no-unsanitized/property
        div.innerHTML = "<div role='progressbar'>progressbar</div>" +
                        "<span id='span" + i + "'>cb</span>";
        container.appendChild(div);
      }
      document.documentElement.offsetLeft; // flush layout
      setTimeout(postProcessingRecord, 0, startTime);
    });
  }

  function postProcessingRecord(start) {
    let delta = window.performance.now() - start;
    TalosContentProfiler.subtestEnd("a11y: dhtml test", true, startTime).then(() => {
      tpRecordTime(delta, window.performance.timing.navigationStart + start);
    });
  }
</script>
</head>
<body onload="doInsertion();">
  <div id="container" role="application"><div id="lastchild"></div></div>
</body>
</html>