借助Chrome devtool排查内存泄漏的具体应用

• 下面通过一个实例来熟悉借助Chrome devtool排查内存泄漏的具体应用，代码如下

       var myArray = []
      function createNodes() {
        let div
        let i = 100
        /**
          * DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，
          * 将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
            因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。
            因此，使用文档片段通常会带来更好的性能。
          * 
          * */
        let frag = document.createDocumentFragment()
        for (; i > 0; i--){
            div = document.createElement('div')
            div.appendChild(document.createTextNode(i))
            frag.appendChild(div)
        }
        document.body.appendChild(frag)
      }
      function badCode() {
          myArray.push([...Array(1000000).keys()])
          createNodes()
          setTimeout(badCode, 1000)
      }
      badCode()

以上代码递归调用了badCode,这个函数每次向myArray数组中写入新的由1000000项0~1数字组成的新数组，badCode 函数使用全局变量myArray后并没有手动释放内存，垃圾回收机制不会处理myArray，因此导致内存泄漏；同时，badCode函数调用了createNodes函数，每秒会创建100个div节点。

image.png

由上图可以发现，JS Heap和Nodes线随着时间线一直在上升，并没有被垃圾回收机制回收。因此，可以判定这段代码存在较大的内存泄漏风险。如果不知道问题代码的位置，想要找出风险点，那就需要再Chrome Memory标签中，对JS Heap中的每一项，尤其是Size较大的前几项展开调查。

image.png

上图可以明显看出是我们定义的myArray数组不对劲 了。

结语：此篇文章只是简单介绍一下Chrome devtool排查内存泄漏，在实际开发还是视情况而定哈