Be lazy with updating the DOM

davidgilbertson · Jul 23, 2018 · ed27063 · ed27063
1 parent dc464fb
commit ed27063
Showing 1 changed file with 55 additions and 20 deletions.
diff --git a/app/data/store.js b/app/data/store.js
@@ -206,25 +206,43 @@ const store = {
 
     Object.assign(item, data); // gasp, mutability
 
+    if (saveToDisk) {
+      diskStore.setItem(item.id, data);
+    }
+
     if (!updateDom) return;
 
     const nextItemState = serializeItemState(item);
+    this.updateItemDom(item, prevItemState !== nextItemState, scoreChanged, options);
+  },
 
+  updateItemDom(item, renderItem, renderScore, options = {}) {
     // potentially trigger a re-render of the item
-    if (item.visible && prevItemState !== nextItemState) {
+    if (item.visible && renderItem) {
       this.triggerListener(item.id); // TODO (davidg): `ROW-${item.id}`
     }
 
     // potentially trigger a re-render of the score bar
-    if (scoreChanged) {
-      if (saveToDisk) diskStore.setItem(item.id, data);
-
-      if (this.selectedItem && this.selectedItem.id === idOrItem.id) {
+    if (renderScore) {
+      if (this.selectedItem && this.selectedItem.id === item.id) {
         this.triggerListener(EVENTS.SCORE_CHANGED); // updates the score bar
       }
     }
   },
 
+  updateDomNowAndLater(items, func, batch) {
+    const visible = items.filter((item) => item.visible);
+    const invisible = items.filter((item) => !item.visible);
+
+    visible.forEach(func);
+
+    for (let i = 0; i < invisible.length / batch; i++) {
+      requestAnimationFrame(() => {
+        invisible.slice(i*batch, (i+1)*batch).forEach(func);
+      });
+    }
+  },
+
   updateScore(id, scoreKey, options = {}) {
     const item = this.getItem(id);
     if (!item) return;
@@ -237,29 +255,46 @@ const store = {
 
     this.updateItem(item, { scoreKey }, options);
 
-    const updateChildren = (parent, inheritRule) => {
-      const children = this.getChildrenOf(parent.id);
-      if (!children) return;
+    const inheritRule = this.computeInheritRule(scoreKey, oldScoreKey);
 
-      children.forEach((child) => {
-        if (inheritRule[0](child)) {
-          this.updateItem(child, { scoreKey: inheritRule[1] }, options);
-        }
+    if (inheritRule) {
+      const dirtyChildren = [];
 
-        updateChildren(child, inheritRule);
-      });
-    };
+      const updateChildren = (parent, test) => {
+        const children = this.getChildrenOf(parent.id);
+        if (!children) return;
 
-    const inheritRule = this.computeInheritRule(scoreKey, oldScoreKey);
+        children.forEach((child) => {
+          if (test(child)) {
+            dirtyChildren.push(child);
+          }
 
-    if (inheritRule) {
-      updateChildren(item, inheritRule);
+          updateChildren(child, test);
+        });
+      };
+
+      updateChildren(item, inheritRule[0]);
+
+      const optionsNoDom = Object.assign({}, options);
+      optionsNoDom.updateDom = false;
+
+      const updateChild = (child) => {
+        this.updateItem(child, { scoreKey: inheritRule[1] }, optionsNoDom);
+      };
+      const updateChildDom = (child) => {
+        this.updateItemDom(child, true, true, options);
+      };
+
+      dirtyChildren.forEach(updateChild);
+      this.updateDomNowAndLater(dirtyChildren, updateChildDom, 50);
     }
 
     if (updateDom) {
-      updatedItems.forEach((updatedItem) => {
+      const updateItem = (updatedItem) => {
         this.triggerListener(`PIE-${updatedItem.id}`);
-      });
+      };
+
+      this.updateDomNowAndLater(updatedItems, updateItem, 50);
     }
   },