首屏资源必须早期preload：主图（as="image"）、字体（as="font"需crossorigin）、关键脚本（as="script"需integrity）；图片需loading="eager"和fetchpriority="high"；字体需@font-face配font-display:swap；preload须在meta/title后、资源标签前。
商品详情页首屏资源必须在 HTML 解析早期就发起请求，否则 LCP 会卡在图片、字体或 JS 上——这不是优化问题，是加载时机没对上。
哪些资源必须 preload，且不能写错 as 和 crossorigin
只有三类资源值得用 <link rel="preload">：首屏主图（as="image"）、商品名/价格所用字体（as="font"）、倒计时或库存轮询逻辑脚本（as="script"）。
-
as="font"必须配crossorigin（哪怕同源），漏写会导致 Chrome 静默失败，控制台不报错，文本直接回退系统字体 -
as="script"若原<script></script>有integrity，preload 也得带上，否则缓存不复用，等于白 preload -
as="image"不支持srcset或sizes，只适合尺寸和格式确定的单图；若主图用<picture></picture>，优先改用固定<img src alt="怎么在HTML商品详情页中设置首屏资源优先加载" >+ preload - href 值必须和最终
<img src alt="怎么在HTML商品详情页中设置首屏资源优先加载" >或@font-face src完全一致（含查询参数），否则缓存不命中
首屏图片必须同时设 loading="eager" 和 fetchpriority="high"
fetchpriority="high" 只在 Chromium 112+ / Safari 17.2+ 生效，它不是提速开关，而是防止浏览器把关键图默认标为 Medium 后降级。但这个提示只在 <img alt="怎么在HTML商品详情页中设置首屏资源优先加载" > 的 src 在 HTML 源码中直出时才起作用。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须写
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="怎么在HTML商品详情页中设置首屏资源优先加载" >—— 少一个都可能触发两次加载或优先级掉回 Medium - 不能和
loading="lazy"共存，Chrome 会强制把 Priority 降为 Low，lazy 逻辑优先级更高 - 背景图（
background-image）完全不受fetchpriority影响，关键图必须走<img alt="怎么在HTML商品详情页中设置首屏资源优先加载" >标签 - 缺失
width/height会导致布局不可预测，间接干扰浏览器对“是否首屏”的判断
字体预加载后，CSS 里 @font-face 还得配 font-display: swap
只写 <link rel="preload" as="font"> 不够。浏览器下载完字体不会自动应用，除非 CSS 中的 @font-face 显式声明可替换行为。
立即学习“前端免费学习笔记（深入）”；
-
@font-face必须带font-display: swap，否则文本仍会 FOIT（空白等待），预加载白做 -
src地址要和 preload 的href完全一致，包括协议、域名、路径、查询参数 - 不要在
@font-face的src里重复写同一地址，又在外面 preload 一次——Safari 容易双下，浪费带宽 - WOFF2 字体建议用
type="font/woff2"，帮助浏览器跳过 MIME 类型探测
最容易被忽略的是：preload 必须放在 <meta charset> 和 <title></title> 之后、对应资源标签（如 <link rel="stylesheet">）之前，否则浏览器解析到时已跳过；另外，所有首屏文本节点（<h1></h1>、<p></p>、<button></button>）必须写在 HTML 靠前位置，不能包在 JS 动态容器或 <template></template> 里——否则字体和图片再快，用户也看不到字。
