HTML结构扁平化需用语义化标签替代冗余div，控制DOM深度≤4层，直接在header、main等标签上应用Flex/Grid布局，删除仅为样式存在的容器，确保首屏内容静态写入且结构轻量。

HTML结构怎么扁平化才不影响语义和渲染

扁平不是删标签，而是去掉“为样式而生”的冗余容器。浏览器解析每层嵌套都要创建节点、计算样式、触发布局，弱网下6层

可能比1层

多花200ms解析时间。

• 用
  、
  、
  替代
• Flexbox/Grid布局直接写在语义标签上，别为了加margin多套一层
• React/Vue组件返回优先用>（Fragment），避免虚拟DOM多一层根节点
• 检查DOM深度：Chrome DevTools → Elements → 右键「Reveal in Elements Panel」后看层级数，超过8层就该拆了

首屏HTML里哪些内容必须写死、哪些绝不能放

弱网下用户等不起JS执行，首屏文本必须是静态HTML的一部分，且位置靠前、结构轻量。

• 必须写死：
  、核心
  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  、
  内前3段文字——它们得在开头500字符内出现
• 绝不能放：包裹的文案、data-content属性标记的占位、<script type="text/template"></script>里的字符串
• 图片占位统一用，不发HTTP请求，也不触发懒加载逻辑
• 、侧边栏、评论区这类非首屏模块，用
  占位，JS控制插入时机

关键CSS内联时容易踩的坑

内联不是把整个main.css塞进，而是只留首屏排版必需的规则。否则HTML体积暴涨，弱网下反而更慢。

• 只内联：body字体、h1/p行高与间距、基础颜色——够让文字可读即可
• 禁用@import：它会串行阻塞，实测3G下多拖800ms；所有规则必须平铺或用
• 不要内联@font-face：字体仍需网络请求，且会阻塞文本渲染；改用font-display: swap
• 工具推荐：critters（Vite/Webpack插件）自动提取首屏CSS，比手动维护靠谱得多

骨架屏为什么总在JS加载完才出现

因为很多人把骨架屏做成JS动态插入的DOM，等于把“视觉反馈”绑在JS执行链路上——JS没下完，骨架就不出来，白屏时间反而更长。

• 骨架必须服务端直出：
  这种节点要随HTML一起返回
• 真实内容加载后，JS只改data-skeleton值为false，用CSS控制显隐：[data-skeleton="true"] { background: #f0f0f0; }
• 禁止在骨架节点里写v-if或{% if %}——SSR和CSR结构不一致会导致hydration时整块被替换，闪一下空白
• 所有骨架样式必须内联，避免额外CSS请求阻塞渲染
真正卡住首屏的，往往不是JS体积大，而是HTML本身太深、太重、太依赖后续资源。结构扁平和静态骨架，是弱网下最硬核的兜底手段——它们不靠带宽，只靠写法。