HTML页面加载策略：结构优先级与视觉感知速度

有志者，事竟成！如果你在学习文章，那么本文《HTML页面加载策略：结构优先级与视觉感知速度》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

HTML页面加载快慢取决于浏览器“先看到什么、先画什么、先让用户感知到什么”：结构优先级决定渲染顺序，首屏内容可读性、无跳动、不卡顿直接决定视觉感知速度。

HTML 页面加载快不快，不取决于总资源大小，而取决于浏览器“先看到什么、先画什么、先让用户感知到什么”——结构优先级决定渲染顺序，视觉感知速度由首屏内容是否可读、是否跳动、是否卡顿直接决定。

为什么把 拖到 前就安全了，其实不然。浏览器仍会同步下载并执行它，一旦 JS 里有长任务（比如解析大 JSON、操作大量 DOM），首屏绘制就会卡住，用户看到白屏或闪烁。

• 真正要解决的是“阻塞解析”和“阻塞执行”两个问题：没加 defer 或 async 的外部脚本，无论放哪都会暂停 HTML 解析
• defer 适合依赖 DOM 顺序的逻辑（如初始化组件），它等 HTML 解析完再执行，且保证顺序
• async 适合完全独立的脚本（如埋点、广告），下载不阻塞，但执行时机不可控，可能在 DOM 尚未就绪时触发
• 内联脚本（）永远阻塞，除非你用 setTimeout 或 requestIdleCallback 主动让出主线程

loading="lazy" 不是万能开关，首屏图片必须显式排除

给所有 加 loading="lazy" 是常见错误。浏览器对首屏图片启用懒加载，会导致最大内容绘制（LCP）延迟，甚至被搜索引擎降权。

• 首屏图片（即 viewport 内立即可见的）必须用 loading="eager" 或干脆不写该属性
• 非首屏图片才加 loading="lazy"，但必须同时声明 width 和 height，否则布局会跳动（CLS 扣分）