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

packages/blaze/attrs.js

@@ -273,10 +273,16 @@ if (Meteor.isClient) {
   anchorForNormalization = document.createElement('A');
 }
 
+const _protocolCache = new Map(); // Simple cache
 const getUrlProtocol = function (url) {
+  if (_protocolCache.has(url)) {
+    return _protocolCache.get(url);
+  }
   if (Meteor.isClient) {
     anchorForNormalization.href = url;
-    return (anchorForNormalization.protocol || "").toLowerCase();
+    const protocol = (anchorForNormalization.protocol || "").toLowerCase();
+    _protocolCache.set(url, protocol);
+    return protocol;
   } else {
     throw new Error('getUrlProtocol not implemented on the server');
   }
@@ -352,18 +358,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 +379,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];
+      }
     }
   })
 };

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.
 
-[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

test-app/.meteor/release

@@ -1 +1 @@
-METEOR@3.0-rc.2
+METEOR@3.3-beta.1

test-app/.meteor/versions

@@ -1,70 +1,64 @@
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]

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": [