优化静态资源加载优先级的核心是分层调度关键资源：内联首屏css、defer js、preload字体，非关键资源懒加载，并通过cdn与nginx配置强化交付节奏。
优化静态资源加载优先级，核心是让浏览器先拿到最关键的内容，避免阻塞首屏渲染。不是所有资源都该“一拥而上”，而是按用户可见性、功能依赖和执行时机分层调度。
关键资源必须前置且非阻塞
首屏必需的 CSS 和 JS 是优先级最高的两类资源：
- CSS：内联首屏所需样式（≤2–3KB），其余用
<link rel="stylesheet">异步加载，禁用@import（它强制串行） - JS：业务逻辑脚本统一加
defer，放在中；若需立即执行（如性能监控），用<script type="module"></script>或async，但确保不依赖 DOM 顺序 - 字体、关键图标等资源用
<link rel="preload" as="font" crossorigin>提前拉取，防止 FOIT/FOUT
非关键资源延后或懒加载
不影响首屏呈现的内容，应推迟加载以释放带宽和主线程：
- 图片：首屏图禁用
loading="lazy"；非首屏图必须启用，并显式设置width和height防止布局偏移（CLS） - 第三方组件（如评论、分享按钮）：优先用
async，若依赖 DOM 结构则改用defer并控制 script 标签顺序 - 非首屏 CSS（如弹窗、暗色主题）：用
<link media="print" onload="this.media='all'">延迟加载
用 Nginx 和 CDN 强化交付节奏
服务端策略直接影响资源到达浏览器的快慢和时机：
- 对带哈希名的静态资源（
app.a1b2c3.js），Nginx 配置expires 1y+Cache-Control: public, immutable，彻底跳过验证请求 - 启用
sendfile on和tcp_nopush on，减少内核拷贝与小包数量 - 为不同路径配置差异化缓存：比如
/static/fonts/设永久缓存，/static/js/按版本号缓存，/index.html禁用缓存 - 微信小程序等平台建议使用独立二级域名（如
static.example.com）接入 CDN，提升并发能力并规避单域名 6 个连接限制
用 preload/prefetch 主动干预加载链
当浏览器默认推测不准时，用声明式方式“告诉”它下一步要什么：
-
<link rel="preload" as="script" href="detail-page.js">：当前页即将跳转或交互时需要的脚本，提前下载但不执行 -
<link rel="prefetch" as="document" href="/next-page.html">：空闲时预取后续页面 HTML，适合用户行为可预测的场景（如分页、商品列表） - 注意：
preload资源有高优先级，prefetch是低优先级后台任务；两者不可混用，否则可能挤占关键资源带宽
