Optimize TextLayerBuilder_renderLayer() for text heavy documents.

This change improves the text layer creation of "normal" text heavy documents.
It changes 2 things:
 * If the text element is not rotated, it will neither calculate nor apply a
   textTransform: rotate(0deg) to the text layer element.
 * For scaling the text layer div, the context will measure the width of the
   text in the given font. For many text documents the font changes seldom.
   If the font stays the same, the context does not need to be set to a new font
   especially avoiding the temporary creation of the same font string over and
   over again.

web/text_layer_builder.js

@@ -56,20 +56,34 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
         return;
       }
 
+      var lastFontSize;
+      var lastFontFamily;
       for (var i = 0; i < textDivsLength; i++) {
         var textDiv = textDivs[i];
         if (textDiv.dataset.isWhitespace !== undefined) {
           continue;
         }
 
-        ctx.font = textDiv.style.fontSize + ' ' + textDiv.style.fontFamily;
+        var fontSize = textDiv.style.fontSize;
+        var fontFamily = textDiv.style.fontFamily;
+
+        // Only build font string and set to context if different from last.
+        if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) {
+          ctx.font = fontSize + ' ' + fontFamily;
+          lastFontSize = fontSize;
+          lastFontFamily = fontFamily;
+        }
+
         var width = ctx.measureText(textDiv.textContent).width;
         if (width > 0) {
           textLayerFrag.appendChild(textDiv);
+          // Dataset values come of type string.
           var textScale = textDiv.dataset.canvasWidth / width;
           var rotation = textDiv.dataset.angle;
           var transform = 'scale(' + textScale + ', 1)';
+          if (rotation) {
             transform = 'rotate(' + rotation + 'deg) ' + transform;
+          }
           CustomStyle.setProp('transform' , textDiv, transform);
           CustomStyle.setProp('transformOrigin' , textDiv, '0% 0%');
         }
@@ -114,18 +128,34 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
         angle += Math.PI / 2;
       }
       var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
-      var fontAscent = (style.ascent ? style.ascent * fontHeight :
-        (style.descent ? (1 + style.descent) * fontHeight : fontHeight));
-
+      var fontAscent = fontHeight;
+      if (style.ascent) {
+        fontAscent = style.ascent * fontAscent;
+      } else if (style.descent) {
+        fontAscent = (1 + style.descent) * fontAscent;
+      }
+
+      var left;
+      var top;
+      if (angle === 0) {
+        left = tx[4];
+        top = tx[5] - fontAscent;
+      } else {
+        left = tx[4] + (fontAscent * Math.sin(angle));
+        top = tx[5] - (fontAscent * Math.cos(angle));
+      }
       textDiv.style.position = 'absolute';
-      textDiv.style.left = (tx[4] + (fontAscent * Math.sin(angle))) + 'px';
-      textDiv.style.top = (tx[5] - (fontAscent * Math.cos(angle))) + 'px';
+      textDiv.style.left = left + 'px';
+      textDiv.style.top = top + 'px';
       textDiv.style.fontSize = fontHeight + 'px';
       textDiv.style.fontFamily = style.fontFamily;
 
       textDiv.textContent = geom.str;
       textDiv.dataset.fontName = geom.fontName;
+      // Storing into dataset will convert number into string.
+      if (angle !== 0) {
         textDiv.dataset.angle = angle * (180 / Math.PI);
+      }
       if (style.vertical) {
         textDiv.dataset.canvasWidth = geom.height * this.viewport.scale;
       } else {
@@ -324,4 +354,3 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
   };
   return TextLayerBuilder;
 })();
-