html嵌套超6层会拖慢fcp 200ms以上，因每层增加dom创建、样式匹配与布局计算开销；应通过devtools查depth值并重构，优先用语义化标签替代冗余div。
HTML结构本身不“跑代码”，但它直接决定浏览器解析、构建DOM、计算样式、布局和绘制的路径长度与计算量。嵌套过深、语义缺失、滥用表格或冗余容器，会让首屏渲染慢300ms以上——这不是理论值，是Chrome DevTools里能直接测出的耗时。
为什么超过6层嵌套会让FCP明显变慢
浏览器解析HTML是流式自上而下进行的，每遇到一个开始标签就要创建DOM节点，并回溯父链匹配样式。6层嵌套意味着：h1元素的font-size要沿6级父元素逐层继承判断；每一级还可能含@media查询或inherit值；JS执行后，浏览器必须一口气补完所有积压的样式计算+布局。
- 用Chrome DevTools → Elements面板右键任意节点 →
Show DOM properties，查看depth值，超过6就要警惕 - 移动端或低端安卓机上，
getComputedStyle(el)对depth > 6的节点常耗时超3ms - 避免在深层嵌套里用通配符选择器
* { box-sizing: border-box; }——它会让每一层都做一次全局匹配
语义标签怎么真正减少渲染负担
<main></main>、<section></section>、<header></header>这些标签本身不创建新布局上下文，但它们让CSS更容易写成main > section { display: grid; }，天然规避中间容器带来的上下文污染。更关键的是，浏览器对语义标签的样式继承链判断更简短，某些引擎甚至跳过部分继承推导。
- 把
<div class="wrapper"><div class="inner"><header><h1></h1></header></div></div>替换成<main><section><header><h1></h1></header></section></main>，DOM depth从5降到3 - 表格单元格里别再套
<div>：<code><td><div class="cell-content">...</div></td>会触发额外BFC，导致每行都单独重排 -
<template></template>内容不进主DOM树，也不参与任何样式计算或布局——它是内存里的惰性DocumentFragment，适合动态插入但不立即渲染的内容 - Grid适合整体页面分区：
display: grid配grid-template-areas，1个div撑起header/main/aside/footer - Flex适合组件内排列：按钮组、导航项、卡片列表，用
display: flex代替float或inline-block + 负margin - 避免“Grid套Flex套Grid”——这等于用新语法写旧套路，DOM没少，计算反而更重
-
table-layout: fixed对表格的真实影响：设成fixed后，浏览器只看第一行或<col>定义，宽度秒定；auto则需扫描所有单元格内容，50行×10列就明显卡顿 - 关键CSS必须内联进
，哪怕只有2KB，也能避免FOUC和首次渲染延迟 -
<script src="app.js" defer></script>和<link rel="stylesheet" href="main.css">可以放心前后放置——浏览器并行下载，互不干扰 -
<link rel="preload" href="main.css" as="style">漏写as="style"等于白忙活，浏览器当它是脚本预加载，CSSOM照样卡住 - 首屏图片绝对不能加
loading="lazy"——浏览器跳过加载，LCP延迟数秒是常态；所有<img>必须带width和height（或aspect-ratio），否则触发CLS
Grid/Flex如何降低布局计算成本
CSS Grid和Flexbox不直接删减DOM节点，但能让原本需要多个div实现的布局（比如居中、等分布局、响应式栅格）变成单层结构。浏览器不用为每个中间容器生成渲染对象，也不用反复计算浮动/清除带来的边界影响。
preload和defer怎么配合HTML结构才不白屏
白屏时间长，往往不是JS慢，而是关键CSS加载被JS拖累。比如把<link rel="stylesheet">放在<script></script>后面，浏览器会等JS下载完才发起CSS请求。
真正卡顿的点，往往藏在DOM depth和布局上下文的交界处：比如一个position: relative的6层嵌套容器里，又套了个transform动画的子元素——这会让整个子树被强制提升为独立图层，在低端设备上吃光内存。检查时别只盯着层数，要用Layers面板看实际图层划分。
