avoid web browser layout trashing when the dashboard is loaded; gained 500ms to 1000ms when loading the dashboard
Costa Tsaousis (ktsaou) committed
Jan 4, 2017 at 03:05 UTC
b3b4d7a8e55d1f05d3fe8c65f981805f1334f113
2 files changed
+50
-12
web/dashboard.js
+45
-11
@@ -1160,6 +1160,35 @@ var NETDATA = window.NETDATA || {};
1160
}
1161
};
1162
1163
+ // ----------------------------------------------------------------------------------------------------------------
1164
+ // http://wilsonpage.co.uk/preventing-layout-thrashing/
1165
+
1166
+ NETDATA.noLayoutTrashing = {
1167
+ set: false,
1168
+ callbacks: [],
1169
+
1170
+ add: function(callback) {
1171
+ // console.log('adding...');
1172
+ this.callbacks.push(callback);
1173
+
1174
+ if(this.set === false) {
1175
+ this.set = true;
1176
+ var that = this;
1177
+
1178
+ window.requestAnimationFrame(function() {
1179
+ var len = that.callbacks.length;
1180
+ // console.log('running... ' + len.toString());
1181
+ while(len--) {
1182
+ that.callbacks[len]();
1183
+ }
1184
+
1185
+ that.callbacks = new Array();
1186
+ that.set = false;
1187
+ });
1188
+ }
1189
+ }
1190
+ };
1191
+
1192
// ----------------------------------------------------------------------------------------------------------------
1193
// Our state object, where all per-chart values are stored
1194
@@ -1469,8 +1498,11 @@ var NETDATA = window.NETDATA || {};
1498
};
1499
1500
var maxMessageFontSize = function() {
1501
+ var screenHeight = screen.height;
1502
+ var el = that.element_message;
1503
+
1504
// normally we want a font size, as tall as the element
1473
- var h = that.element_message.clientHeight;
1505
+ var h = el.clientHeight;
1506
1507
// but give it some air, 20% let's say, or 5 pixels min
1508
var lost = Math.max(h * 0.2, 5);
@@ -1481,7 +1513,7 @@ var NETDATA = window.NETDATA || {};
1513
1514
// but check the width too
1515
// it should fit 10 characters in it
1484
- var w = that.element_message.clientWidth / 10;
1516
+ var w = el.clientWidth / 10;
1517
if(h > w) {
1518
paddingTop += (h - w) / 2;
1519
h = w;
@@ -1489,14 +1521,14 @@ var NETDATA = window.NETDATA || {};
1521
1522
// and don't make it too huge
1523
// 5% of the screen size is good
1492
- if(h > screen.height / 20) {
1493
- paddingTop += (h - (screen.height / 20)) / 2;
1494
- h = screen.height / 20;
1524
+ if(h > screenHeight / 20) {
1525
+ paddingTop += (h - (screenHeight / 20)) / 2;
1526
+ h = screenHeight / 20;
1527
}
1528
1529
// set it
1498
- that.element_message.style.fontSize = h.toString() + 'px';
1499
- that.element_message.style.paddingTop = paddingTop.toString() + 'px';
1530
+ el.style.fontSize = h.toString() + 'px';
1531
+ el.style.paddingTop = paddingTop.toString() + 'px';
1532
};
1533
1534
var showMessage = function(msg) {
@@ -1508,10 +1540,12 @@ var NETDATA = window.NETDATA || {};
1540
};
1541
1542
var showMessageIcon = function(icon) {
1511
- that.element_message.innerHTML = icon;
1512
- that.element_message.className = 'netdata-message icon';
1513
- maxMessageFontSize();
1514
- that.___messageHidden___ = undefined;
1543
+ NETDATA.noLayoutTrashing.add(function() {
1544
+ that.element_message.innerHTML = icon;
1545
+ that.element_message.className = 'netdata-message icon';
1546
+ maxMessageFontSize();
1547
+ that.___messageHidden___ = undefined;
1548
+ });
1549
};
1550
1551
var hideMessage = function() {
web/index.html
+5
-1
@@ -2600,6 +2600,9 @@
2600
.on('hidden.bs.dropdown', function () {
2601
NETDATA.unpause();
2602
});
2603
+
2604
+ // var netdataEnded = performance.now();
2605
+ // console.log('start up time: ' + (netdataEnded - netdataStarted).toString() + ' ms');
2606
}
2607
2608
function resetDashboardOptions() {
@@ -2642,6 +2645,7 @@
2645
};
2646
2647
// our entry point
2648
+ // var netdataStarted = performance.now();
2649
var netdataCallback = initializeDynamicDashboard;
2650
</script>
2651
</head>
@@ -3253,4 +3257,4 @@
3257
</div>
3258
</body>
3259
</html>
3256
-<script type="text/javascript" src="dashboard.js?v20161229-4"></script>
3260
+<script type="text/javascript" src="dashboard.js?v20170104-25"></script>