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










