Source code

Revision control

Other Tools

1
<html>
2
<head>
3
<style>
4
div {
5
width:10px;
6
height:10px;
7
background-color:green;
8
display: inline-block;
9
}
10
</style>
11
</head>
12
<body id="body">
13
</body>
14
<script>
15
16
var start = null;
17
var divCount = 10000;
18
var maxIterations = 600;
19
20
// ensure contentful paint occurs
21
document.body.innerHTML = "DisplayList mutate";
22
23
for (var i = 0; i < divCount; i++) {
24
var div = document.createElement("div");
25
div.id = i;
26
document.getElementById("body").appendChild(div);
27
}
28
29
var iteration = 0;
30
function runFrame() {
31
if (document.getElementById(iteration).style.backgroundColor == "red") {
32
document.getElementById(iteration).style.backgroundColor = "green";
33
} else {
34
document.getElementById(iteration).style.backgroundColor = "red";
35
}
36
iteration++;
37
iteration = iteration % divCount;
38
if (--maxIterations == 0) {
39
var end = performance.now();
40
if (window.tpRecordTime) {
41
window.tpRecordTime(end - start, start);
42
}
43
return;
44
}
45
46
window.requestAnimationFrame(runFrame);
47
}
48
49
addEventListener("load", function() {
50
TalosContentProfiler.resume("displaylist_mutate.html loaded", true).then(() => {
51
start = performance.now();
52
window.requestAnimationFrame(runFrame);
53
});
54
});
55
56
</script>
57
<script type="text/javascript" src="resource://talos-powers/TalosContentProfiler.js"></script>
58
</html>