HTML结构直接影响浏览器DOM构建性能：嵌套过深、标签冗余、语义错位会拖慢首屏渲染并引发重排；应控制节点数量与层级（子元素≤100、嵌套≤6层），善用语义化标签，避免无意义div，优先使用原生交互元素。
HTML结构直接影响浏览器构建DOM树的速度和内存开销——嵌套过深、标签冗余、语义错位，都会拖慢首屏渲染，甚至引发重排（reflow）连锁反应。
控制DOM节点数量与嵌套层级
浏览器解析HTML是单线程顺序进行的，每多一层嵌套、每一个无意义的<div>，都在增加DOM树节点数和解析时间。实测显示：当单个容器子元素超过100个，或嵌套深度超过6层时，DOMContentLoaded事件延迟明显可感。
- 用开发者工具的
Elements面板检查<body>下的直接子节点，避免出现连续5个以上同级<div class="wrapper"> - 把“三层
<div>包一层<section>”改成直接用<section class="card">—— 语义+结构一步到位 - 动态列表（如商品瀑布流）不要一次性插入全部项；用
DocumentFragment批量添加，或按视口分页加载
用对语义化标签，别只图class好写
语义化不是为了SEO或可访问性“加分项”，而是让浏览器更快识别内容区块边界。例如，<main> 会触发浏览器提前为它分配渲染优先级，而一堆 <div id="content"> 则需靠CSS或JS二次判断。
-
<header>和<footer>必须是<body>的直接子元素，否则可能被忽略其语义权重 -
<nav>内部禁止再套<div>做布局——直接用display: flex控制子项即可 - 避免
<section>套<section>超过两层；同一逻辑块内，优先用<article>或<aside>明确角色
警惕“看似合理”的结构陷阱
有些写法在视觉上没问题，但会悄悄延长关键渲染路径。比如用 <table> 布局表单、给按钮加多余 <span> 包裹、或用 <div role="button"> 替代原生 <button>。
立即学习“前端免费学习笔记（深入）”；
-
<table>解析成本远高于flex或grid；即使只用于小范围对齐，也会强制浏览器等待整行闭合才开始渲染 - 所有交互元素（按钮、链接、输入框）必须用原生标签；
role="button"不仅增加ARIA解析负担，还会绕过浏览器内置的焦点管理与键盘行为 -
<img>标签缺失width和height属性时，浏览器无法预留空间，导致图片加载后触发布局抖动（layout shift）
真正影响性能的往往不是某段炫技的CSS，而是开头50行HTML里多出的7个空<div>、2个未闭合的<section>、以及一个本该用<time>却写了<span class="date">的时间标签——这些细节在压缩后仍存在，在解析时无法跳过。
