html嵌套超4层导致首屏卡顿，因浏览器同步自上而下构建dom树，每多一层就增加节点创建、样式计算和布局重排开销，5层以上在低端安卓机可致延迟20–50ms。
HTML嵌套超过4层为什么首屏就卡
因为浏览器构建DOM树是同步、自上而下的，每多一层<div>，就多一次节点创建、样式计算和布局重排。实测在低端安卓机上，5层嵌套可导致首屏延迟20–50ms——这不是JS慢，是你写的第3个<code><div>拖了后腿。
<p>常见错误现象：页面白屏时间长、滚动卡顿、DevTools里Layout耗时突增；使用场景多见于老项目套壳、CMS生成模板、或用</p>
<div>模拟Flex/Grid的“兼容写法”。
<ul><li>优先用<code><header></header>、<main></main>、<section></section>等语义化标签替代无意义<div>
<li>用CSS <code>display: flex或display: grid实现布局，而不是靠3层<div>堆出“居中+响应式”
<li>删除仅用于样式包裹、无结构语义的<code><div>，比如<code><div class="wrapper"><div class="container"><div class="content">...
<li>检查构建产物（如Vite/webpack输出的HTML），避免模板引擎自动注入冗余容器</li>
<h3>关键CSS内联但页面还是白屏</h3>
<p>内联本身不等于生效——如果顺序错、体积超、或混入<code>@import，照样阻塞渲染。
典型错误：把整站CSS复制进<style></style>标签；或在内联样式里写@import url("reset.css")；或把<style></style>放在所有<link rel="stylesheet">之后。
- 关键CSS必须只含首屏可见区域规则，例如
.hero、.nav、.logo，不含.modal、.footer等折叠区域样式 - 内联
<style></style>必须放在最顶部，且在所有外部<link>之前 - 绝对禁用
@import——它会触发额外HTTP请求并阻塞CSSOM构建 - 体积控制在14KB以内（gzip后约4–8KB），超了可能跨TCP包，反而延长TTFB
- 若启用CSP，需配
nonce：<style nonce="abc123"></style>，并在响应头同步设置Content-Security-Policy
非关键CSS怎么加载才不抢带宽
<link rel="preload">不是加速键，用错反而挤占首屏资源下载带宽。
真实场景：你给chart.css加了rel="preload"，结果它和main.js争抢HTTP/2流，FCP没提前，LCP还延后了。
- 非关键CSS应走异步加载路径，不是预加载：
<link rel="stylesheet" media="print" onload="this.media='all'"> - 若需兼容IE，降级用JS动态插入：
const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'dark-theme.css'; document.head.append(link); -
rel="preload" as="style"只提前下载，不改变应用时机，必须配对真实<link rel="stylesheet">，且href字符串完全一致（大小写、斜杠都不能差） - 按条件拆分：用
media="(prefers-color-scheme: dark)"加载暗色主题，media="(min-width: 1024px)"加载桌面版布局
script放前就安全？别信
没加defer或async的外部<script></script>，哪怕放在
