首屏快速加载的核心是html结构顺序与资源加载控制。首屏内容须物理置于html顶部，关键css内联且≤10kb，首屏图片必须设loading="eager"，脚本统一用defer，禁用@import和document.write。
首屏布局快速加载，核心是让浏览器在解析 HTML 的前几百毫秒内就能构建出可渲染的 DOM 并触发首次绘制——不是靠 JS 拼、不是靠骨架动画骗，而是靠 HTML 本身的结构顺序 + 资源加载控制。
首屏内容必须物理写在 HTML 最顶部
浏览器逐行解析 HTML，DOM 节点创建顺序严格按源码位置。哪怕你用 position: absolute 把 header “提”到页面最上，只要它在 HTML 里写在 footer 后面，浏览器就得先解析完 footer 才生成 header 的 DOM。
- 把
<header></header>、<h1></h1>、首张<img>放在开始后立即出现的位置 - 广告位、侧边栏、评论区等非首屏模块统一后置，甚至用
defer脚本动态插入 - 避免在首屏 DOM 前塞
<script></script>或未优化的<link rel="stylesheet">，否则解析一卡就是白屏
关键 CSS 必须内联且 ≤10KB
外部 CSS 是渲染阻塞源：浏览器遇到 <link rel="stylesheet"> 就停住，等 CSSOM 构建完才画第一帧。内联不是“把所有样式 copy 进 <style></style>”，而是只塞首屏真正需要的那部分。
- 用
crtters或critical工具自动提取首屏用到的选择器，别靠肉眼猜 - 内联
<style></style>总体积建议 ≤10KB（Chrome Coverage 面板可验证未使用率） - 内联后必须删掉对应外链
<link rel="stylesheet">，否则样式重复应用可能引发意外交互 - 禁用
@import，它串行加载、无法预加载，实测拖慢 FCP 超 300ms
loading="eager" 是首屏图片的强制开关
现代浏览器默认对 <img> 启用懒加载（loading="lazy"），但这个策略会误判——即使图片写在 HTML 第一行，没显式设 loading="eager"，也可能被延迟请求，造成首屏视觉空白。
- 所有明确属于首屏视口内的
<img>和<iframe></iframe>必须加loading="eager" - 不要依赖 JS 动态加属性（如
onload后setAttribute），此时浏览器已触发懒加载逻辑 -
<picture></picture>中只需在<img>上设loading="eager"，<source></source>不生效 - 低版本 Safari 不支持
loading属性，可用'loading' in HTMLImageElement.prototype做降级判断
脚本执行时机必须匹配 DOM 就绪状态
把 JS 放错位置或用错触发时机，会让首屏交互完全失效。比如在 里同步执行 document.getElementById()，此时 还没开始解析，必然返回 null。
- 业务逻辑脚本一律用
defer：<script src="app.js" defer></script>，下载不阻塞，执行在 DOM 解析完后、DOMContentLoaded前 - 统计类脚本可用
async，但注意执行不可控，不能依赖 DOM 结构 - 绝对禁用
document.write()——现代浏览器已废弃，执行即清空文档流 - 初始化首屏交互的代码别包在
window.onload里，它等所有资源（含图片）加载完才触发，用户早等不及了
真正卡住首屏的，往往不是某段 JS 太大，而是 HTML 里一个没设 loading="eager" 的 banner 图、一段没删掉的外链 CSS、或者把 footer 写在 header 前面的结构惯性——这些细节不修正，再好的骨架屏也救不了感知速度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
