♻️ (blaze/attrs): optimize attribute updates by caching last values to avoid

wreiske · wreiske · commit 22e0df1bad9e · 2025-05-21T21:27:38.000-07:00
redundant DOM updates and ensure handlers are cleaned up properly
diff --git a/packages/blaze/attrs.js b/packages/blaze/attrs.js
@@ -352,18 +352,18 @@ ElementAttributesUpdater.prototype.update = function(newAttrs) {
   const elem = this.elem;
   const handlers = this.handlers;
 
+  // Cache for last set values to avoid redundant DOM updates
+  if (!this._lastValues) this._lastValues = {};
+  const lastValues = this._lastValues;
+
   Object.getOwnPropertyNames(handlers).forEach((k) => {
     if (!has(newAttrs, k)) {
-      // remove attributes (and handlers) for attribute names
-      // that don't exist as keys of `newAttrs` and so won't
-      // be visited when traversing it.  (Attributes that
-      // exist in the `newAttrs` object but are `null`
-      // are handled later.)
       const handler = handlers[k];
       const oldValue = handler.value;
       handler.value = null;
       handler.update(elem, oldValue, null);
       delete handlers[k];
+      delete lastValues[k];
     }
   })
 
@@ -373,19 +373,24 @@ ElementAttributesUpdater.prototype.update = function(newAttrs) {
     const value = newAttrs[k];
     if (!has(handlers, k)) {
       if (value !== null) {
-        // make new handler
         handler = Blaze._makeAttributeHandler(elem, k, value);
         handlers[k] = handler;
       }
     } else {
       handler = handlers[k];
       oldValue = handler.value;
     }
-    if (oldValue !== value) {
+    // Only update if value has changed (shallow equality or string compare)
+    const last = lastValues[k];
+    const shouldUpdate = last !== value && String(last) !== String(value);
+    if (shouldUpdate) {
       handler.value = value;
       handler.update(elem, oldValue, value);
-      if (value === null)
+      lastValues[k] = value;
+      if (value === null) {
         delete handlers[k];
+        delete lastValues[k];
+      }
     }
   })
 };
diff --git a/test-app/.meteor/packages b/test-app/.meteor/packages
@@ -4,16 +4,16 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.5.2-rc300.2             # Packages every Meteor app needs to have
-mobile-experience@1.1.2-rc300.2       # Packages for a great mobile UX
-mongo@2.0.0-rc300.2                   # The database Meteor supports right now
-static-html@1.3.3-rc300.2             # Define static page content in .html files
-reactive-var@1.0.13-rc300.2            # Reactive variable for tracker
-tracker@1.3.4-rc300.2                 # Meteor's client-side reactive programming library
+meteor-base@1.5.2             # Packages every Meteor app needs to have
+mobile-experience@1.1.2       # Packages for a great mobile UX
+mongo@2.1.2-beta330.1                   # The database Meteor supports right now
+static-html@1.4.0             # Define static page content in .html files
+reactive-var@1.0.13            # Reactive variable for tracker
+tracker@1.3.4                 # Meteor's client-side reactive programming library
 
