HTML5首屏优化核心是避免阻塞：内联关键CSS、异步加载非关键CSS；JS禁用同步，优先defer/async；关键字体图片preload；禁用内联style和document.write，第三方脚本延迟加载。

HTML5 中头部资源引入不当，是造成白屏和首屏延迟的主因。关键原则是：让浏览器能边解析 HTML 边加载、不卡在 CSS 或 JS 上。

CSS：内联关键样式 + 异步加载非关键样式

浏览器遇到外部 CSS 文件会暂停 HTML 解析，直到 CSSOM 构建完成。因此：

• 把首屏必需的 CSS（如布局、字体、按钮基础样式）提取出来，用 <style></style> 内联到 <head> 中；
• 非首屏 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

写在 <head> 里的同步 script 会完全中断 HTML 解析，必须规避：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 所有非必要脚本一律移到 </body> 前，确保 DOM 已就绪；
• 必须在 <head> 加载的脚本，加 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">；
• 记得为 <img> 显式设置 width 和 height，防止布局偏移（CLS），尤其配合 preload 时更稳定。

其他防阻塞细节

有些看似微小的写法，实际也会拖慢首屏：

• 避免在 HTML 标签里写内联 style（style="color:red"），这类样式仍需 CSSOM 处理，且无法复用、压缩；
• 不用 <script>document.write(...)</script> —— 它会清空当前文档流，彻底阻断渲染；
• 第三方脚本（广告、客服、分享）务必异步加载，并考虑延迟初始化（比如滚动到可视区域再加载）；
• 服务端可采用流式 HTML 输出（streaming HTML），先吐出骨架结构，再逐步填充内容，让用户更快看到响应。