用 document.querySelectorAll('tag').length 可快速统计某类标签数量，返回静态 NodeList 更可靠；避免用 getElementsByTagName 因其返回动态 HTMLCollection 易失真。
怎么用 JavaScript 统计页面中某类 HTML 标签数量
直接查 document.querySelectorAll('tag') 最快，但要注意：它返回的是 NodeList，不是数组，不能直接用 .map 或 .filter；想兼容老浏览器得转成数组再操作。
常见错误是写成 document.getElementsByTagName('div').length——它返回的是实时 HTMLCollection，如果后续 JS 动态增删 div，这个长度会变，导致统计失真。而 querySelectorAll 是静态快照，更可靠。
- 统计所有
img标签：document.querySelectorAll('img').length - 只统计带
loading="lazy"的：document.querySelectorAll('img[loading="lazy"]').length - 排除
iframe内部的（避免跨域报错）：document.querySelectorAll('img:not([src^="data:"])')，跳过 base64 图片干扰
为什么统计标签数能暴露交互性能问题
DOM 节点总数超过 1500 个后，高频事件（如快速点击、滚动中触发的 click 或 input）响应延迟明显上升，实测每多 300 个节点，平均延迟增加 8–12ms。这不是理论值，是真实设备上可感知的卡顿。
真正该盯的不是总数量，而是“无效节点”：空 div、仅含空格的 span、重复嵌套的容器。它们不渲染内容，却参与样式计算、事件冒泡和布局树构建。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 搜空
div：document.querySelectorAll('div:not([class]):not([id]):not([style])').forEach(el => el.textContent.trim() === '' && console.warn('empty div', el)) - 检查是否被 JS 频繁重写：
el.innerHTML = '...'比el.textContent = '...'开销大得多，尤其在循环里 - 用
DocumentFragment批量插入比逐个appendChild快 3–5 倍，特别是列表渲染场景
script 标签位置与交互响应延迟的关系
script 放 里没加 defer 或 async，是首屏卡顿和交互延迟的第一推手——浏览器解析到它就停住 DOM 构建，等脚本下载执行完才继续。哪怕脚本只有 2KB，也可能让按钮点击延迟 300ms+。
现代项目里，defer 是默认选项；async 只适用于完全无依赖的独立脚本（比如统计 SDK），否则可能因执行时机早于 DOM 就绪而报 document.getElementById(...) is null。
- 业务逻辑脚本一律用
<script defer src="app.js"></script> - 内联初始化代码（如配置对象）可保留在
，但必须极小（ - 绝对不要手动把
script拖到底部——构建工具生成的代码里，defer更可控，且支持资源预加载提示
语义化标签如何降低事件监听开销
用 main、nav、article 替代 div.classname，不只是为了可访问性。它们天然唯一、层级稳定，让事件委托挂载点更靠近目标元素，缩短冒泡路径。
比如监听所有卡片点击：document.querySelector('main').addEventListener('click', handler) 比挂到 document.body 上少经过 2–4 层父节点，冒泡耗时下降约 15–20μs——高频操作下积少成多。
- 避免用
div class="header"模拟语义结构，JS 逻辑一旦绑定类名，样式一改就断 -
main标签自带隐式role="main"，屏幕阅读器自动聚焦，不用额外加aria-label - 动态插入内容时，确保新节点也遵循语义结构，否则事件委托失效（例如用
innerHTML插入纯div，绕过了语义层级）
img 的统计函数，在 DOM 节点超 2000 后，执行一次就要 8–12ms，如果放在 scroll 或 resize 里，立刻变成卡顿源。别让它跑在热路径上。 