-standard-minifier-css@1.9.3-rc300.2   # CSS minifier run for production mode
-standard-minifier-js@3.0.0-rc300.2    # JS minifier run for production mode
-es5-shim@4.8.1-rc300.2                # ECMAScript 5 compatibility for older browsers
-ecmascript@0.16.9-rc300.2              # Enable ECMAScript2015+ syntax in app code
-typescript@5.4.3-rc300.2              # Enable TypeScript syntax in .ts and .tsx modules
-shell-server@0.6.0-rc300.2            # Server-side component of the `meteor shell` command
+standard-minifier-css@1.9.3   # CSS minifier run for production mode
+standard-minifier-js@3.1.0-beta330.1    # JS minifier run for production mode
+es5-shim@4.8.1                # ECMAScript 5 compatibility for older browsers
+ecmascript@0.16.11-beta330.1              # Enable ECMAScript2015+ syntax in app code
+typescript@5.6.3              # Enable TypeScript syntax in .ts and .tsx modules
+shell-server@0.6.1            # Server-side component of the `meteor shell` command
diff --git a/test-app/.meteor/release b/test-app/.meteor/release
@@ -1 +1 @@
-METEOR@3.0-rc.2
+METEOR@3.3-beta.1
diff --git a/test-app/.meteor/versions b/test-app/.meteor/versions
@@ -1,70 +1,64 @@
-allow-deny@2.0.0-rc300.2
-autoupdate@2.0.0-rc300.2
-babel-compiler@7.11.0-rc300.2
-babel-runtime@1.5.2-rc300.2
-base64@1.0.13-rc300.2
-binary-heap@1.0.12-rc300.2
-blaze-tools@2.0.0-rc300.2
-boilerplate-generator@2.0.0-rc300.2
-caching-compiler@2.0.0-rc300.2
-caching-html-compiler@2.0.0-rc300.2
-callback-hook@1.6.0-rc300.2
-check@1.4.2-rc300.2
-core-runtime@1.0.0-rc300.2
-ddp@1.4.2-rc300.2
-ddp-client@3.0.0-rc300.2
-ddp-common@1.4.1-rc300.2
-ddp-server@3.0.0-rc300.2
-diff-sequence@1.1.3-rc300.2
-dynamic-import@0.7.4-rc300.2
-ecmascript@0.16.9-rc300.2
-ecmascript-runtime@0.8.2-rc300.2
-ecmascript-runtime-client@0.12.2-rc300.2
-ecmascript-runtime-server@0.11.1-rc300.2
-ejson@1.1.4-rc300.2
-es5-shim@4.8.1-rc300.2
-facts-base@1.0.2-rc300.2
-fetch@0.1.5-rc300.2
-geojson-utils@1.0.12-rc300.2
-hot-code-push@1.0.5-rc300.2
-html-tools@2.0.0-rc300.2
-htmljs@2.0.0-rc300.2
-id-map@1.2.0-rc300.2
-inter-process-messaging@0.1.2-rc300.2
-launch-screen@2.0.1-rc300.2
-logging@1.3.5-rc300.2
-meteor@2.0.0-rc300.2
-meteor-base@1.5.2-rc300.2
-minifier-css@2.0.0-rc300.2
-minifier-js@3.0.0-rc300.2
-minimongo@2.0.0-rc300.2
-mobile-experience@1.1.2-rc300.2
-mobile-status-bar@1.1.1-rc300.2
-modern-browsers@0.1.11-rc300.2
-modules@0.20.1-rc300.2
-modules-runtime@0.13.2-rc300.2
-mongo@2.0.0-rc300.2
-mongo-decimal@0.1.4-beta300.7
-mongo-dev-server@1.1.1-rc300.2
-mongo-id@1.0.9-rc300.2
-npm-mongo@4.16.2-rc300.2
-ordered-dict@1.2.0-rc300.2
-promise@1.0.0-rc300.2
-random@1.2.2-rc300.2
-react-fast-refresh@0.2.9-rc300.2
-reactive-var@1.0.13-rc300.2
-reload@1.3.2-rc300.2
-retry@1.1.1-rc300.2
-routepolicy@1.1.2-rc300.2
-shell-server@0.6.0-rc300.2
-socket-stream-client@0.5.3-rc300.2
-spacebars-compiler@2.0.0-rc300.2
-standard-minifier-css@1.9.3-rc300.2
-standard-minifier-js@3.0.0-rc300.2
-static-html@1.3.3-rc300.2
-templating-tools@2.0.0-rc300.2
-tracker@1.3.4-rc300.2
-typescript@5.4.3-rc300.2
-underscore@1.6.2-rc300.2
-webapp@2.0.0-rc300.2
-webapp-hashing@1.1.2-rc300.2
+allow-deny@2.1.0
+autoupdate@2.0.1-beta330.1
+babel-compiler@7.12.0-beta330.1
+babel-runtime@1.5.2
+base64@1.0.13
+binary-heap@1.0.12
+boilerplate-generator@2.0.1-beta330.1
+caching-compiler@2.0.1
+callback-hook@1.6.0
+check@1.4.4
+core-runtime@1.0.0
+ddp@1.4.2
+ddp-client@3.1.1-beta330.1
+ddp-common@1.4.4
+ddp-server@3.1.2
+diff-sequence@1.1.3
+dynamic-import@0.7.4
+ecmascript@0.16.11-beta330.1
+ecmascript-runtime@0.8.3
+ecmascript-runtime-client@0.12.3
+ecmascript-runtime-server@0.11.1
+ejson@1.1.5-beta330.1
+es5-shim@4.8.1
+facts-base@1.0.2
+fetch@0.1.6
+geojson-utils@1.0.12
+hot-code-push@1.0.5
+id-map@1.2.0
+inter-process-messaging@0.1.2
+launch-screen@2.0.1
+logging@1.3.6
+meteor@2.1.1-beta330.1
+meteor-base@1.5.2
+minifier-css@2.0.1
+minifier-js@3.0.1
+minimongo@2.0.2
+mobile-experience@1.1.2
+mobile-status-bar@1.1.1
+modern-browsers@0.2.2-beta330.1
+modules@0.20.3
+modules-runtime@0.13.2
+mongo@2.1.2-beta330.1
+mongo-decimal@0.2.0
+mongo-dev-server@1.1.1
+mongo-id@1.0.9
+npm-mongo@6.10.2
+ordered-dict@1.2.0
+promise@1.0.0
+random@1.2.2
+react-fast-refresh@0.2.9
+reactive-var@1.0.13
+reload@1.3.2
+retry@1.1.1
+routepolicy@1.1.2
+shell-server@0.6.1
+socket-stream-client@0.6.1-beta330.1
+standard-minifier-css@1.9.3
+standard-minifier-js@3.1.0-beta330.1
+static-html@1.4.0
+static-html-tools@1.0.0
+tracker@1.3.4
+typescript@5.6.3
+webapp@2.0.7-beta330.1
+webapp-hashing@1.1.2
diff --git a/test-app/package.json b/test-app/package.json
@@ -15,13 +15,16 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.23.5",
+    "@babel/runtime": "^7.27.1",
     "jquery": "^3.7.1",
