HTML节点统计器 - 按标签名计数

HTML 标签统计器在多种场景下非常实用：

• SEO 优化：分析页面的语义化标签使用情况，检查标题层级（h1-h6）是否合理，语义标签（article、section、nav）是否恰当使用。
• 代码审查：快速了解页面结构复杂度，发现过度使用 div 嵌套（div soup）等问题。
• 性能分析：DOM 节点数量直接影响页面渲染性能，过多的标签会导致解析和渲染变慢。
• 学习参考：分析优秀网站的 HTML 结构，了解行业常用的标签分布模式。
• 竞品分析：对比竞品页面的标签使用策略，取长补短。

浏览器使用 HTML 解析器将文本转换为 DOM（文档对象模型）树。解析过程包括：

1. 词法分析：将 HTML 文本分解为标签（tag）、属性、文本内容等 token。
2. 语法分析：根据 HTML 规范构建 DOM 树，处理嵌套关系。
3. 容错处理：HTML 解析器非常宽容，会自动修复不规范的标签（如补全缺失的闭合标签）。

本工具使用的 DOMParser API 复用了浏览器内置的 HTML 解析器，因此即使输入不完整的 HTML 片段，也能得到合理的 DOM 结构用于统计。

HTML5 引入了丰富的语义化标签，帮助搜索引擎和辅助技术理解页面结构：

• <header> - 页眉或区块头部
• <nav> - 导航链接区域
• <main> - 页面主要内容（每个页面仅一个）
• <article> - 独立的内容单元
• <section> - 文档中的章节
• <aside> - 侧边栏或补充内容
• <footer> - 页脚信息
• <figure> 和 <figcaption> - 图文组合

使用语义化标签替代无意义的 <div> 可以显著提升 SEO 排名和可访问性。

根据 Google 和性能专家的建议：

• 理想范围：DOM 节点总数在 1,500 个以内为最佳。
• 可接受范围：1,500 ~ 3,000 个节点，需要注意优化。
• 需要优化：超过 3,000 个节点，页面加载和交互性能可能受影响。
• 严重问题：超过 5,000 个节点，在低端设备上会出现明显卡顿。

过多的 DOM 节点会导致：CSS 样式计算变慢、布局重排耗时增加、JavaScript 遍历效率降低、内存占用增大。使用本工具可以快速评估页面的 DOM 复杂度。

减少标签嵌套（尤其是 div 嵌套）的方法：

• 使用 CSS Grid 或 Flexbox 替代多层嵌套的布局容器。
• 利用 CSS :before / :after 伪元素替代装饰性标签。
• 使用语义化标签替代通用 <div> 和 <span>。
• 检查是否存在冗余的包裹层（wrapper），合并或删除不必要的容器。
• 使用 HTML 片段（template）和 JavaScript 动态渲染来减少初始 DOM。

定期使用本工具统计页面标签，可以及时发现嵌套过深或标签冗余的问题。