graph: optimize rendering by appending all nodes at once

templates/coal/graph.tmpl

@@ -67,9 +67,6 b' graph.edge = function(x0, y0, x1, y1, co'
 	
 }
 
-var nodes = document.getElementById('graphnodes');
-var nodebgs = document.getElementById('nodebgs');
-
 var revlink = '<li style="_STYLE"><span class="desc">';
 revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID">_DESC</a>';
 revlink += '</span><span class="tag">_TAGS</span>';
@@ -83,8 +80,6 b' graph.vertex = function(x, y, color, par'
 	this.ctx.fill();
 	
 	var bg = '<li class="bg parity' + parity + '"></li>';
-	nodebgs.innerHTML += bg;
-	
 	var left = (this.columns + 1) * this.bg_height;
 	var nstyle = 'padding-left: ' + left + 'px;';
 	var item = revlink.replace(/_STYLE/, nstyle);
@@ -95,7 +90,8 b' graph.vertex = function(x, y, color, par'
 	item = item.replace(/_USER/, cur[4]);
 	item = item.replace(/_DATE/, cur[5]);
 	item = item.replace(/_TAGS/, cur[7].join('&nbsp; '));
-	nodes.innerHTML += item;
+	
+	return [bg, item];
 	
 }
 

templates/gitweb/graph.tmpl

@@ -59,9 +59,6 b' graph.edge = function(x0, y0, x1, y1, co'
 	
 }
 
-var nodes = document.getElementById('graphnodes');
-var nodebgs = document.getElementById('nodebgs');
-
 var revlink = '<li style="_STYLE"><span class="desc">';
 revlink += '<a class="list" href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID"><b>_DESC</b></a>';
 revlink += '</span> _TAGS';
@@ -75,8 +72,6 b' graph.vertex = function(x, y, color, par'
 	this.ctx.fill();
 	
 	var bg = '<li class="bg parity' + parity + '"></li>';
-	nodebgs.innerHTML += bg;
-	
 	var left = (this.columns + 1) * this.bg_height;
 	var nstyle = 'padding-left: ' + left + 'px;';
 	var item = revlink.replace(/_STYLE/, nstyle);
@@ -107,7 +102,7 b' graph.vertex = function(x, y, color, par'
 	}
 	
 	item = item.replace(/_TAGS/, tagspan);
-	nodes.innerHTML += item;
+	return [bg, item];
 	
 }
 

templates/graph.tmpl

@@ -52,9 +52,6 b' graph.edge = function(x0, y0, x1, y1, co'
 	
 }
 
-var nodes = document.getElementById('graphnodes');
-var nodebgs = document.getElementById('nodebgs');
-
 var revlink = '<li style="_STYLE"><span class="desc">';
 revlink += '<a href="{url}rev/_NODEID{sessionvars%urlparameter}" title="_NODEID">_DESC</a>';
 revlink += '</span><span class="info">_DATE ago, by _USER</span></li>';
@@ -67,8 +64,6 b' graph.vertex = function(x, y, color, par'
 	this.ctx.fill();
 	
 	var bg = '<li class="bg parity' + parity + '"></li>';
-	nodebgs.innerHTML += bg;
-	
 	var left = (this.columns + 1) * this.bg_height;
 	var nstyle = 'padding-left: ' + left + 'px;';
 	var item = revlink.replace(/_STYLE/, nstyle);
@@ -78,7 +73,8 b' graph.vertex = function(x, y, color, par'
 	item = item.replace(/_DESC/, cur[3]);
 	item = item.replace(/_USER/, cur[4]);
 	item = item.replace(/_DATE/, cur[5]);
-	nodes.innerHTML += item;
+	
+	return [bg, item];
 	
 }
 

templates/static/graph.js

@@ -75,6 +75,9 b' function Graph() {'
 
 	this.render = function(data) {
 		
+		var backgrounds = '';
+		var nodedata = '';
+		
 		for (var i in data) {
 			
 			var parity = i % 2;
@@ -118,12 +121,17 b' function Graph() {'
 			radius = this.box_size / 8;
 			x = this.cell[0] + this.box_size * column + this.box_size / 2;
 			y = this.bg[1] - this.bg_height / 2;
-			this.vertex(x, y, color, parity, cur);
+			var add = this.vertex(x, y, color, parity, cur);
+			backgrounds += add[0];
+			nodedata += add[1];
 			
 			if (fold) this.columns -= 1;
 			
 		}
 		
+		document.getElementById('nodebgs').innerHTML += backgrounds;
+		document.getElementById('graphnodes').innerHTML += nodedata;
+		
 	}
 
 }