HTML: Improve diff display performance

This improves the diff performance by a factor of around 10. Things done
to do this are, among others:

	* user String.replace(//g) instead of String.gsub(). It's
		*much* faster
	* Don't use anonymous inner functions for iteration, but instead
		use for loops
	* Don't use String.startsWith() if we can just compare a
		single character

Because we are now so much faster, we can also show bigger diffs
by default.
This commit is contained in:
Pieter de Bie
2008-10-09 15:47:02 +02:00
parent 5c69f31b5a
commit 70bc282982
2 changed files with 51 additions and 44 deletions
+1 -1
View File
@@ -139,7 +139,7 @@ var loadCommit = function() {
$("message").innerHTML = commit.message.replace(/\n/g,"<br>");
if (commit.diff.length < 10000) {
if (commit.diff.length < 200000) {
showDiffs();
} else {
$("details").innerHTML = "<a class='showdiff' href='' onclick='showDiffs(); return false;'>This is a large commit. Click here or press 'v' to view.</a>";
+50 -43
View File
@@ -1,63 +1,65 @@
var EMPTY_SIDE = "<span class='lineno'> </span><span class='lineno'> </span>\n";
// If we run from a Safari instance, we don't
// have a Controller object. Instead, we fake it by
// using the console
if (typeof Controller == 'undefined')
{
Controller = console;
Controller.log_ = console.log;
}
var highlightDiffs = function() {
var start = new Date().getTime();
var diffs = document.getElementsByClassName("diffcode");
$A(diffs).each(function(diff) {
var content = diff.innerHTML.strip();
diff.innerHTML = "";
for (var diffn = 0; diffn < diffs.length; diffn++) {
var diff = diffs[diffn];
var content = diff.innerHTML.replace(/\s+$/, '');
var line1 = "";
var line2 = "";
var diffContent = "";
var lines = $A(content.split("\n"));
var lines = content.split('\n');
var hunk_start_line_1 = -1;
var hunk_start_line_2 = -1;
var start = new Date();
lines.each(function(l) {
if (l.length > 250)
l = l.substring(0, 250);
var header = false;
l = l.gsub("\t", " ");
for (var lineno = 0; lineno < lines.length; lineno++) {
var l = lines[lineno];
if (l.startsWith("diff")) {
line1 += "\n";
line2 += "\n";
diffContent += "<div class='fileHeader'><span class='fileline'>" + l + "</span></div>";
return;
}
if (l.startsWith("---")) {
return;
line1 += "\n";
line2 += "\n";
diffContent += "<div class='oldfile'>" + l + "</div></div>";
return;
var firstChar = l.charAt(0);
if (header) {
if (firstChar == "+" || firstChar == "-")
continue;
} else if (firstChar == "d") {
header = true;
line1 += '\n';
line2 += '\n';
diffContent += '<div class="fileHeader"><span class="fileline">' + l + '</span></div>';
continue;
}
if (l.startsWith("+++")) {
return;
line1 += "\n";
line2 += "\n";
diffContent += "<div class='newfile'>" + l + "</div></div>";
return;
}
if (l.startsWith("+")) {
l = l.replace(/\t/g, " ");
if (firstChar == "+") {
// Highlight trailing whitespace
if (m = l.match(/([\t ]+)$/))
l = l.replace(/[\t ]+$/, "<span class='whitespace'>" + m[1] + "</span>");
if (m = l.match(/\s+$/))
l = l.replace(/\s+$/, "<span class='whitespace'>" + m + "</span>");
line1 += "\n";
line2 += ++hunk_start_line_2 + "\n";
diffContent += "<div class='addline'>" + l + "</div>";
}
else if (l.startsWith("-")) {
else if (firstChar == "-") {
line1 += ++hunk_start_line_1 + "\n";
line2 += "\n";
diffContent += "<div class='delline'>" + l + "</div>";
}
else if (l.startsWith("@"))
else if (firstChar == "@")
{
header = false;
if (m = l.match(/@@ \-([0-9]+),\d+ \+(\d+),\d+ @@/))
{
hunk_start_line_1 = parseInt(m[1]) - 1;
@@ -67,17 +69,22 @@ var highlightDiffs = function() {
line2 += "...\n";
diffContent += "<div class='hunkheader'>" + l + "</div>";
}
else if (l.startsWith(" "))
else if (firstChar == " ")
{
line1 += ++hunk_start_line_1 + "\n";
line2 += ++hunk_start_line_2 + "\n";
diffContent += l + "\n";
}
});
var duration = new Date() - start;
var new_content = "<table class='diff'><tr><td class='lineno'l><pre>" + line1 + "</pre></td>";
new_content += "<td class='lineno'l><pre>" + line2 + "</pre></td>";
new_content += "<td width='100%'><pre width='100%'>" + diffContent + "</pre></td></tr></table>";
diff.innerHTML = new_content;
});
}
// This takes about 7ms
diff.innerHTML = "<table class='diff'><tr><td class='lineno'l><pre>" + line1 + "</pre></td>" +
"<td class='lineno'l><pre>" + line2 + "</pre></td>" +
"<td width='100%'><pre width='100%'>" + diffContent + "</pre></td></tr></table>";
}
// TODO: Replace this with a performance pref call
if (false)
Controller.log_("Total time:" + (new Date().getTime() - start));
}