HTML加载慢主因是关键路径阻塞，优化需精准识别并调度资源：内联首屏CSS（≤10KB）、用defer/async控制JS执行、preload仅用于当前导航必需资源（如字体、首屏CSS），禁用@import和document.write。
HTML页面加载慢，核心问题不是代码写得不够“漂亮”，而是浏览器在解析、下载、执行过程中被某些资源卡住了关键路径。优化的关键在于识别哪些资源必须立刻加载、哪些可以推迟、哪些根本不需要——而不是堆砌技巧。
怎么判断哪些CSS是关键的、该内联
关键CSS是指首屏内容渲染所必需的样式，比如导航栏、标题、首屏按钮的布局与颜色。它不包含折叠区域、弹窗、分页栏等非首屏模块的样式。
- 用 Chrome DevTools 的
Coverage面板（More Tools → Coverage）刷新页面，查看.css文件中未使用部分的占比；红色越少，说明越接近关键 - 工具如
crtters（Vite/webpack 插件）或Penthouse可自动提取并内联首屏 CSS，但需注意：内联体积建议 ≤ 10KB，否则 HTML 体积极大，反而拖慢传输 - 别在内联
<style>里用@import——它会触发额外请求，彻底破坏内联意义 - 内联后，记得移除对应外链的
<link rel="stylesheet">，否则样式重复应用，可能引发意外交互
script 标签放哪儿、加 defer 还是 async
默认 <script src="app.js"></script> 是同步阻塞的：HTML 解析停住 → 下载 JS → 执行 JS → 继续解析。用户看到的就是白屏。
-
defer：脚本异步下载，但按顺序在DOMContentLoaded前执行；适合有 DOM 依赖、需保证执行顺序的逻辑（如初始化框架、数据注入） -
async：下载完立刻执行，时机不可控；适合无依赖、可独立运行的脚本（如统计埋点、广告 SDK） - 没加任何属性的
<script>必须放在</body>前，这是兜底方案，但不如defer可控 - 绝对禁用
document.write()：现代浏览器已废弃，执行即清空文档流，必然阻塞且不可恢复
preload 写错比不写更糟
<link rel="preload"> 不是“越多越好”，它是高优先级指令，写错会抢带宽、挤掉关键 CSS 或 HTML 本身。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 只对当前导航「马上就要用」的资源用：
<link rel="preload" href="Lato.woff2" as="font" type="font/woff2" crossorigin>（crossorigin漏写，字体不会生效） -
as属性必须准确：as="style"才能让预加载的 CSS 被后续<link rel="stylesheet">复用；写成as="fetch"或漏掉，优先级降为 low，等于白加 - 别 preload 图片：多数图片由 CSS 或 JS 控制展示时机，提前加载反而浪费带宽；首屏图应直接用
loading="eager"，非首屏才用loading="lazy" - 验证是否生效：打开 Chrome DevTools → Network 面板，看预加载资源的
Priority是否为high；Initiator列是否显示为parser
loading="lazy" 的兼容性与布局偏移风险
loading="lazy" 简单有效，但它只对 <img> 和 <iframe> 生效，且默认行为依赖 Intersection Observer。
- Safari 15.4+ 才支持
loading="lazy"对<iframe>的支持；iOS 15.4 以下设备会忽略该属性，需保留 JS fallback - 必须显式设置
width和height属性，否则懒加载触发时会引发布局偏移（CLS），这是 Core Web Vitals 扣分重灾区 - 不要同时设
src和loading="lazy"再加 JS 监听：浏览器可能先加载src，造成重复请求 -
background-image不支持该属性，需改用<img>+object-fit替代，或用IntersectionObserver手动控制
真正容易被忽略的点是：所有优化都建立在「资源加载时机」和「浏览器解析行为」的精确匹配上。比如 preload 改变的是开始下载时间，不是资源体积；defer 解决的是执行时机，不是 JS 本身是否必要。脱离具体使用路径谈优化，只会让页面越来越臃肿。
