Input标签在Chrome内无法正常GC问题

2020-07-22 本文已影响0人这名字真不对

事情的经过

前段时间群里的老哥提出了一个疑问

image.png

测试

根据上述的情况，我跟群里老哥做了一个demo来测试问题出在哪

<!DOCTYPE html>
<html>
<body>
  <div id="app">
    <button id="create-input">Create input</button>
    <button id="destroy-input">Destroy input</button>
    <br>
    <button id="create-div">Create div</button>
    <button id="destroy-div">Destroy div</button>
  </div>
  <script>
    const getId = (str) => document.getElementById(str)

    function createTest(elem) {
      const CreateBtn = getId(`create-${elem}`)
      const DestroyBtn = getId(`destroy-${elem}`)

      const onAddClick = () => {
        let input = document.createElement(elem)
        input.id = elem
        // 给dom绑定大量对象
        input._a_ = new Array(1000000).fill('1')
        document.body.appendChild(input)
        input = null
      }
      const onRemoveClick = () => {
        let input = getId(elem)
        if (input) {
          input.parentNode.removeChild(input)
        }
        input = null
      }
      CreateBtn.addEventListener('click', onAddClick)
      DestroyBtn.addEventListener('click', onRemoveClick)
    }
    createTest('div')
    createTest('input')
  </script>
</body>
</html>

创建input/div并手动销毁的演示，操作完input后需要刷新页面重置当前window的内存