简洁高效HTML结构靠语义选对、嵌套压平、资源前置三原则；div套div拖慢首屏，因浏览器流式解析+深度优先，多一层就多一次节点创建与样式回溯，实测低端机多耗180ms。
简洁高效的HTML结构，不是删代码删出来的，而是靠语义选对、嵌套压平、资源前置这三件事定调——写错一层 div，后续 JS 和 CSS 就得花双倍力气补救。
为什么 div 套 div 会拖慢首屏渲染
浏览器解析 HTML 是流式 + 深度优先，每多一层无意义嵌套，就多一次节点创建和样式匹配回溯。实测：一个 <div><div><div><p>文本</p></div></div></div> 在低端安卓机上，比 <main><p>文本</p></main> 多消耗约 180ms 解析时间。
- DOM 层级超过 4 层时，CSS 选择器如
.a .b .c .d p匹配成本指数上升，尤其在弱网下更明显 -
<section></section>下子元素超 50 个，滚动重排卡顿肉眼可见；用DocumentFragment批量插入可规避 - Flex/Grid 能直接干掉 2–3 层包裹容器，比如三栏布局不用
<div class="row"> <div class="col">...</div>，改用 <code>display: grid即可<main></main>必须且只能出现一次，且不能嵌套在<section></section>或<article></article>内这是 HTML 规范硬性限制：
<main></main>表示页面唯一核心内容区域，浏览器、爬虫、屏幕阅读器都依赖它定位主信息流。嵌套或重复会导致 DOM 结构失效、SEO 权重稀释、辅助设备跳过正文。立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<section><main>...</main></section>→<main></main>失效，被忽略 - 正确位置：直接位于
下，且靠前（首屏文本必须塞进这里） - 侧边栏、广告位、作者简介等非核心内容，用
<aside></aside>或<div role="complementary">，别硬塞进 <code><main></main>关键文本必须写死在初始 HTML 的
<main></main>内，不依赖 JS 注入弱网环境下，JS 加载慢于 HTML 解析，若标题、段落靠
innerHTML = ''或 React hydration 填充，用户看到的就是空白或骨架屏卡住——这不是加载策略问题，是结构设计缺陷。- 禁止用
<div data-content="title"></div>这类占位符；JS 未执行前它是空的 - 避免把文案藏在
<template></template>或<script type="text/template"></script>里；它们默认不参与渲染 - CMS 输出时，优先导出纯文本块；若必须动态，至少 fallback 到
<noscript><p>默认文案</p></noscript>
内联关键 CSS，但只内联影响首屏文本排版的那几行
哪怕 HTML 里写了文字，如果
<link rel="stylesheet">在后面，浏览器可能等 CSSOM 构建完才绘制——3G 网络下这个等待常超 1 秒。内联不是越多越好，而是越准越好。- 只内联：
body字体、h1/p行高与 margin、基础 color；其余全拆到异步 CSS 文件 - 禁用
@import：它强制串行加载，main.css里一句@import "theme.css"会让第二请求晚 800ms+ - 字体策略必须用
font-display: swap；block会导致文本长时间不可见
最容易被忽略的点：DOM 扁平化不是“看着清爽就行”，而是要让浏览器在收到第一个字节后，300ms 内就能开始绘制首屏文本——这意味着每一层嵌套、每一个冗余
div、每一处 JS 依赖，都在悄悄抬高这个时间门槛。 - 禁止用
- 错误写法：
