perf: dirty flag to avoid redundant head updates

unjs · Sep 10, 2023 · de34c67 · de34c67
1 parent 7bb1064
commit de34c67
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/packages/dom/src/renderDOMHead.ts b/packages/dom/src/renderDOMHead.ts
@@ -149,5 +149,6 @@ export async function renderDOMHead<T extends Unhead<any>>(head: T, options: Ren
   // clear all side effects still pending
   Object.values(state.pendingSideEffects).forEach(fn => fn())
   head._dom = state
+  head.dirty = false
   await head.hooks.callHook('dom:rendered', { renders: tags })
 }
diff --git a/packages/schema/src/head.ts b/packages/schema/src/head.ts
@@ -123,6 +123,10 @@ export interface Unhead<Input extends {} = Head> {
    * @internal
    */
   _domUpdatePromise?: Promise<void>
+  /**
+   * @internal
+   */
+  dirty: boolean
 }
 
 export interface DomState {

diff --git a/packages/unhead/src/createHead.ts b/packages/unhead/src/createHead.ts
@@ -61,10 +61,14 @@ export function createHeadCore<T extends {} = Head>(options: CreateHeadOptions =
     ...(options?.plugins || []),
   ]
 
-  const updated = () => hooks.callHook('entries:updated', head)
+  const updated = () => {
+    head.dirty = true
+    hooks.callHook('entries:updated', head)
+  }
   let entryCount = 0
   let entries: HeadEntry<T>[] = []
   const head: Unhead<T> = {
+    dirty: false,
     resolvedOptions: options,
     hooks,
     headEntries() {

diff --git a/test/vue/dom/classes.test.ts b/test/vue/dom/classes.test.ts
@@ -40,6 +40,8 @@ describe('vue dom classes', () => {
 
     isNavActive.value = true
 
+    // wait 100ms
+    await new Promise(resolve => setTimeout(resolve, 100))
     await renderDOMHead(head, { document: dom.window.document })
     expect(dom.serialize()).toMatchInlineSnapshot(`
       "<!DOCTYPE html><html><head>