From 71bc3f9254ad7b231bf412dbcb6930e841c69519 Mon Sep 17 00:00:00 2001 From: stickz Date: Sun, 19 Dec 2021 16:23:36 -0500 Subject: [PATCH 1/4] Fix layout thrashing issue with table.getMaxRows() --- js/stable.js | 9 +++++---- js/webui.js | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/js/stable.js b/js/stable.js index bb1fb1ea4..b0c8150c8 100644 --- a/js/stable.js +++ b/js/stable.js @@ -86,6 +86,7 @@ var dxSTable = function() this.mni = 0; this.mxi = 0; this.maxViewRows = 100; + this.trHeight = TR_HEIGHT; } dxSTable.prototype.setPaletteByURL = function(url) @@ -1271,7 +1272,7 @@ dxSTable.prototype.selectRow = function(e, row) return(false); } -dxSTable.prototype.addRowById = function(ids, sId, icon, attr) +dxSTable.prototype.addRowById = function(ids, sId, icon, attr, mRows) { var cols = []; for(var i=0; i=0) cols[no] = ids[i]; } - this.addRow(cols, sId, icon, attr); + this.addRow(cols, sId, icon, attr, mRows); } -dxSTable.prototype.addRow = function(cols, sId, icon, attr) +dxSTable.prototype.addRow = function(cols, sId, icon, attr, mRows) { if(cols.length != this.cols) return; @@ -1297,7 +1298,7 @@ dxSTable.prototype.addRow = function(cols, sId, icon, attr) this.rowdata[sId] = {"data" : cols, "icon" : icon, "attr" : attr, "enabled" : true, fmtdata: this.format(this,cols.slice(0))}; this.rowSel[sId] = false; this.rowIDs.push(sId); - var maxRows = this.getMaxRows(); + var maxRows = mRows ? mRows : this.getMaxRows(); if(this.viewRows < maxRows) this.tBody.tb.appendChild(this.createRow(cols, sId, icon, attr)); this.rows++; diff --git a/js/webui.js b/js/webui.js index f37f101f5..03246c278 100644 --- a/js/webui.js +++ b/js/webui.js @@ -1633,6 +1633,7 @@ var theWebUI = var tul = 0; var tdl = 0; var tArray = []; + var tMaxRows = Math.ceil(Math.min(table.dBody.clientHeight,table.dCont.clientHeight) / table.trHeight); $.each(data.torrents, /** * @param {string} hash - torrent hash @@ -1648,7 +1649,7 @@ var theWebUI = if(!$type(theWebUI.torrents[hash])) { theWebUI.labels[hash] = lbl; - table.addRowById(torrent, hash, sInfo[0], {label : lbl}); + table.addRowById(torrent, hash, sInfo[0], {label : lbl}, tMaxRows); tArray.push(hash); theWebUI.filterByLabel(hash); } From fe3edf4c98110343e39915fd5e8312f6f6b3138d Mon Sep 17 00:00:00 2001 From: stickz Date: Wed, 22 Dec 2021 21:30:01 -0500 Subject: [PATCH 2/4] Optimize initial row creation instead --- js/stable.js | 32 ++++++++++++++++++++++---------- js/webui.js | 7 ++++--- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/js/stable.js b/js/stable.js index b0c8150c8..eee578aa2 100644 --- a/js/stable.js +++ b/js/stable.js @@ -1272,7 +1272,7 @@ dxSTable.prototype.selectRow = function(e, row) return(false); } -dxSTable.prototype.addRowById = function(ids, sId, icon, attr, mRows) +dxSTable.prototype.addRowById = function(ids, sId, icon, attr, fast = false) { var cols = []; for(var i=0; i=0) cols[no] = ids[i]; } - this.addRow(cols, sId, icon, attr, mRows); + this.addRow(cols, sId, icon, attr, fast); } -dxSTable.prototype.addRow = function(cols, sId, icon, attr, mRows) +dxSTable.prototype.addRow = function(cols, sId, icon, attr, fast = false) { if(cols.length != this.cols) return; @@ -1298,13 +1298,25 @@ dxSTable.prototype.addRow = function(cols, sId, icon, attr, mRows) this.rowdata[sId] = {"data" : cols, "icon" : icon, "attr" : attr, "enabled" : true, fmtdata: this.format(this,cols.slice(0))}; this.rowSel[sId] = false; this.rowIDs.push(sId); - var maxRows = mRows ? mRows : this.getMaxRows(); - if(this.viewRows < maxRows) - this.tBody.tb.appendChild(this.createRow(cols, sId, icon, attr)); - this.rows++; - this.viewRows++; - if(this.viewRows > maxRows) - this.bpad.style.height = ((this.viewRows - maxRows) * TR_HEIGHT) + "px"; + + // When adding hundreds or thousands of rows at once, it's faster to skip a few steps + // This is safe as long as we call dxSTable.prototype.refreshRows() when we're done + if (!fast) + { + var maxRows = this.getMaxRows(); + if(this.viewRows < maxRows) + this.tBody.tb.appendChild(this.createRow(cols, sId, icon, attr)); + this.rows++; + this.viewRows++; + if(this.viewRows > maxRows) + this.bpad.style.height = ((this.viewRows - maxRows) * TR_HEIGHT) + "px"; + } + else + { + this.rows++; + this.viewRows++; + } + var self = this; if((this.sIndex !=- 1) && !this.noSort) this.sortTimeout = window.setTimeout(function() { self.Sort(); }, 200); diff --git a/js/webui.js b/js/webui.js index 03246c278..a8b7f6cb2 100644 --- a/js/webui.js +++ b/js/webui.js @@ -1633,7 +1633,8 @@ var theWebUI = var tul = 0; var tdl = 0; var tArray = []; - var tMaxRows = Math.ceil(Math.min(table.dBody.clientHeight,table.dCont.clientHeight) / table.trHeight); + var firstLoad = this.firstLoad; + $.each(data.torrents, /** * @param {string} hash - torrent hash @@ -1649,7 +1650,7 @@ var theWebUI = if(!$type(theWebUI.torrents[hash])) { theWebUI.labels[hash] = lbl; - table.addRowById(torrent, hash, sInfo[0], {label : lbl}, tMaxRows); + table.addRowById(torrent, hash, sInfo[0], {label : lbl}, firstLoad); tArray.push(hash); theWebUI.filterByLabel(hash); } @@ -1748,8 +1749,8 @@ var theWebUI = else { table.refreshRows(); + table.Sort(); } - table.Sort(); this.setInterval(); this.updateDetails(); }, From 5888873f2b46fe06705050e994f0e44597813104 Mon Sep 17 00:00:00 2001 From: stickz Date: Wed, 22 Dec 2021 21:39:36 -0500 Subject: [PATCH 3/4] Don't need this.trHeight anymore --- js/stable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/stable.js b/js/stable.js index eee578aa2..ca9f0460c 100644 --- a/js/stable.js +++ b/js/stable.js @@ -86,7 +86,6 @@ var dxSTable = function() this.mni = 0; this.mxi = 0; this.maxViewRows = 100; - this.trHeight = TR_HEIGHT; } dxSTable.prototype.setPaletteByURL = function(url) From 73dd7f4e3ee5b9001d519679a04b1cc8802c559e Mon Sep 17 00:00:00 2001 From: stickz Date: Thu, 23 Dec 2021 15:08:57 -0500 Subject: [PATCH 4/4] Remove table sort from fast case --- js/stable.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/stable.js b/js/stable.js index ca9f0460c..ea0649527 100644 --- a/js/stable.js +++ b/js/stable.js @@ -1308,17 +1308,17 @@ dxSTable.prototype.addRow = function(cols, sId, icon, attr, fast = false) this.rows++; this.viewRows++; if(this.viewRows > maxRows) - this.bpad.style.height = ((this.viewRows - maxRows) * TR_HEIGHT) + "px"; + this.bpad.style.height = ((this.viewRows - maxRows) * TR_HEIGHT) + "px"; + + var self = this; + if((this.sIndex !=- 1) && !this.noSort) + this.sortTimeout = window.setTimeout(function() { self.Sort(); }, 200); } else { this.rows++; - this.viewRows++; + this.viewRows++; } - - var self = this; - if((this.sIndex !=- 1) && !this.noSort) - this.sortTimeout = window.setTimeout(function() { self.Sort(); }, 200); } dxSTable.prototype.createRow = function(cols, sId, icon, attr)