-    "meteor-node-stubs": "^1.2.7",
-    "puppeteer": "^10.4.0"
+    "meteor-node-stubs": "^1.2.17",
+    "puppeteer": "^24.8.2"
+  },
+  "meteor": {
+    "modern": true
   },
   "devDependencies": {
-    "@quave/eslint-config-quave": "^1.0.7"
+    "@quave/eslint-config-quave": "^3.0.0"
   },
   "eslintConfig": {
     "extends": [

-Original file line number
+Diff line change
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 -[email protected]-rc300.2             # Packages every Meteor app needs to have
 -[email protected]-rc300.2       # Packages for a great mobile UX
 -mongo@2.0.0-rc300.2                   # The database Meteor supports right now
 -static-html@1.3.3-rc300.2             # Define static page content in .html files
 -[email protected]-rc300.2            # Reactive variable for tracker
 -[email protected]-rc300.2                 # Meteor's client-side reactive programming library
 +[email protected]             # Packages every Meteor app needs to have
 +[email protected]       # Packages for a great mobile UX
 +mongo@2.1.2-beta330.1                   # The database Meteor supports right now
 +static-html@1.4.0             # Define static page content in .html files
 +[email protected]            # Reactive variable for tracker
 +[email protected]                 # Meteor's client-side reactive programming library
 -[email protected]-rc300.2   # CSS minifier run for production mode
 -standard-minifier-js@3.0.0-rc300.2    # JS minifier run for production mode
 -[email protected]-rc300.2                # ECMAScript 5 compatibility for older browsers
 -[email protected].9-rc300.2              # Enable ECMAScript2015+ syntax in app code
 -typescript@5.4.3-rc300.2              # Enable TypeScript syntax in .ts and .tsx modules
 -[email protected].0-rc300.2            # Server-side component of the `meteor shell` command
 +[email protected]   # CSS minifier run for production mode
 +standard-minifier-js@3.1.0-beta330.1    # JS minifier run for production mode
 +[email protected]                # ECMAScript 5 compatibility for older browsers
 +[email protected].11-beta330.1              # Enable ECMAScript2015+ syntax in app code
 +typescript@5.6.3              # Enable TypeScript syntax in .ts and .tsx modules
 +[email protected].1            # Server-side component of the `meteor shell` command