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