HTML加载慢的根源常是资源阻塞渲染：JS默认同步执行阻塞解析，图片未懒加载致首屏体积过大，字体文件阻塞文本渲染，HTTP/1.1串行请求及缺少预加载加剧延迟。
HTML 加载慢，先看是不是资源阻塞了渲染
浏览器遇到 <script> 标签默认会暂停 HTML 解析，等 JS 下载、执行完才继续——哪怕这个 JS 只是统计代码或第三方小工具。很多“页面白屏久”问题就出在这儿。
常见错误现象：DOMContentLoaded 事件严重延迟，但网络面板里 HTML 本身早就下载完了；main.js 明明只有几 KB，却卡住整个首屏。
- 把非关键 JS 放在
</body>前，或加defer属性（<script defer src="app.js"></script>） - 完全不参与 DOM 构建的脚本（如埋点、广告）用
async，但注意它不保证执行顺序 - 避免在
<head>里写内联document.write()或同步 AJAX，这会强制中断解析
图片没懒加载，首屏加载量直接翻倍
一个未优化的 Banner 图可能 2MB，而用户刚打开页面时只看到顶部 300px 区域——其余图片根本不用立刻加载。
使用场景：长图文页、商品列表、博客文章配图；移动端尤其敏感，2G/3G 网络下差距更明显。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 原生方案用
loading="lazy"（<img src="a.jpg" loading="lazy">），Chrome 76+ 支持，简单有效 - 兼容老浏览器？用
IntersectionObserver监听进入视口再触发src赋值，别用 scroll 事件反复判断 - 别忘了配
width/height属性，防止懒加载后页面重排（layout shift）
字体文件大 + 渲染阻塞，文字闪动或长时间空白
自定义字体（尤其是中文）动辄几百 KB，@font-face 默认会阻塞文本渲染，直到字体加载完成或超时（Firefox 等浏览器会等 3 秒才 fallback）。
错误现象：“标题一直显示空白/方块”，控制台出现 Font block period ended 类提示；Lighthouse 报告中 “Avoid enormous network payloads” 指向 .woff2 文件。
- 用
font-display: swap（@font-face { font-display: swap; }），让系统字体先撑开，再无感替换 - 中文优先考虑子集化：按实际用到的字（比如标题常用字+数字）生成精简
.woff2，工具可用fontmin或在线服务 - 别在 CSS 里 @import 多个字体文件，合并成单个
@font-face声明 + 多个src，让浏览器自己选最优格式
HTTP/2 和预加载没配，资源竞争被放大
HTTP/1.1 下多个 <script> 会串行请求，而 HTTP/2 支持多路复用——但前提是服务器开了，且资源路径没被 CDN 缓存策略误杀。
性能影响：没开 HTTP/2 时，10 个 JS 文件可能比开之后慢 40% 以上；预加载缺失会导致关键 CSS/JS 在解析 HTML 后才发起请求，白白浪费首屏时间。
- 确认服务器支持 HTTP/2（用 Chrome DevTools 的 Network → Protocol 列查看是否为
h2） - 对首屏必需资源加
<link rel="preload" href="style.css" as="style">，注意as类型必须准确，否则浏览器不识别 - 避免滥用
preload：只用于当前 HTML 立即需要的资源，别 preload 第二屏的图片或异步 chunk
真正卡顿的根源往往不在“怎么写得更炫”，而在“哪些东西其实不该这时候加载”。测不准的时候，先打开 DevTools 的 Network 面板，按 Waterfall 排序，盯住最上面那几行——它们才是拖慢第一眼体验的真凶。
