From 6136a458863e758700eb4792f900d7585dc2f158 Mon Sep 17 00:00:00 2001
From: Asaf Gartner <githandmadenetwork@asafgartner.com>
Date: Sat, 23 Jun 2018 14:32:01 +0000
Subject: [PATCH] Attempting to speed up rendering without hurting framerate.

---
 cinera/cinera_search.js | 103 ++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 52 deletions(-)

diff --git a/cinera/cinera_search.js b/cinera/cinera_search.js
index 5854ce6..79e2938 100644
--- a/cinera/cinera_search.js
+++ b/cinera/cinera_search.js
@@ -35,7 +35,7 @@ indexSort.addEventListener("click", function(ev) {
 var lastQuery = null;
 var resultsToRender = [];
 var resultsIndex = 0;
-var resultsMarkerIndex = 0;
+var resultsMarkerIndex = -1;
 var resultsContainer = document.getElementById("cineraResults");
 var rendering = false;
 
@@ -93,7 +93,7 @@ function runSearch() {
         oldResultsContainer.parentNode.insertBefore(resultsContainer, oldResultsContainer);
         oldResultsContainer.remove();
         resultsIndex = 0;
-        resultsMarkerIndex = 0;
+        resultsMarkerIndex = -1;
     }
     lastQuery = queryStr;
     resultsToRender = [];
@@ -145,63 +145,62 @@ function runSearch() {
     document.getElementById("cineraResultsSummary").textContent = "Found: " + numEpisodes + " episodes, " + numMarkers + " markers, " + totalTime + "total.";
 }
 
-function renderMatches(renderStart) {
-    var query = resultsToRender[resultsIndex].query;
-    var episode = resultsToRender[resultsIndex].episode;
-    var matches = resultsToRender[resultsIndex].matches;
-    var markerList = null;
-    if (resultsMarkerIndex == 0) {
-        var dayContainer = dayContainerPrototype.cloneNode(true);
-        var dayName = dayContainer.children[0];
-        markerList = dayContainer.children[1];
-        dayName.textContent = episode.day + ": " + episode.title;
-        resultsContainer.appendChild(dayContainer);
-    } else {
-        markerList = document.querySelector("#cineraResults > .dayContainer:nth-child(" + (resultsIndex+1) + ") .markerList");
-    }
-
-    do {
-        var match = matches[resultsMarkerIndex];
-        var marker = markerPrototype.cloneNode();
-        var playerURLPrefix = (baseURL ? baseURL + "/" : "") + (playerLocation ? playerLocation + "/" : "");
-        marker.setAttribute("href", playerURLPrefix + episode.filename.replace(/"/g, "") + "/#" + match.totalTime);
-        query.lastIndex = 0;
-        var cursor = 0;
-        var text = match.text;
-        var result = null;
-        marker.appendChild(document.createTextNode(match.prettyTime + " "));
-        while (result = query.exec(text)) {
-            if (result.index > cursor) {
-                marker.appendChild(document.createTextNode(text.slice(cursor, result.index)));
-            }
-            var highlightEl = highlightPrototype.cloneNode();
-            highlightEl.textContent = result[0];
-            marker.appendChild(highlightEl);
-            cursor = result.index + result[0].length;
-        }
-
-        if (cursor < text.length) {
-            marker.appendChild(document.createTextNode(text.slice(cursor, text.length)));
-        }
-        markerList.appendChild(marker);
-        resultsMarkerIndex++;
-    } while (resultsMarkerIndex < matches.length && performance.now() - renderStart < 1);
-
-    return resultsMarkerIndex == matches.length;
-}
-
 function renderResults() {
     if (resultsIndex < resultsToRender.length) {
         rendering = true;
-        var renderStart = performance.now();
-        while (resultsIndex < resultsToRender.length && performance.now() - renderStart < 1) {
-            var done = renderMatches(renderStart);
-            if (done) {
+        var maxItems = 10;
+        var numItems = 0;
+        while (numItems < maxItems && resultsIndex < resultsToRender.length) {
+            var query = resultsToRender[resultsIndex].query;
+            var episode = resultsToRender[resultsIndex].episode;
+            var matches = resultsToRender[resultsIndex].matches;
+            var markerList = null;
+            if (resultsMarkerIndex == -1) {
+                var dayContainer = dayContainerPrototype.cloneNode(true);
+                var dayName = dayContainer.children[0];
+                markerList = dayContainer.children[1];
+                dayName.textContent = episode.day + ": " + episode.title;
+                resultsContainer.appendChild(dayContainer);
                 resultsMarkerIndex = 0;
+                numItems++;
+            } else {
+                markerList = document.querySelector("#cineraResults > .dayContainer:nth-child(" + (resultsIndex+1) + ") .markerList");
+            }
+        
+            while (numItems < maxItems && resultsMarkerIndex < matches.length) {
+                var match = matches[resultsMarkerIndex];
+                var marker = markerPrototype.cloneNode();
+                var playerURLPrefix = (baseURL ? baseURL + "/" : "") + (playerLocation ? playerLocation + "/" : "");
+                marker.setAttribute("href", playerURLPrefix + episode.filename.replace(/"/g, "") + "/#" + match.totalTime);
+                query.lastIndex = 0;
+                var cursor = 0;
+                var text = match.text;
+                var result = null;
+                marker.appendChild(document.createTextNode(match.prettyTime + " "));
+                while (result = query.exec(text)) {
+                    if (result.index > cursor) {
+                        marker.appendChild(document.createTextNode(text.slice(cursor, result.index)));
+                    }
+                    var highlightEl = highlightPrototype.cloneNode();
+                    highlightEl.textContent = result[0];
+                    marker.appendChild(highlightEl);
+                    cursor = result.index + result[0].length;
+                }
+        
+                if (cursor < text.length) {
+                    marker.appendChild(document.createTextNode(text.slice(cursor, text.length)));
+                }
+                markerList.appendChild(marker);
+                numItems++;
+                resultsMarkerIndex++;
+            }
+        
+            if (resultsMarkerIndex == matches.length) {
+                resultsMarkerIndex = -1;
                 resultsIndex++;
             }
         }
-        requestAnimationFrame(renderResults);
+        setTimeout(renderResults, 0);
     } else {
         rendering = false;
     }