页面中组件的计数概念递归问题

通过深度优先搜索（DFS）遍历页面的DOM树，记录已经遍历过的节点及其对应的组件类型。对于每个已经遍历过的节点，在其子节点中搜索并记录每个出现的组件类型及其出现的次数。最后统计所有已经出现的组件类型及其对应的总数量。

示例代码如下：

function countComponents(node, components) {
  // 记录已经遍历过的节点及其对应的组件类型
  if (node.nodeType === Node.ELEMENT_NODE) {
    const componentType = node.getAttribute('data-component-type');
    if (componentType) {
      components[componentType] = (components[componentType] || 0) + 1;
    }
  }
  
  // 遍历子节点
  node.childNodes.forEach(childNode => {
    countComponents(childNode, components);
  });
  
  return components;
}

// 调用示例
const page = document.getElementsByTagName('body')[0];
const components = countComponents(page, {});
console.log(components);

在上述示例代码中，我们使用了data-component-type属性来标识每个节点所对应的组件类型。实际开发中，可能需要根据实际情况修改属性名称或使用其他方式标识组件类型。