chore: perf tweaks for actions/styles/classes

- check if we really need to add/remove the class (calling `includes` first is cheaper than always setting/removing it)
- check if we really need to update a style (calling `getPropertyValue/setProperty` is expensive)
- check if we should call the action's update function (this is not only a perf tweak but also a correctness fix)

closes #12652

Author: dummdidumm

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

@@ -1,5 +1,6 @@
 /** @import { ActionPayload } from '#client' */
 import { effect, render_effect } from '../../reactivity/effects.js';
+import { safe_not_equal } from '../../reactivity/equality.js';
 import { deep_read_state, untrack } from '../../runtime.js';
 
 /**
@@ -15,6 +16,8 @@ export function action(dom, action, get_value) {
 
 		if (get_value && payload?.update) {
 			var inited = false;
+			/** @type {P} */
+			var prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run
 
 			render_effect(() => {
 				var value = get_value();
@@ -24,7 +27,8 @@ export function action(dom, action, get_value) {
 				// together with actions and mutation, it wouldn't notice the change without a deep read.
 				deep_read_state(value);
 
-				if (inited) {
+				if (inited && safe_not_equal(prev, value)) {
+					prev = value;
 					/** @type {Function} */ (payload.update)(value);
 				}
 			});

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

@@ -107,8 +107,10 @@ function to_class(value) {
  */
 export function toggle_class(dom, class_name, value) {
 	if (value) {
+		if (dom.classList.contains(class_name)) return;
 		dom.classList.add(class_name);
 	} else {
+		if (!dom.classList.contains(class_name)) return;
 		dom.classList.remove(class_name);
 	}
 }

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

@@ -5,13 +5,19 @@
  * @param {boolean} [important]
  */
 export function set_style(dom, key, value, important) {
-	const style = dom.style;
-	const prev_value = style.getPropertyValue(key);
+	// @ts-expect-error
+	var attributes = (dom.__attributes ??= {});
+
+	if (attributes['style-' + key] === value) {
+		return;
+	}
+
+	attributes['style-' + key] = value;
+	var style = dom.style;
+
 	if (value == null) {
-		if (prev_value !== '') {
-			style.removeProperty(key);
-		}
-	} else if (prev_value !== value) {
+		style.removeProperty(key);
+	} else {
 		style.setProperty(key, value, important ? 'important' : '');
 	}
 }