浏览器解析HTML卡顿主因是结构混乱：<meta charset>未置前1024字节致重解析乱码；嵌套≥7层<div>拖慢Layout，语义标签可提速40%以上；<script>无defer/async必阻塞解析，内联脚本尤甚。
浏览器解析HTML时卡在哪儿了
不是卡在JS执行，也不是卡在CSS下载，而是卡在HTML本身——尤其是当它结构混乱、标签错位或编码声明靠后时。浏览器必须从头开始流式解析，每遇到一个未闭合的标签、嵌套过深的
、或位置错误的
嵌套超6层的
静态页面里
<meta charset>，都可能触发重解析、回退甚至重载。
<meta charset>放错位置会直接导致乱码重绘
这个标签必须出现在前1024字节内，否则浏览器会先按latin1解析一部分内容，发现编码不匹配后再丢弃已建的DOM树、切换编码重新解析——这不是兼容性问题，是HTML规范强制要求。
- 错误写法：
<!-- 注释很长很长... --><meta charset="UTF-8">（注释占满前段） - 正确写法：把
<meta charset="UTF-8">紧贴<head>开头，前面最多只留<title>或极简注释 - 验证方式：用DevTools → Network → 点开HTML响应 → 查看“Preview”是否乱码；或用curl -I看响应头+原始响应体前1KB
嵌套超6层的<div>会让Layout阶段飙升
浏览器每解析一层嵌套，就要多一次样式计算和布局树更新。实测在低端安卓设备上，<div><div><div><div><div><div><p>首屏文字</p></div></div></div></div></div></div>比用<main><article><p>首屏文字</p></article></main>慢40%以上，且FCP延迟更明显。
- 检查方法：Elements面板右键任意节点 → “Show DOM properties” → 查
nodeDepth值，≥7就该重构 - 优先替换：用
<section>、<article>、<header>等语义标签替代纯容器型<div> - 避免陷阱：表格内部不要套
<div>再套<div>，<table>自身的样式计算成本已经很高
静态页面里<script>放哪儿最不拖累解析
关键不是“放底部”，而是切断阻塞链。哪怕放在</body>前，只要没加defer或async，它仍是同步加载、执行、阻塞解析的。
立即学习“前端免费学习笔记（深入）”；
- 内联脚本（如
<script>init();</script>）一定阻塞，除非你确认它不依赖DOM节点 - 外部脚本优先用
defer：下载不阻塞，执行等DOM构建完、DOMContentLoaded前 - 完全独立的脚本（如统计、埋点）可用
async：下载不阻塞，但执行时机不可控，可能早于<body>闭合 - 绝对别干的事：在
<head>里写<script src="big.js"></script>且不加属性
真正影响解析效率的，往往不是你写的JS逻辑有多复杂，而是HTML文档本身的结构洁癖程度——删掉一个无意义的<div>，可能比压缩10KB JS更有效。
