Skip beforeAttributeUpdated when an attribute value is unchanged

morphAttributes called the beforeAttributeUpdated callback for every
attribute on every element being morphed, before checking whether the
incoming value differed from the existing one. The callback's purpose is
to let consumers veto a write - there is nothing to veto when the value
is already equal, and on dense pages the callback is a hot path.

Author: monorkin

src/idiomorph.js

@@ -676,12 +676,13 @@ var Idiomorph = (function () {
         const oldAttributes = oldElt.attributes;
         const newAttributes = newElt.attributes;
         for (const newAttribute of newAttributes) {
-          if (ignoreAttribute(newAttribute.name, oldElt, "update", ctx)) {
+          if (oldElt.getAttribute(newAttribute.name) === newAttribute.value) {
             continue;
           }
-          if (oldElt.getAttribute(newAttribute.name) !== newAttribute.value) {
-            oldElt.setAttribute(newAttribute.name, newAttribute.value);
+          if (ignoreAttribute(newAttribute.name, oldElt, "update", ctx)) {
+            continue;
           }
+          oldElt.setAttribute(newAttribute.name, newAttribute.value);
         }
         // iterate backwards to avoid skipping over items when a delete occurs
         for (let i = oldAttributes.length - 1; 0 <= i; i--) {

test/hooks.js

@@ -235,6 +235,34 @@ describe("lifecycle hooks", function () {
     initial.outerHTML.should.equal(`<a href="#"></a>`);
   });
 
+  it("does not call beforeAttributeUpdated when the attribute value is unchanged", function () {
+    let calls = [];
+    let initial = make(`<a href="#" id="x" class="y"></a>`);
+    Idiomorph.morph(initial, `<a href="#" id="x" class="y"></a>`, {
+      callbacks: {
+        beforeAttributeUpdated: (attributeName, node, mutationType) => {
+          calls.push([attributeName, mutationType]);
+        },
+      },
+    });
+    initial.outerHTML.should.equal(`<a href="#" id="x" class="y"></a>`);
+    calls.should.eql([]);
+  });
+
+  it("calls beforeAttributeUpdated only for attributes that actually change", function () {
+    let calls = [];
+    let initial = make(`<a href="a" id="x" class="y"></a>`);
+    Idiomorph.morph(initial, `<a href="b" id="x" class="y"></a>`, {
+      callbacks: {
+        beforeAttributeUpdated: (attributeName, node, mutationType) => {
+          calls.push([attributeName, mutationType]);
+        },
+      },
+    });
+    initial.outerHTML.should.equal(`<a href="b" id="x" class="y"></a>`);
+    calls.should.eql([["href", "update"]]);
+  });
+
   it("hooks work as expected", function () {
     let beginSrc = `
             <div>