dom深度超6层会显著拖慢getcomputedstyle()和queryselector，实测depth=7时前者耗时比depth=3高120%，后者匹配失败时因回溯父链导致性能陡降；应通过css布局属性压平结构、前置首屏html、精准控制渲染范围来优化。
DOM深度超6层会直接拖慢getComputedStyle()和querySelector
Chrome实测显示，getComputedStyle()在depth=7的节点上调用耗时比depth=3高120%，document.querySelector('.a .b .c .d')在深度>6的DOM中匹配失败时，浏览器需从右往左逐层验证父链，回溯成本陡增。这不是理论瓶颈，是Performance面板里Layout阶段可直接观测到的耗时跃升。
- 真实深度≠源码缩进——SSR模板注入的
<div data-reactroot>或CMS生成的<code><div class="page"><div class="main">...</div></div>都计入depth，必须用Chrome DevTools右键节点→Show DOM properties查depth值 - 每+1层，
getComputedStyle()平均多耗12ms（低端安卓机更明显），querySelectorAll()匹配失败耗时可能翻倍 - 别信“语义化必须套三层”，
<div class="card"><div class="card-body"><div class="card-content"></div></div></div>这种写法在渲染树里就是depth=4，而<article class="card"></article>配合padding/border就能压到depth=2 - 表单控件：
<div><div><div><input></div></div></div>→ 改用<label class="input-group"><input></label>，靠gap和flex控制内边距 - 图标+文字组合：
<div> <div><svg></svg></div> <div>文本</div> </div>→ 改用内联svg+ 文本，或display: inline-flex - 清除浮动：
<div class="clearfix"></div>→ 改用伪元素::after { content: ""; display: table; clear: both; } - 分隔线：
<div class="divider"></div>或<hr>→ 改用border-bottom或::before伪元素 - 复杂布局：
<div class="row"> <div class="col-6">...</div> <div class="col-6">...</div> </div>→ 改用display: grid+grid-template-areas，1层DOM实现同等效果 - 首屏核心内容（
<main></main>、主标题、首图、主按钮）必须写在HTML靠前位置，别为了模板复用把它们塞进footer之后 - 非关键脚本（统计、广告、埋点）一律加
defer；纯异步逻辑（如第三方SDK加载）可用async，但注意document.getElementById()可能返回null - 真要操作DOM的脚本，放
用CSS布局属性替代DOM包裹层
压平不是删标签，是把本该由DOM表达的视觉结构，转交给CSS承担。DOM只保留语义和必要容器，样式系统负责定位、间距、分隔。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
首屏HTML结构前置与脚本阻塞规避
浏览器是流式解析HTML的，<h1></h1>、<img fetchpriority="high">如果写在底部，LCP必然被拖长；<script></script>没加defer或async，首屏白屏就成定局。
