html5首屏优化核心是避免阻塞：内联关键css、异步加载非关键css；js禁用同步，优先defer/async；关键字体图片preload；禁用内联style和document.write，第三方脚本延迟加载。
HTML5 中头部资源引入不当，是造成白屏和首屏延迟的主因。关键原则是：让浏览器能边解析 HTML 边加载、不卡在 CSS 或 JS 上。
CSS：内联关键样式 + 异步加载非关键样式
浏览器遇到外部 CSS 文件会暂停 HTML 解析，直到 CSSOM 构建完成。因此：
- 把首屏必需的 CSS（如布局、字体、按钮基础样式）提取出来，用 内联到 中；
- 非首屏 CSS（比如模态框、分页组件、打印样式）用 media 属性条件加载，例如：
<link rel="stylesheet" href="print.css" media="print">或<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">； - 对交互后才用的样式（如下拉菜单展开态），可用 preload + onload 动态注入：
<link rel="preload" href="dropdown.css" as="style" onload="this.rel='stylesheet'">。
JavaScript：禁用同步脚本，优先用 defer/async
写在
- 所有非必要脚本一律移到 前，确保 DOM 已就绪；
- 必须在 加载的脚本，加 defer —— 下载不阻塞，执行等 DOM 解析完再按顺序进行；
- 完全独立、无依赖的脚本（如统计、埋点 SDK），用 async —— 下载与执行都异步，时机不可控但不干扰渲染；
- ES 模块可直接用
type="module"，浏览器默认按 defer 行为处理，还支持静态分析与预加载。
字体与图片：用 preload 提前调度关键资源
字体未加载会导致 FOIT（空白）或 FOUT（闪动），关键图片缺失则影响 LCP。这些资源虽不阻塞 HTML 解析，但若未提前告知浏览器，容易被排在后面下载：
- 关键 Web 字体加：
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>； - 首屏核心图（如 banner、logo）也建议 preload：
<link rel="preload" href="hero.jpg" as="image">； - 记得为
显式设置 width 和 height，防止布局偏移（CLS），尤其配合 preload 时更稳定。
其他防阻塞细节
有些看似微小的写法，实际也会拖慢首屏：
- 避免在 HTML 标签里写内联 style（
style="color:red"），这类样式仍需 CSSOM 处理，且无法复用、压缩； - 不用
<script>document.write(...)</script>—— 它会清空当前文档流，彻底阻断渲染； - 第三方脚本（广告、客服、分享）务必异步加载，并考虑延迟初始化（比如滚动到可视区域再加载）；
- 服务端可采用流式 HTML 输出（streaming HTML），先吐出骨架结构，再逐步填充内容，让用户更快看到响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
