语义标签提升js事件监听稳定性，因main、nav等天然唯一且层级可预测，避免类名失效或匹配歧义；其隐式aria role增强无障碍支持，事件委托挂载更精准，减少冒泡开销。
HTML结构重组不是为了“看起来更现代”，而是为了让浏览器更快定位、渲染和响应交互——结构一乱，JS事件委托失效、CSS选择器变慢、无障碍焦点顺序错乱，性能问题就藏在标签嵌套里。
用 main、nav 替代 div 类名时，为什么 JS 事件监听反而更稳？
语义标签本身不提速，但它们天然具备可预测的 DOM 层级和唯一性。比如 main 在整个页面中只能出现一次，nav 通常只有一到两个，这让你写 document.querySelector('main') 比 document.querySelector('.content-wrapper') 更可靠——后者可能匹配多个、或因类名拼写/覆盖/动态添加而失效。
- 避免用
div+ 类名模拟语义结构（如<div class="header">），否则 JS 需依赖 CSS 类，一改样式就断逻辑 <li>语义标签自带隐式 ARIA role（如 <code>nav对应role="navigation"），屏幕阅读器和键盘导航能自动识别，不用额外加aria-label - 事件委托挂载在
main上比挂载在body上更精准，减少冒泡路径长度和误触发概率 - 原结构：
<div class="row"><div class="col"><div class="card">...</div></div></div>→ 三层嵌套 - 优化后：
<section class="cards-grid"><article>...</article></section>→ 一层，用grid-template-columns控制列数 - 注意：不要为用
grid而强行拆分语义——比如把一个完整新闻模块硬拆成grid-area多块，破坏内容连贯性 - 检查开发者工具的 Elements 面板，用
Ctrl+F搜<div></div>或仅含空格的div，这类节点几乎全是冗余 - 用
innerHTML动态插入内容时，避免先写空容器再填内容（如<div id="list"></div>），改用DocumentFragment批量插入 - 服务端模板或组件框架中，警惕条件渲染残留的“幽灵节点”——比如
v-if="false"后仍留着注释或占位div - 把非首屏内容（如折叠面板、分页第二页、隐藏弹窗）从初始 HTML 中移除，用 JS 按需注入，而不是靠
display: none隐藏 - 若必须保留结构，至少用
hidden属性替代style="display:none"，它能阻止浏览器为该元素计算布局和绘制 - 慎用
loading="lazy"的图片外，也要考虑fetch()加载的 HTML 片段——它们的结构质量直接影响后续 JS 执行效率
flex 和 grid 布局对 HTML 结构扁平化的实际影响
用 float 或绝对定位时，常靠多层 div 控制位置和清除浮动；而 display: flex 或 display: grid 让父容器直接控制子元素排列，多数场景下可砍掉 1–2 层包裹。
为什么删掉一个空 div 就能让点击延迟下降 20ms？
DOM 节点越多，浏览器构建渲染树、计算样式、处理事件冒泡的成本越高。实测显示：单页 DOM 节点超 1500 个后，高频交互（如拖拽、滚动中快速点击）开始出现可感知卡顿；节点每增加 300 个，平均事件响应延迟上升约 8–12ms。
内联关键 CSS 后，HTML 结构要不要同步调整？
要。内联 CSS 通常只包含首屏样式，如果 HTML 结构仍按“全量加载”设计（比如把所有 tab 内容都塞进 DOM），浏览器仍需解析、构建、布局那些不可见区块，浪费 CPU 和内存。
真正卡顿的根源，往往不在 JS 算法多复杂，而在 HTML 把浏览器带进了“解析-构建-布局-绘制-合成”的死循环里。结构越干净，浏览器越省心，交互才越跟手。
