floats.html

   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>