vue查看某个页面渲染有多少个dom元素_vue3dom个数childnodes

在开发过程中，经常会有卡顿的情况，有时候是Dom树过多造成的卡顿，比如页面涉及到树形列表的时候，此时需要查看当前页面有多少个Dom元素

  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        // 递归函数
        function countNodes(node) { // 计算自身
          var count = 1// 判断是否存在子节点
          if (node.hasChildNodes()) { // 获取子节点
            var cnodes = node.childNodes// 对子节点进行递归统计
            for (var i = 0; i < cnodes.length; i++) {
              count = count + countNodes(cnodes.item(i))
            }
          }
          return count
        }// 统计body的节点数量
        const count = countNodes(document.body)
        console.log('页面总的节点数', count)
      }, 5000)
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19