From 7e4064c87595dc1b7e645ae78c17795473c071b0 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Wed, 13 Aug 2025 14:28:46 +0200 Subject: [PATCH 1/2] perf: don't reschedule the whole batch on writes This makes flushing effects much faster in scenarios where there's a lot of effects and many of the write to state. We added this "bail and reschedule" mechanism mainly to prevent subsequent effects from being called when a prior effect execution did e.g. cause an if block to become false and the effect about to run next therefore being destroyed. This change addresses that issue by flushing the newly created batch right away, but only executing its branches. Through this we also get rid of the false-positive loop protection error. The one downside is that effect execution ordering is slightly different: Only things scheduled within the current batch are executed in order, all new (pre-)effects will run afterwards. The worst thing that can happen as a result is rerunning render or user effects more often than they need to, but I expect this to be minimal in comparison to the perf wins. Fixes #16548 --- .../src/internal/client/reactivity/batch.js | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index 123bc95d163a..ca92214a228e 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/packages/svelte/src/internal/client/reactivity/batch.js @@ -173,10 +173,10 @@ export class Batch { skipped_effects = new Set(); /** - * * @param {Effect[]} root_effects + * @param {boolean} block_effects_only */ - process(root_effects) { + process(root_effects, block_effects_only = false) { queued_root_effects = []; previous_batch = null; @@ -187,7 +187,7 @@ export class Batch { // if there are multiple batches, we are 'time travelling' — // we need to undo the changes belonging to any batch // other than the current one - if (batches.size > 1) { + if (batches.size > (block_effects_only ? 2 : 1)) { current_values = new Map(); batch_deriveds = new Map(); @@ -209,7 +209,12 @@ export class Batch { } for (const root of root_effects) { - this.#traverse_effect_tree(root); + this.#traverse_effect_tree(root, block_effects_only); + } + + if (block_effects_only) { + queued_root_effects = root_effects; + return; } // if we didn't start any new async work, and no async work @@ -276,9 +281,12 @@ export class Batch { * Traverse the effect tree, executing effects or stashing * them for later execution as appropriate * @param {Effect} root + * @param {boolean} block_effects_only */ - #traverse_effect_tree(root) { - root.f ^= CLEAN; + #traverse_effect_tree(root, block_effects_only) { + if (!block_effects_only) { + root.f ^= CLEAN; + } var effect = root.first; @@ -290,7 +298,11 @@ export class Batch { var skip = is_skippable_branch || (flags & INERT) !== 0 || this.skipped_effects.has(effect); if (!skip && effect.fn !== null) { - if (is_branch) { + if (block_effects_only) { + if ((flags & BLOCK_EFFECT) !== 0 && (flags & CLEAN) === 0) { + update_effect(effect); + } + } else if (is_branch) { effect.f ^= CLEAN; } else if ((flags & CLEAN) === 0) { if ((flags & EFFECT) !== 0) { @@ -396,6 +408,12 @@ export class Batch { this.deactivate(); } + flush_block_effects() { + if (queued_root_effects.length > 0) { + this.process(queued_root_effects, true); + } + } + /** * Append and remove branches to/from the DOM */ @@ -626,14 +644,10 @@ function flush_queued_effects(effects) { current_batch.current.size > n && (effect.f & USER_EFFECT) !== 0 ) { - break; + current_batch.flush_block_effects(); } } } - - while (i < length) { - schedule_effect(effects[i++]); - } } /** From e11e381fb6d7536ddfc197a538c3aed321b6071d Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 15 Aug 2025 13:54:11 +0200 Subject: [PATCH 2/2] fix --- .../src/internal/client/reactivity/batch.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index ca92214a228e..c462d611e079 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/packages/svelte/src/internal/client/reactivity/batch.js @@ -184,9 +184,12 @@ export class Batch { /** @type {Map | null} */ var current_values = null; - // if there are multiple batches, we are 'time travelling' — + // If there are multiple batches, we are 'time travelling' — // we need to undo the changes belonging to any batch - // other than the current one + // other than the current one. + // In case of block_effects_only we've already created a new batch + // due to an effect writing to a source, and we're eagerly flushing + // that batch while the old one is still active, hence > 2 in that case. if (batches.size > (block_effects_only ? 2 : 1)) { current_values = new Map(); batch_deriveds = new Map(); @@ -214,6 +217,7 @@ export class Batch { if (block_effects_only) { queued_root_effects = root_effects; + this.#commit(); return; } @@ -304,12 +308,15 @@ export class Batch { } } else if (is_branch) { effect.f ^= CLEAN; + } else if ((flags & EFFECT) !== 0) { + // Push into effects regardly of dirty status, so that one effect making + // a subsequent effect dirty will not cause it to be postponed until the next flush + this.#effects.push(effect); + } else if (async_mode_flag && (flags & RENDER_EFFECT) !== 0) { + // Same as for #effects + this.#render_effects.push(effect); } else if ((flags & CLEAN) === 0) { - if ((flags & EFFECT) !== 0) { - this.#effects.push(effect); - } else if (async_mode_flag && (flags & RENDER_EFFECT) !== 0) { - this.#render_effects.push(effect); - } else if ((flags & ASYNC) !== 0) { + if ((flags & ASYNC) !== 0) { var effects = effect.b?.pending ? this.#boundary_async_effects : this.#async_effects; effects.push(effect); } else if (is_dirty(effect)) { @@ -410,6 +417,7 @@ export class Batch { flush_block_effects() { if (queued_root_effects.length > 0) { + old_values.clear(); this.process(queued_root_effects, true); } }