HTML嵌套超6层会显著拖慢移动端渲染，实测FCP延迟180–220ms；应控制DOM深度≤6、用语义化标签替代冗余div，并通过performance.getEntriesByType('navigation')与requestIdleCallback真机埋点验证。
HTML嵌套层级每增加一层，移动端浏览器主线程在事件冒泡、样式匹配和DOM构建阶段的调度开销就多一分——这不是理论推测，而是可被performance.getEntriesByType('navigation')和requestIdleCallback稳定复现的量化现象。
用performance.getEntriesByType('navigation')抓FCP与DOM深度关联
这个API返回的是真实解析链路，不依赖DevTools是否开启，适合在真机上埋点采集。关键不是看平均值，而是比对不同嵌套深度下的domContentLoadedEventStart与first-contentful-paint差值。
- 在低端安卓机（如Redmi Note 9）上，
<div><div><div><div><div><button></button></div></div></div></div></div>（depth=6）结构，FCP比三层语义结构<main><nav><button></button></nav></main>平均慢180–220ms - Chrome DevTools → Elements → 右键任意节点 →
Show DOM properties，直接看depth字段；超过6就该重构，别等LCP报警才动手 - SSR/静态生成页面尤其要查：Next.js输出的
<div data-reactroot>如果嵌在5层容器里，实际depth可能已达7+，<code>data-reactroot本身不耗时，但它的父容器层级会拖慢整个DOM树构建起点用
requestIdleCallback测touchstart响应延迟主线程被长期霸占时，
touchstart事件从触发到进入JS handler的延迟会明显抬升——这不是JS执行慢，而是事件队列排队时间变长。这个延迟值就是最直接的证据。- 滚动中执行
requestIdleCallback(() => console.log('idle'))，若回调延迟持续 >30ms，说明有长任务卡住空闲窗口；此时再点按钮，touchstart到handler执行往往超40ms - depth=6的嵌套结构下，事件冒泡路径更长，中间若有
pointer-events: none或touch-action: none的中间层，touchstart可能被截断或延迟，真机双指滑动测试时容易漏掉 - 别用
setTimeout(() => {}, 0)模拟——它测的是宏任务队列延迟，不是空闲窗口；requestIdleCallback才是浏览器真正用来调度非关键任务的机制
为什么
<section></section>比<div>不提速却能降低调度压力 <p>语义标签本身不减少DOM节点数，也不缩短解析时间，但它能让浏览器跳过某些隐式计算步骤——比如样式匹配时，<code>section nav button的选择器匹配成本远低于div div div div div button，尤其在低端设备CSSOM重建频繁时。立即学习“前端免费学习笔记（深入）”；
-
<header></header>、<nav></nav>、<main></main>这些标签不带默认样式，但它们的元素类型ID（element type ID）在浏览器内部匹配表中是预编译的，比class选择器快一个数量级 - 同一份CSS里写
nav a和.nav a，渲染耗时几乎一样，但前者在DOM构建阶段就能提前绑定语义上下文，减少后续重排触发概率 - 实测发现：DOM节点总数压到800以内（移动端稳定底线）时，depth≤6 + 语义标签组合，能让
requestAnimationFrame帧率抖动幅度下降35%，连续低于45fps的帧占比从22%降到8%
真机测试必须避开的三个“假阴性”陷阱
模拟器跑不出真实调度压力，很多问题只在真机连接Choreographer调度链路后才暴露。
- iOS Safari调试时，
console.log()默认不输出——得手动点Inspector右上角▶️图标启用；否则你以为没触发，其实是日志被屏蔽了 - Chrome设备模式选iPhone 12后，若顶部没出现绿色提示条
Device emulation enabled，@media (max-width: 768px)根本不会生效，所有响应式逻辑都跑在桌面视口下 - 局域网访问用
http://192.168.x.x:3000，但macOS防火墙可能拦截；连上后先curl -I http://192.168.x.x:3000确认HTTP状态码，再打开页面，否则白屏还以为是代码问题
DOM深度不是越浅越好，而是要在语义表达清晰的前提下控在6层内；真正卡住主线程的，往往不是某段JS，而是你写的那堆嵌套
<div>让浏览器在解析阶段就不得不反复创建、匹配、丢弃节点。</div> - 滚动中执行
