Build Text Layer one div at a a time as an Interval instead of a all in a TimeOut to keep the browser responsive

src/canvas.js

@@ -259,7 +259,7 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       this.textLayerQueue = [];
       // Prevent textLayerQueue from being rendered while rendering a new page
       if (this.textLayerTimer)
-        clearTimeout(this.textLayerTimer);
+        clearInterval(this.textLayerTimer);
     },
 
     executeIRQueue: function canvasGraphicsExecuteIRQueue(codeIR,
@@ -329,17 +329,21 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
 
       var self = this;
       var renderTextLayer = function canvasRenderTextLayer() {
+        var finished = true;
         var textDivs = self.textDivs;
-        for (var i = 0, length = textDivs.length; i < length; ++i) {
+        if (textDivs.length > 0) {
-          if (textDivs[i].dataset.textLength > 1) { // avoid div by zero
+          var textDiv = textDivs.shift();
-            textLayer.appendChild(textDivs[i]);
+          if (textDiv.dataset.textLength > 1) { // avoid div by zero
+            textLayer.appendChild(textDiv);
             // Adjust div width (via letterSpacing) to match canvas text
             // Due to the .offsetWidth calls, this is slow
-            textDivs[i].style.letterSpacing =
+            textDiv.style.letterSpacing =
-              ((textDivs[i].dataset.canvasWidth - textDivs[i].offsetWidth) /
+              ((textDiv.dataset.canvasWidth - textDiv.offsetWidth) /
-               (textDivs[i].dataset.textLength - 1)) + 'px';
+               (textDiv.dataset.textLength - 1)) + 'px';
           }
+          finished = false;
         }
+        return finished;
       }
       var textLayerQueue = this.textLayerQueue;
       textLayerQueue.push(renderTextLayer);
@@ -347,12 +351,16 @@ var CanvasGraphics = (function CanvasGraphicsClosure() {
       // Lazy textLayer rendering (to prevent UI hangs)
       // Only render queue if activity has stopped, where "no activity" ==
       // "no beginDrawing() calls in the last N ms"
-      this.textLayerTimer = setTimeout(function renderTextLayerQueue() {
+      this.textLayerTimer = setInterval(function renderTextLayerQueue() {
         // Render most recent (==most relevant) layers first
         for (var i = textLayerQueue.length - 1; i >= 0; i--) {
-          textLayerQueue.pop().call();
+          var finished = textLayerQueue[i].call();
+          if (finished)
+            textLayerQueue.splice(i,1);
         }
-      }, 500);
+        if (textLayerQueue.length == 0)
+          clearInterval(this.textLayerTimer);
+      }, 1);
     },
 
     // Graphics state