html结构本身会拖慢页面渲染，典型表现为首屏慢、滚动掉帧、dom节点超2000个；诱因包括深层div嵌套、未设宽高的img、滥用table、残留display:none模块及冗余空格注释。
怎么判断HTML本身在拖慢页面渲染
网页卡顿不一定是JS或CSS的问题，很多情况下是HTML结构直接导致浏览器解析慢、重排频繁、内存占用高。最典型的信号是：首屏内容出来得慢，但Network面板显示HTML已加载完成；滚动时掉帧，DevTools的“Rendering”标签页里频繁出现Layout或Paint；或者用document.querySelectorAll('*').length查出DOM节点超2000个——这已经超出轻量级页面的合理范围。
常见诱因包括：<div>嵌套过深（>6层）、大量未设置<code>width/height的<img>、滥用<table>布局、残留的<code>display: none但仍在DOM里的模块、以及无意义的空格/换行/注释堆积。
删掉哪些HTML代码能立刻减轻卡顿
不是所有“看起来没用”的代码都该删，关键是识别真正干扰渲染流程的部分：
- 移除所有
<!-- ... -->注释——它们不参与渲染，但会增加HTML解析时间和内存占用，尤其在构建工具未压缩时； - 删除连续空行和行首/行尾多余空格，特别是模板引擎生成的HTML里常有整段缩进空格，单个空格虽小，但100个
<div>每行多4个空格，就多出400字节；<li>把<code>type="text/css"、type="text/javascript"这类冗余属性全去掉，HTML5默认就是这些类型，留着只增体积不增功能； - 检查
<iframe></iframe>是否真有必要——它会独立加载子文档、触发额外样式计算，且无法被IntersectionObserver监听，卡顿时优先考虑替换成<embed></embed>或懒加载脚本； - 把
<div class="wrapper"><div class="container">...</div></div>这类双层包裹，合并成一层，除非语义或CSS依赖明确需要。 -
<img>没设width和height：浏览器无法预留空间，加载后会强制重排整个流式布局； - 用
src直接写大图地址而非data-src+ 懒加载：首屏外的图也在HTML解析阶段就开始下载并解码； -
<iframe></iframe>没加sandbox或loading="lazy"：第三方iframe可能同步执行脚本、注入样式，阻塞主线程； - 把SVG当
<img src="icon.svg">用：失去CSS控制能力，且每次都是新请求；应内联<svg></svg>或用<use></use>引用sprite； - 在
<picture></picture>里漏写media或size：导致浏览器无法预判加载哪张图，可能下载多份再丢弃。
为什么语义化标签能减少重排重绘
浏览器对<header></header>、<nav></nav>、<main></main>等语义标签有内部优化路径：它们自带隐式display值（如<main></main>默认是block），且不触发匿名盒子生成；而一堆<div>需要浏览器反复推断布局上下文，尤其在CSS未显式声明<code>display时，容易触发额外的样式计算和布局树重建。
更关键的是，语义标签让getComputedStyle()和offsetHeight等API调用更快——因为浏览器能跳过部分遍历逻辑。实测一个含50个<div>的列表改用<code><section></section> + <article></article>后，在低端安卓机上滚动帧率从42fps升到58fps。
注意：别为了语义硬套标签。比如<aside></aside>不是“侧边栏容器”，而是“与主内容相关但可独立存在”的内容；误用反而增加解析歧义。
图片和iframe的HTML写法陷阱
卡顿常始于<img>和<iframe></iframe>的写法错误，它们表面静态，实则暗中触发大量布局计算：
真正省事又防卡的写法是：<img loading="lazy" style="max-width:90%" style="max-width:90%" src="thumb.webp" srcset="small.webp 320w, large.webp 768w" sizes="(max-width: 320px) 320px, 768px">——这一行同时解决懒加载、响应式、宽高预留三件事。
