Merge pull request #2231 from stickz/master

Reduce layout thrashing by optimizing dxSTable row creation
Novik · Dec 23, 2021 · 6bffcb1 · 6bffcb1
2 parents b042daa + 73dd7f4
commit 6bffcb1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git 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)
+dxSTable.prototype.addRowById = function(ids, sId, icon, attr, fast = false)
 {
         var cols = [];
         for(var i=0; i<this.cols; i++)
@@ -1283,10 +1283,10 @@ dxSTable.prototype.addRowById = function(ids, sId, icon, attr)
 		if(no>=0)
 			cols[no] = ids[i];
 	}
-	this.addRow(cols, sId, icon, attr);
+	this.addRow(cols, sId, icon, attr, fast);
 }
 
-dxSTable.prototype.addRow = function(cols, sId, icon, attr) 
+dxSTable.prototype.addRow = function(cols, sId, icon, attr, fast = false) 
 {
 	if(cols.length != this.cols) 
 		return;
@@ -1298,16 +1298,28 @@ 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();
-	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";
-	var self = this;
-	if((this.sIndex !=- 1) && !this.noSort)
-		this.sortTimeout = window.setTimeout(function() { self.Sort(); }, 200);
+
+	// 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";
+
+		var self = this;
+		if((this.sIndex !=- 1) && !this.noSort)
+			this.sortTimeout = window.setTimeout(function() { self.Sort(); }, 200);
+	}
+	else
+	{
+		this.rows++;
+		this.viewRows++;
+	}
 }
 
 dxSTable.prototype.createRow = function(cols, sId, icon, attr) 

diff --git a/js/webui.js b/js/webui.js
@@ -1633,6 +1633,8 @@ var theWebUI =
    		var tul = 0;
 		var tdl = 0;
 		var tArray = [];
+		var firstLoad = this.firstLoad;
+
 		$.each(data.torrents,
 		/**
 		 * @param {string} hash - torrent hash
@@ -1648,7 +1650,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}, firstLoad);
 				tArray.push(hash);
 				theWebUI.filterByLabel(hash);
 			}
@@ -1747,8 +1749,8 @@ var theWebUI =
 		else 
 		{
 			table.refreshRows();
+			table.Sort();
 		}
-		table.Sort();
 		this.setInterval();
 		this.updateDetails();
    	},