1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Floats layout performance tester</title>
5 <style>
6 .float {
7 float: left;
8 width: 5px;
9 height: 5px;
10 border: 1px solid green;
11 }
12 .big {
13 width: 10px;
14 }
15 .float-end {
16 clear:left;
17 }
18
19 #framerate_panel {
20 display: none;
21 }
22 </style>
23 <script>
24 function createElement(tag, parent, className, id)
25 {
26 var el = document.createElement(tag);
27 el.className = className;
28 el.id = id;
29 parent.appendChild(el);
30 return el;
31 }
32
33 function createSet(width, height, nested)
34 {
35 var container = createElement("div", document.body, "container");
36 for (var y = 0; y < height; ++y) {
37 for (var x = 0; x < width; ++x)
38 createElement("div", container, "float", "float" + x + "_" + y);
39
40 var nestedContainer = container;
41 for ( ; nested > 0; --nested)
42 nestedContainer = createElement("div", nestedContainer, "nested", "nested" + x + "_" + nested);
43
44 createElement("div", container, "float-end", "end" + x)
45 }
46 }
47
48 function toggle(str, str1, str2)
49 {
50 if (str == str1)
51 return str2;
52 return str1;
53 }
54
55 function test(width, height, nested)
56 {
57 nested = nested || 0;
58
59 document.getElementById("test_panel").style.display = "none";
60 document.getElementById("framerate_panel").style.display = "block";
61
62 createSet(width, height, nested);
63 var updates = 0;
64 var startTime = new Date();
65
66 function updateTimer()
67 {
68 ++updates;
69
70 var newTime = new Date();
71 var deltaTime = newTime - startTime;
72
73 if ((deltaTime > 0 && updates > 100) || deltaTime > 1000) {
74 var fps = updates * 100 / deltaTime;
75 document.getElementById("fps").innerHTML = fps;
76 updates = 0;
77 startTime = newTime;
78 }
79 }
80
81 function update()
82 {
83 var x = Math.floor(Math.random() * width);
84 var y = Math.floor(Math.random() * height);
85 var el = document.getElementById("float" + x + "_" + y);
86 el.className = toggle(el.className, "float", "float big");
87 updateTimer();
88 }
89 setInterval(update, 0);
90 }
91 </script>
92 </head>
93 <body>
94 <div id="framerate_panel">Framerate: <span id="fps">calculating...</span> fps</div>
95 <div id="test_panel">
96 <p>Choose the size of the test:</p>
97 <button onclick="test(2, 100)">2 by 100</button>
98 <button onclick="test(20, 100)">20 by 100</button>
99 <button onclick="test(50, 100)">50 by 100</button>
100 <button onclick="test(100, 100)">100 by 100</button>
101 <p>Nested divs:</p>
102 <button onclick="test(2, 100, 100)">2 by 100, 100 nested</button>
103 <button onclick="test(20, 100, 100)">20 by 100, 100 nested</button>
104 <button onclick="test(50, 100, 100)">50 by 100, 100 nested</button>
105 <button onclick="test(100, 100, 100)">100 by 100, 100 nested</button>
106 </div>
107 </body>
108 </html>