Source code

Revision control

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
<html>
<head>
<style>
  div {
    width:10px;
    height:10px;
    background-color:green;
    display: inline-block;
  }
</style>
</head>
<body id="body">
</body>
<script>

var start = null;
var divCount = 10000;
var maxIterations = 600;

// ensure contentful paint occurs
document.body.innerHTML = "DisplayList mutate";

for (var i = 0; i < divCount; i++) {
  var div = document.createElement("div");
  div.id = i;
  document.getElementById("body").appendChild(div);
}

var iteration = 0;
function runFrame() {
  if (document.getElementById(iteration).style.backgroundColor == "red") {
    document.getElementById(iteration).style.backgroundColor = "green";
  } else {
    document.getElementById(iteration).style.backgroundColor = "red";
  }
  iteration++;
  iteration = iteration % divCount;
  if (--maxIterations == 0) {
    var end = performance.now();
    if (window.tpRecordTime) {
      window.tpRecordTime(end - start, start);
    }
    return;
  }

  window.requestAnimationFrame(runFrame);
}

addEventListener("load", function() {
  TalosContentProfiler.resume("displaylist_mutate.html loaded", true).then(() => {
    start = performance.now();
    window.requestAnimationFrame(runFrame);
  });
});

</script>
<script type="text/javascript" src="resource://talos-powers/TalosContentProfiler.js"></script>
</html>