v6b: Batch adding to container => 80K balls

In version 6 (or 6a), we show balls by attaching them to container node one by one, might results in continuous forced reflow (if CSS is more complex).
In version 6b, we use a temporary DocumentFragment node to store those balls, then add them to container all at once.
The result is not much better. So we need to find another way to improve version 6.

Author: DancingPhoenix88

index.html

@@ -231,17 +231,21 @@
       for (var m = 0; m < MOVERS_COUNT; m++) {
         if (isInViewport(tops[m], scrollY)) {
           movers[m].style.left = topToLeft(tops[m], timestamp) + 'px';
-          if (isHidden(m)) showImmediately(m);
-        } else if (m != MOVERS_COUNT - 1) { // never hide the last mover to keep page size{
+          // if (isHidden(m)) showImmediately(m); // 6a
+          if (isHidden(m)) requestShow(m); // 6b
+        } else if (m != MOVERS_COUNT - 1) { // never hide the last mover to keep page size
           if (isVisible(m)) hide(m);
         }
       }
+      processShowRequests(); // 6b
 
       if (window.running) rAF(updateFunc);
       // FIX: Not every balls need to check 'isInViewport'
     }
     //----------------------------------------------------------------------------------------------
     function showImmediately (m)    { container.appendChild(movers[m]);         }
+    function requestShow (m)        { batchNodeShow.appendChild(movers[m]);     }
+    function processShowRequests () { container.appendChild(batchNodeShow);     }
     function hide (m)               { hidden.appendChild(movers[m]);            }
     function isHidden (m)           { return movers[m].parentNode == hidden;    }
     function isVisible (m)          { return movers[m].parentNode == container; }