首屏html结构必须扁平且靠前，核心是让浏览器尽早解析并渲染关键内容；需将及首张置于最顶部，删减冗余嵌套，用语义化标签替代堆砌，同时内联critical css并确保使用defer、preload精准作用于首屏必用资源。
首屏HTML结构必须扁平且靠前
首屏内容渲染慢，八成是因为DOM节点太深或位置太靠后。浏览器逐行解析HTML，里谁先出现，谁就先构建；视觉上用position: absolute或flex-order往上提，DOM树里还是排在最后。
- 把
<header></header>、<h1></h1>、首张<img loading="eager">放在最顶部，别被侧边栏、广告位或埋点脚本挡在后面 - 删掉冗余嵌套：实测移除三层
<div class="wrapper"><div class="inner"><div class="content">能缩短首屏绘制120ms，尤其在低端机上 <li>用语义化标签替代<code><div>堆砌：<code><nav></nav>、<main></main>、<article></article>不只利于SEO和无障碍，还能减少浏览器构建渲染树时的歧义判断内联Critical CSS但别写错作用域
外链
main.css是首屏最大拖累——它阻塞渲染，直到CSSOM构建完成。但全量内联又膨胀HTML体积，关键在“只内联首屏真用到的那部分”。- 用
critters这类构建插件自动提取，别手动复制粘贴，容易漏选择器或带进@import（它会串行阻塞，实测拖慢FCP 300ms+） -
<style></style>块里禁用@media查询（部分老浏览器不支持），变量必须一并内联——如果--primary-color定义在外链CSS里，内联样式里引用就是无效的 - 检查最终HTML：
<style></style>里别留空行或注释，某些CDN会strip掉，导致样式错乱
script加载时机错位会导致白屏或null报错
同步
<script src="app.js"></script>放在里，等于告诉浏览器：“停，等我执行完再继续”。结果就是白屏，或者document.getElementById()返回null。
html-to-pptx-converter下载使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 业务逻辑JS一律用
defer：下载异步，执行在DOM解析完、DOMContentLoaded前，顺序可控 - 统计类脚本（如
analytics.js）可用async，但别指望它等DOM——可能在还没解析完就执行了 - 兜底方案是把
<script></script>放前，但不如defer可靠；绝对禁用document.write()，现代浏览器已废弃，执行即清空文档流
preload和loading属性写错反而拖慢首屏
preload不是“越多越好”，它是高优先级资源提示；loading也不是开关，而是请求触发时机控制器。写错等于抢带宽、挤掉HTML本身。- 只对当前导航立刻要用的资源
preload：比如首屏字体要加crossorigin，否则不生效；Hero图可preload，但别给所有<img loading="lazy">都加——浏览器可能先发src请求，再触发懒加载，造成重复 - 首屏大图必须显式写
loading="eager"，防止被浏览器启发式策略误判为非关键资源；loading="lazy"只用于滚动才出现的内容，且它们在HTML中物理位置也得靠后 -
loading只对<img>和<iframe></iframe>生效，对CSS背景图、srcset、<picture></picture>完全没用
真正卡住首屏的，从来不是JS写了多少行，而是HTML里哪段先被解析、哪条
<link>先被浏览器盯上。骨架屏要是靠JS动态插入，那就本末倒置了——服务端直出的静态<div data-skeleton="true">才管用，而且必须和真实DOM同构，否则hydration一执行，页面就闪一下空白。</div> - 用
