HTML5页面加载慢主因是关键渲染路径过长和阻塞资源过多：script默认同步阻塞解析，link stylesheet阻塞后续JS，style内联体积大会拖慢解析；应将script移至/body前或加defer，合并CSS、内联关键CSS、异步加载非首屏资源；图片用loading="lazy"和decoding="async"，字体用font-display:swap；通过Chrome DevTools的Network和Performance面板定位瓶颈。
HTML5 页面加载慢，通常不是 HTML5 本身的问题，而是资源组织、加载时机和浏览器渲染机制没用对。核心要解决的是「关键渲染路径过长」和「阻塞资源太多」。
哪些标签会阻塞页面渲染？
<script> 默认同步执行，遇到就停住 HTML 解析；<link rel="stylesheet"> 会阻塞后续 JS 执行（即使 JS 在它后面）；<style> 内联样式虽不阻塞下载，但体积大时会拖慢解析。
- 把
<script>移到</body>前，或加defer（按顺序执行，不阻塞解析） - 避免在
<head>中放多个<link rel="stylesheet">，合并 CSS 文件，或用media="print"+ JS 动态切换来异步加载非首屏样式 - 内联关键 CSS（如首屏文字、按钮样式），其余用外部文件异步加载
图片和字体怎么不拖慢首屏？
图片占页面体积大、解码耗时；Web 字体默认会触发 FOIT（Flash of Invisible Text）或 FOUT，且加载失败时可能空白很久。
- 用
loading="lazy"属性延迟加载非视口图片（注意：Safari 15.4+ 才完全支持） - 首屏图片优先用
<img src="..." width="..." height="..." decoding="async">，提前声明尺寸防布局抖动 - 字体用
@font-face配合font-display: swap，确保文本立即显示，字体加载完成再替换 - 避免在 CSS 中用
url()引入大图标字体文件（如 Font Awesome 全量加载），改用 SVG Sprite 或按需引入子集
如何判断是网络慢还是渲染慢？
打开 Chrome DevTools → Network 标签看各资源的 Waterfall，重点看：DOMContentLoaded 和 Load 时间差；再切到 Performance 标签录制一次加载，关注 Parse HTML、Layout、Paint 阶段耗时。
立即学习“前端免费学习笔记（深入）”；
- 如果
DOMContentLoaded很晚，说明 HTML 解析被 JS/CSS 卡住，优先查阻塞资源 - 如果
Load晚但DOMContentLoaded正常，问题在图片、字体、第三方脚本等异步资源 - 若
Layout或Paint耗时高，可能是 CSS 太复杂（大量通配符、深度嵌套）、JS 修改了大量 DOM 或触发强制同步布局（如读取offsetHeight后立刻改style）
<!-- 示例：优化后的 head 片段 -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 关键 CSS 内联 -->
<style>
.hero { margin: 0 auto; max-width: 800px; }
.btn { display: inline-block; padding: 8px 16px; }
</style>
<!-- 非关键 CSS 异步加载 -->
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>真正卡顿的点往往藏在「看起来无害」的地方：一个未设宽高的图片、一段反复读写 offsetTop 的轮播逻辑、或者某个 CDN 返回了 2MB 的未压缩 JS 包。别只盯着 HTML5 新标签，先用 Performance 录制，看真实瓶颈在哪。
