From 6e92e73a9825a0dba998d353eb491aeea541ebb9 Mon Sep 17 00:00:00 2001
From: Michael Nutt <michael@nuttnet.net>
Date: Sat, 1 Mar 2014 19:51:14 -0500
Subject: [PATCH] logline output buffers rather than updating on every ws
 message

In builds with lots of output, trying to reload the page partway
through the build results in thousands of websocket messages (one
per line) that each update the DOM.  This can cause the browser to
freeze.  Instead, use requestAnimation frame to delay the DOM
updates.
---
 pkg/template/pages/repo_commit.html | 37 +++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/pkg/template/pages/repo_commit.html b/pkg/template/pages/repo_commit.html
index ec64a8021..da32581e0 100644
--- a/pkg/template/pages/repo_commit.html
+++ b/pkg/template/pages/repo_commit.html
@@ -133,16 +133,39 @@
 		outputWS.onopen = function () { console.log('output websocket open'); };
 		outputWS.onerror = function (e) { console.log('websocket error: ' + e); };
 		outputWS.onclose = function (e) { window.location.reload(); };
-		outputWS.onmessage = function (e) { 
-			outputBox.innerHTML += formatLine(e.data);
-			if (window.autofollow) {
-				window.scrollTo(0, document.body.scrollHeight);
-			}
+
+		window.requestAnimationFrame = window.requestAnimationFrame ||
+			window.webkitRequestAnimationFrame ||
+			function(callback, element) {
+				return window.setTimeout(function() {
+					callback(+new Date());
+				}, 1000 / 60);
+			};
+
+		var lineBuffer = "";
+
+		outputWS.onmessage = function (e) {
+			lineBuffer += formatLine(e.data);
 		};
-	{{ else }} 
+
+		function updateScreen() {
+			if(lineBuffer.length > 0) {
+				outputBox.innerHTML += lineBuffer;
+				lineBuffer = '';
+
+				if (window.autofollow) {
+					window.scrollTo(0, document.body.scrollHeight);
+				}
+			}
+			requestAnimationFrame(updateScreen);
+		}
+
+		requestAnimationFrame(updateScreen);
+
+	{{ else }}
 		$.get("/{{ .Repo.Slug }}/commit/{{ .Commit.Hash }}/build/{{ .Build.Slug }}/out.txt", function( data ) {
 			$( "#stdout" ).html(formatLine(data));
 		});
 	{{ end }}
 	</script>
-{{ end }}
+{{ end }}
\ No newline at end of file