fix: avoid FOUC and deduplication optimization in style-loader insert (dev)#321
Open
Antamansid wants to merge 1 commit into
Open
fix: avoid FOUC and deduplication optimization in style-loader insert (dev)#321Antamansid wants to merge 1 commit into
Antamansid wants to merge 1 commit into
Conversation
DakEnviy
approved these changes
May 21, 2026
Contributor
DakEnviy
left a comment
There was a problem hiding this comment.
Great optimization, thank you! Actually, it's O(n) now against O(n^2)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The custom
insertforstyle-loader(dev only) deduped<style>tags by comparinginnerHTMLagainst every existing tag on each insertion — O(n²) over tag count. With ~500 style files this is ~128k full-string comparisons.It also deferred insertion via
setTimeout(a macrotask), so the browser could paint the unstyled DOM before styles applied. This produced a visible flash of unstyled content (FOUC) in Firefox; Chrome happened not to show it.Fix
queueMicrotaskinstead ofsetTimeout. Microtasks drain at the end of the current task, before the browser paints, so styles apply without a flash. The deferral is still required becausestyle-loaderpasses an empty<style>element and fills its content only afterinsertreturns.innerHTMLscan with an O(n) lookup: store a content hash in adata-ab-styleidattribute and find duplicates viaquerySelector. The attribute lives on the tag, so it reflects DOM removals (HMR) automatically. A finalinnerHTMLequality check guards against the rare hash collision, keeping dedup behavior identical.Dev-only change; production uses
MiniCssExtractPluginand is unaffected.