Improve performance of similar enough images

I was tracking down a performance issue with a large diff on happo.io
and found that the shortcut we take when images are "similar enough"
wasn't fast enough. The hashing process takes a little while on large
images and we don't really need the hashing for the similarEnough
function to run. I rewrote it so that it would operate on unhashed image
arrays instead, plus made it early-bail so that we won't have to iterate
through the whole image when we already know it's not similar enough.

Author: trotzig

src/__tests__/similarEnough-test.js

@@ -0,0 +1,94 @@
+const similarEnough = require('../similarEnough');
+
+let subject;
+let image1Data;
+let image2Data;
+
+const BLACK = [0, 0, 0, 255];
+const WHITE = [255, 255, 255, 255];
+
+beforeEach(() => {
+  image1Data = [];
+  image2Data = [];
+  subject = () => similarEnough({ image1Data, image2Data });
+});
+
+describe('when images are empty', () => {
+  it('returns true', () => {
+    expect(subject()).toBe(true);
+  });
+});
+
+describe('when image1 is empty but image2 is not', () => {
+  beforeEach(() => {
+    image2Data = [[...BLACK, ...WHITE]];
+  });
+
+  it('returns false', () => {
+    expect(subject()).toBe(false);
+  });
+});
+
+describe('when 50% of rows are different', () => {
+  beforeEach(() => {
+    image1Data = [
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...WHITE, ...BLACK],
+      [...WHITE, ...BLACK],
+    ];
+    image2Data = [
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+    ];
+  });
+
+  it('returns false', () => {
+    expect(subject()).toBe(false);
+  });
+});
+
+describe('when only one row is different', () => {
+  beforeEach(() => {
+    image1Data = [
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...WHITE, ...BLACK],
+      [...BLACK, ...WHITE],
+    ];
+    image2Data = [
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+    ];
+  });
+
+  it('returns true', () => {
+    expect(subject()).toBe(true);
+  });
+});
+
+describe('when images are of different height', () => {
+  beforeEach(() => {
+    image1Data = [
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+    ];
+    image2Data = [
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+      [...BLACK, ...WHITE],
+    ];
+  });
+
+  it('returns false', () => {
+    expect(subject()).toBe(false);
+  });
+});

src/computeAndInjectDiffs.js

@@ -1,4 +1,5 @@
 const alignArrays = require('./alignArrays');
+const similarEnough = require('./similarEnough');
 
 function imageTo2DArray({ data, width, height }, paddingRight) {
   // The imageData is a 1D array. Each element in the array corresponds to a
@@ -16,20 +17,6 @@ function imageTo2DArray({ data, width, height }, paddingRight) {
   return newData;
 }
 
-function similarEnough({ hashedImage1Data, hashedImage2Data }) {
-  const { length } = hashedImage1Data;
-  if (length !== hashedImage2Data.length) {
-    return false;
-  }
-  let equalRows = 0;
-  for (let i = 0; i < length; i++) {
-    if (hashedImage1Data[i] === hashedImage2Data[i]) {
-      equalRows++;
-    }
-  }
-  return equalRows / length > 0.7;
-}
-
 function hashFn() {
   // Safari has a bug where trying to reference `btoa` inside a web worker will
   // result in an error, so we fall back to the slower (?) `JSON.stringify`. The
@@ -59,13 +46,13 @@ function align({
   maxWidth,
   hashFunction,
 }) {
-  const hashedImage1Data = image1Data.map(hashFunction);
-  const hashedImage2Data = image2Data.map(hashFunction);
-
-  if (similarEnough({ hashedImage1Data, hashedImage2Data })) {
+  if (similarEnough({ image1Data, image2Data })) {
     return;
   }
 
+  const hashedImage1Data = image1Data.map(hashFunction);
+  const hashedImage2Data = image2Data.map(hashFunction);
+
   alignArrays(
     hashedImage1Data,
     hashedImage2Data,

src/similarEnough.js

@@ -0,0 +1,24 @@
+const ALLOWED_INEQUALITY = 0.3;
+
+module.exports = function similarEnough({ image1Data, image2Data }) {
+  const { length } = image1Data;
+  if (length !== image2Data.length) {
+    return false;
+  }
+  const allowedInequalRows = length * ALLOWED_INEQUALITY;
+  let inequalRows = 0;
+  for (let i = 0; i < length; i++) {
+    const row = image1Data[i];
+    for (let j = 0; j < row.length; j++) {
+      if (image1Data[i][j] !== image2Data[i][j]) {
+        inequalRows++;
+        if (inequalRows > allowedInequalRows) {
+          return false;
+        }
+        break;
+      }
+    }
+  }
+  return true;
+}
+