avoid getAttribute outside hydration

Author: Rich-Harris

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -38,26 +38,30 @@ export function attr_effect(dom, attribute, value) {
 export function attr(dom, attribute, value) {
 	value = value == null ? null : value + '';
 
+	var attributes = (dom.__attributes ??= {});
+
+	if (hydrating) {
+		attributes[attribute] = dom.getAttribute(attribute);
+	}
+
+	if (attributes[attribute] === (attributes[attribute] = value)) return;
+
 	if (DEV) {
 		check_src_in_dev_hydration(dom, attribute, value);
 	}
 
-	if (
-		!hydrating ||
-		(dom.getAttribute(attribute) !== value &&
-			// If we reset those, they would result in another network request, which we want to avoid.
-			// We assume they are the same between client and server as checking if they are equal is expensive
-			// (we can't just compare the strings as they can be different between client and server but result in the
-			// same url, so we would need to create hidden anchor elements to compare them)
-			attribute !== 'src' &&
-			attribute !== 'href' &&
-			attribute !== 'srcset')
-	) {
-		if (value === null) {
-			dom.removeAttribute(attribute);
-		} else {
-			dom.setAttribute(attribute, value);
-		}
+	if (hydrating && (attribute === 'src' || attribute === 'href' || attribute === 'srcset')) {
+		// If we reset these attributes, they would result in another network request, which we want to avoid.
+		// We assume they are the same between client and server as checking if they are equal is expensive
+		// (we can't just compare the strings as they can be different between client and server but result in the
+		// same url, so we would need to create hidden anchor elements to compare them)
+		return;
+	}
+
+	if (value === null) {
+		dom.removeAttribute(attribute);
+	} else {
+		dom.setAttribute(attribute, value);
 	}
 }
 

packages/svelte/src/internal/client/dom/operations.js

@@ -67,6 +67,8 @@ export function init_operations() {
 	text_prototype.__nodeValue = ' ';
 	// @ts-expect-error
 	element_prototype.__className = '';
+	// @ts-expect-error
+	element_prototype.__attributes = null;
 
 	first_child_get = /** @type {(this: Node) => ChildNode | null} */ (
 		// @ts-ignore