必须放且禁用@import，因CSS是渲染阻塞资源，放可尽早下载并行构建CSSOM，而@import强制串行加载、多耗600–900ms且破坏调试与兼容性。
首屏提速不是靠堆功能，而是用对几个关键 HTML 标签的加载语义和时机控制——link、script、img 这三个标签的写法，直接决定白屏时间是 300ms 还是 2.3s。
为什么 link rel="stylesheet" 必须放 @import
CSS 是渲染阻塞资源，浏览器遇到未完成解析的样式表，会暂停 DOM 构建和绘制。把 link 放在 是让下载尽早启动；但若其中用了 @import，它会强制串行加载：必须等前一个 CSS 下载解析完，才发起下一个请求。
- iOS 15.4 之前 Safari 完全忽略
@import的并行能力，实测多拖 600–900ms - 构建工具（如 PostCSS）虽能展开
@import，但 source map 易断，调试时找不到原始行号 - 需要条件加载（如暗色模式）时，改用
<link rel="stylesheet" media="(prefers-color-scheme: dark)">，浏览器原生支持并行
script 标签不加 async 或 defer 就等于挂起首屏
浏览器解析 HTML 遇到无修饰的 <script src="main.js"></script>，会立刻中断 DOM 构建，等 JS 下载、解析、执行完毕才继续——这就是白屏的根源。
- 第三方脚本（统计、埋点）用
async：下载不阻塞，但执行时机不可控，适合无依赖逻辑 - 业务主逻辑用
defer：下载不阻塞，执行在 DOM 解析完成后、DOMContentLoaded前，且按顺序执行 - 绝对不要把同步脚本留在
；兜底方案是挪到前，但不如defer可控 -
type="module"自带defer行为，还支持静态分析与预加载，现代项目优先用它
img 的 loading 属性不是“全加就完事”
loading="lazy" 只对 <img alt="怎么利用HTML标签提升移动端性能？首屏提速方案" > 和 <iframe></iframe> 生效，且默认触发距离视口约 1250px —— 在小屏手机上，这可能意味着轮播图第二张还没进视口就提前加载了，或首屏 Hero 图被跳过。
立即学习“前端免费学习笔记（深入）”；
- 首屏图片（Hero 图、Logo、核心按钮图标）必须显式写
loading="eager"，否则 iOS 15.4 以下直接不加载 - 必须同时设置
width和height，否则加载时尺寸未知，引发布局偏移（CLS），拉低 Core Web Vitals -
background-image不支持loading，得换用<img alt="怎么利用HTML标签提升移动端性能？首屏提速方案" >+object-fit，或退回到IntersectionObserver手动控制 - 别同时写
src和loading="lazy"再配 JS 监听，部分安卓 WebView 会先加载src，造成重复请求
最容易被忽略的是真机行为断层：DevTools 的 Device Mode 只模拟 viewport 和媒体查询，不模拟真实 UA 和渲染引擎；iOS 真机必须开启 Safari Web Inspector 并信任开发机，否则你看到的加载链路全是假的。
