avoid web browser layout trashing when the dashboard is loaded; gained 500ms to 1000m...

diff --git a/web/dashboard.js b/web/dashboard.js
index 0aa4529aa0b3625332f7083669874d84aa3d19d0..5210b8f63a2a32fb6c4be520837e3eb426423183 100644 (file)
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -1160,6 +1160,35 @@ var NETDATA = window.NETDATA || {};
         }
     };
 
+    // ----------------------------------------------------------------------------------------------------------------
+    // http://wilsonpage.co.uk/preventing-layout-thrashing/
+
+    NETDATA.noLayoutTrashing = {
+        set: false,
+        callbacks: [],
+
+        add: function(callback) {
+            // console.log('adding...');
+            this.callbacks.push(callback);
+
+            if(this.set === false) {
+                this.set = true;
+                var that = this;
+
+                window.requestAnimationFrame(function() {
+                    var len = that.callbacks.length;
+                    // console.log('running... ' + len.toString());
+                    while(len--) {
+                        that.callbacks[len]();
+                    }
+
+                    that.callbacks = new Array();
+                    that.set = false;
+                });
+            }
+        }
+    };
+
     // ----------------------------------------------------------------------------------------------------------------
     // Our state object, where all per-chart values are stored
 
@@ -1469,8 +1498,11 @@ var NETDATA = window.NETDATA || {};
         };
 
         var maxMessageFontSize = function() {
+            var screenHeight = screen.height;
+            var el = that.element_message;
+
             // normally we want a font size, as tall as the element
-            var h = that.element_message.clientHeight;
+            var h = el.clientHeight;
 
             // but give it some air, 20% let's say, or 5 pixels min
             var lost = Math.max(h * 0.2, 5);
@@ -1481,7 +1513,7 @@ var NETDATA = window.NETDATA || {};
 
             // but check the width too
             // it should fit 10 characters in it
-            var w = that.element_message.clientWidth / 10;
+            var w = el.clientWidth / 10;
             if(h > w) {
                 paddingTop += (h - w) / 2;
                 h = w;
@@ -1489,14 +1521,14 @@ var NETDATA = window.NETDATA || {};
 
             // and don't make it too huge
             // 5% of the screen size is good
-            if(h > screen.height / 20) {
-                paddingTop += (h - (screen.height / 20)) / 2;
-                h = screen.height / 20;
+            if(h > screenHeight / 20) {
+                paddingTop += (h - (screenHeight / 20)) / 2;
+                h = screenHeight / 20;
             }
 
             // set it
-            that.element_message.style.fontSize = h.toString() + 'px';
-            that.element_message.style.paddingTop = paddingTop.toString() + 'px';
+            el.style.fontSize = h.toString() + 'px';
+            el.style.paddingTop = paddingTop.toString() + 'px';
         };
 
         var showMessage = function(msg) {
@@ -1508,10 +1540,12 @@ var NETDATA = window.NETDATA || {};
         };
 
         var showMessageIcon = function(icon) {
-            that.element_message.innerHTML = icon;
-            that.element_message.className = 'netdata-message icon';
-            maxMessageFontSize();
-            that.___messageHidden___ = undefined;
+            NETDATA.noLayoutTrashing.add(function() {
+                that.element_message.innerHTML = icon;
+                that.element_message.className = 'netdata-message icon';
+                maxMessageFontSize();
+                that.___messageHidden___ = undefined;
+            });
         };
 
         var hideMessage = function() {

diff --git a/web/index.html b/web/index.html
index 0ab9848cc6d0f7ab8169c45584c7607be6e1b7db..452f332f70e50de1abbc9bba08265d148ecff12f 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -2600,6 +2600,9 @@
                 .on('hidden.bs.dropdown', function () {
                     NETDATA.unpause();
                 });
+
+            // var netdataEnded = performance.now();
+            // console.log('start up time: ' + (netdataEnded - netdataStarted).toString() + ' ms');
         }
 
         function resetDashboardOptions() {
@@ -2642,6 +2645,7 @@
         };
 
         // our entry point
+        // var netdataStarted = performance.now();
         var netdataCallback = initializeDynamicDashboard;
     </script>
 </head>
@@ -3253,4 +3257,4 @@
     </div>
 </body>
 </html>
-<script type="text/javascript" src="dashboard.js?v20161229-4"></script>
+<script type="text/javascript" src="dashboard.js?v20170104-25"></script>