perf: improve static content insertion perf

Especially on multiple insertions of the same static node.

fix #3090

packages/runtime-dom/__tests__/nodeOps.spec.ts

@@ -1,4 +1,4 @@
-import { nodeOps } from '../src/nodeOps'
+import { nodeOps, svgNS } from '../src/nodeOps'
 
 describe('runtime-dom: node-ops', () => {
   test('the _value property should be cloned', () => {
@@ -25,4 +25,101 @@ describe('runtime-dom: node-ops', () => {
     expect(option1.selected).toBe(true)
     expect(option2.selected).toBe(true)
   })
+
+  describe('insertStaticContent', () => {
+    test('fresh insertion', () => {
+      const content = `<div>one</div><div>two</div>three`
+      const parent = document.createElement('div')
+      const [first, last] = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        null,
+        false
+      )
+      expect(parent.innerHTML).toBe(content)
+      expect(first).toBe(parent.firstChild)
+      expect(last).toBe(parent.lastChild)
+    })
+
+    test('fresh insertion with anchor', () => {
+      const content = `<div>one</div><div>two</div>three`
+      const existing = `<div>existing</div>`
+      const parent = document.createElement('div')
+      parent.innerHTML = existing
+      const anchor = parent.firstChild
+      const [first, last] = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        anchor,
+        false
+      )
+      expect(parent.innerHTML).toBe(content + existing)
+      expect(first).toBe(parent.firstChild)
+      expect(last).toBe(parent.childNodes[parent.childNodes.length - 2])
+    })
+
+    test('fresh insertion as svg', () => {
+      const content = `<text>hello</text><circle cx="100" cy="100" r="80"></circle>`
+      const parent = document.createElementNS(svgNS, 'svg')
+      const [first, last] = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        null,
+        true
+      )
+      expect(parent.innerHTML).toBe(content)
+      expect(first).toBe(parent.firstChild)
+      expect(last).toBe(parent.lastChild)
+      expect(first.namespaceURI).toMatch('svg')
+      expect(last.namespaceURI).toMatch('svg')
+    })
+
+    test('fresh insertion as svg, with anchor', () => {
+      const content = `<text>hello</text><circle cx="100" cy="100" r="80"></circle>`
+      const existing = `<path></path>`
+      const parent = document.createElementNS(svgNS, 'svg')
+      parent.innerHTML = existing
+      const anchor = parent.firstChild
+      const [first, last] = nodeOps.insertStaticContent!(
+        content,
+        parent,
+        anchor,
+        true
+      )
+      expect(parent.innerHTML).toBe(content + existing)
+      expect(first).toBe(parent.firstChild)
+      expect(last).toBe(parent.childNodes[parent.childNodes.length - 2])
+      expect(first.namespaceURI).toMatch('svg')
+      expect(last.namespaceURI).toMatch('svg')
+    })
+
+    test('cached', () => {
+      const content = `<div>one</div><div>two</div>three`
+
+      const cacheParent = document.createElement('div')
+      const [cachedFirst, cachedLast] = nodeOps.insertStaticContent!(
+        content,
+        cacheParent,
+        null,
+        false
+      )
+
+      const parent = document.createElement('div')
+
+      const [first, last] = nodeOps.insertStaticContent!(
+        ``,
+        parent,
+        null,
+        false,
+        [cachedFirst, cachedLast]
+      )
+
+      expect(parent.innerHTML).toBe(content)
+      expect(first).toBe(parent.firstChild)
+      expect(last).toBe(parent.lastChild)
+
+      expect(first).not.toBe(cachedFirst)
+      expect(last).not.toBe(cachedLast)
+    })
+  })
 })