Avoid Creating Small Objects Frequently

Creating lots of small objects frequently can drastically decrease
performance.  This commit introduces three fixes which avoid this:

- Use a preallocated palette and indexed-to-rgb destination Typed Array
  (the destination typed array is currently allocated at `4 * width *
  height`).

- Inline `getTightCLength`, which returned a two-item array.

- Pass RGBX data directly in a Typed Array to the Display, which
  avoids an extra loop, and only creates a new Typed Array View,
  instead of a whole new ArrayBuffer.

include/display.js

@@ -15,6 +15,14 @@ var Display;
 (function () {
     "use strict";
 
+    var SUPPORTS_IMAGEDATA_CONSTRUCTOR = false;
+    try {
+        new ImageData(new Uint8ClampedArray(1), 1, 1);
+        SUPPORTS_IMAGEDATA_CONSTRUCTOR = true;
+    } catch (ex) {
+        // ignore failure
+    }
+
     Display = function (defaults) {
         this._drawCtx = null;
         this._c_forceCanvas = false;
@@ -435,6 +443,10 @@ var Display;
             }
         },
 
+        blitRgbxImage: function (x, y, width, height, arr, offset) {
+            this._rgbxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
+        },
+
         blitStringImage: function (str, x, y) {
             var img = new Image();
             img.onload = function () {
@@ -612,6 +624,19 @@ var Display;
             this._drawCtx.putImageData(img, x - vx, y - vy);
         },
 
+        _rgbxImageData: function (x, y, vx, vy, width, height, arr, offset) {
+            // NB(directxman12): arr must be an Type Array view
+            // NB(directxman12): this only works
+            var img;
+            if (SUPPORTS_IMAGEDATA_CONSTRUCTOR) {
+                img = new ImageData(new Uint8ClampedArray(arr.buffer, 0, width * height * 4), width, height);
+            } else {
+                img = this._drawCtx.createImageData(width, height);
+                img.data.set(new Uint8ClampedArray(arr.buffer, 0, width * height * 4));
+            }
+            this._drawCtx.putImageData(img, x - vx, y - vy);
+        },
+
         _cmapImageData: function (x, y, vx, vy, width, height, arr, offset) {
             var img = this._drawCtx.createImageData(width, height);
             var data = img.data;
@@ -643,6 +668,9 @@ var Display;
                     case 'blitRgb':
                         this.blitRgbImage(a.x, a.y, a.width, a.height, a.data, 0);
                         break;
+                    case 'blitRgbx':
+                        this.blitRgbxImage(a.x, a.y, a.width, a.height, a.data, 0);
+                        break;
                     case 'img':
                         if (a.img.complete) {
                             this.drawImage(a.img, a.x, a.y);

include/inflator.js

@@ -2386,7 +2386,7 @@ var Inflate = function () {
 
 Inflate.prototype = {
     inflate: function (data, flush) {
-        this.strm.input = new Uint8Array(data);
+        this.strm.input = data;
         this.strm.avail_in = this.strm.input.length;
         this.strm.next_in = 0;
         this.strm.next_out = 0;