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