From 05d143f874fc0f78ed5325cee38fd2b9d64861ce Mon Sep 17 00:00:00 2001 From: Paul Sokolovsky Date: Fri, 11 Jul 2014 22:31:45 +0300 Subject: Datatables load-in: log various stages, use async processing for filling. These changes are supposed to address current browser non-responsiveness while preparing recordset data for whole bunch (25+) of DataTables in various tabs. Currently, there's ~5s lock-up when loading the index page. This change a little improves the situation, but only a little - instead of complete lock up, it's now possibly to jerkily scroll it while loading. There's also possible drawback - it's possible to switch to another tab, which is not loaded yet and thus will be empty for some seconds (and complete async loading takes more time than sync). So, while this is arguably a step in right direction, even more fine-grained async handling won't be a panacea, the algorithm for loading data into multiple tables should be optimized. Change-Id: I12d7adfcbfd5d648fffb8a9332648000f867d489 --- static/index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/static/index.js b/static/index.js index c8dd759..d9840c1 100644 --- a/static/index.js +++ b/static/index.js @@ -1,5 +1,5 @@ YUI(Yconfig).use( - 'node', 'tabview', 'datatable', 'history', 'recordset-base', 'recordset-filter', 'io', 'json', 'linaro-trivia', + 'node', 'async-queue', 'tabview', 'datatable', 'history', 'recordset-base', 'recordset-filter', 'io', 'json', 'linaro-trivia', function (Y) { var history = new Y.HistoryHash(), esubteam_tabview = new Y.TabView({ srcNode: '#esubteams' }); @@ -550,16 +550,27 @@ YUI(Yconfig).use( return results; } + console.log("Fetching jobs"); + console.log(tables); Y.io( globalConfig.jenkinsURL + "/api/json?tree=" + treeExp, { method: "GET", on: { success: function (e, response) { + console.log("Fetched jobs"); var jobs = extractJobsFromResponse(response.responseText); + console.log("Parsed jobs"); + var q = new Y.AsyncQueue(); for (var i = 0; i < tables.length; i++) { - tables[i].datafilter.newData(jobs); + // Replaced synchronous table filling with async below + //tables[i].datafilter.newData(jobs); + q.add((function(i) { + return function() { tables[i].datafilter.newData(jobs); } + })(i)); } + q.run(); + console.log("Populated job tables"); } } } -- cgit v1.2.3