Source code
Revision control
Copy as Markdown
Other Tools
<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);
}
function startTest() {
start = performance.now();
window.requestAnimationFrame(runFrame);
}
addEventListener("load", function() {
if (window.TalosContentProfiler) {
TalosContentProfiler.subtestStart("displaylist_mutate.html loaded", true).then(startTest);
} else {
startTest();
}
});
</script>
</html>