Merge branch 'test_search_perf'

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,22 +145,29 @@ function runSearch() {
     document.getElementById("cineraResultsSummary").textContent = "Found: " + numEpisodes + " episodes, " + numMarkers + " markers, " + totalTime + "total.";
 }
 
-function renderMatches(renderStart) {
+function renderResults() {
+    if (resultsIndex < resultsToRender.length) {
+        rendering = true;
+        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 == 0) {
+            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");
             }
         
-    do {
+            while (numItems < maxItems && resultsMarkerIndex < matches.length) {
                 var match = matches[resultsMarkerIndex];
                 var marker = markerPrototype.cloneNode();
                 var playerURLPrefix = (baseURL ? baseURL + "/" : "") + (playerLocation ? playerLocation + "/" : "");
@@ -184,24 +191,16 @@ function renderMatches(renderStart) {
                     marker.appendChild(document.createTextNode(text.slice(cursor, text.length)));
                 }
                 markerList.appendChild(marker);
+                numItems++;
                 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) {
-                resultsMarkerIndex = 0;
+            if (resultsMarkerIndex == matches.length) {
+                resultsMarkerIndex = -1;
                 resultsIndex++;
             }
         }
-        requestAnimationFrame(renderResults);
+        setTimeout(renderResults, 0);
     } else {
         rendering = false;
     }