0

I am considering using object pooling of DOM nodes. When a DOM node is done being used, it would be put into a pool. I have something like this currently.

function removeNativeElement(virtualElement, store) {
  let stack = [virtualElement]
  let els = []
  while (stack.length) {
    const node = stack.shift()
    const el = node.nativeElement
    // remove from parent
    el.parentNode.removeChild(el)
    // remove event listeners
    node.handlers.forEach(({ type, handler }) => {
      el.removeEventListener(type, handler)
    })
    el.children.forEach(child => {
      stack.push(child)
    })
    els.push(el)
  }
  els.forEach(el => {
    // clear out any remaining text
    el.innerHTML = ''
    addNativeElementToPool(el)
  })
}

function addNativeElementToPool(el, store) {
  const pool = store.pool[el.tagName] = store.pool[el.tagName] || []
  if (pool.length > store.maxPoolSize) {
    return
  }
  pool.push(el)
}

But what about resetting the attributes and style properties, in an efficient way, how do you do that? The goal is to make putting object into a pool not be overburdeningly expensive.

Lance
  • 75,200
  • 93
  • 289
  • 503
  • Doesn't that mostly depend on how your DOM element attributes are implemented in the data structure? – Pointy Nov 11 '21 at 16:24
  • No I don't think so, I just need to know how much work I need to do on the native element. Do I even need to remove the styles? Class names? Attributes? Can it be done in a tricky/efficient way? – Lance Nov 11 '21 at 16:26
  • I saw `elem.replaceWith(elem.cloneNode(true));`, but that seems to defeat the purpose of using a pool haha. – Lance Nov 11 '21 at 16:27
  • Assume anything you want about my virtualElement if you'd like. – Lance Nov 11 '21 at 16:28

0 Answers0