【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址https://gitcode.com/gh_mirrors/fr/Front-End-Checklist点击查看免费下载资源提示resource hints是浏览器在默认发现时机太晚时提前拉取关键资源的声明式手段。本文以 Front-End-Checklist 仓库中performance-resource-hints规则为骨架完整讲解preload、prefetch、preconnect、dns-prefetch四类提示的适用场景、HTML 与框架Vite / Next.js / React落地写法、决策规则与常见反模式并结合仓库源码如 apps/web/app/layout.tsx 的字体预加载实践说明如何在真实项目中测量与验证效果。读完你将掌握一套可复制的资源提示审计与优化流程让 LCP 与首屏加载明显改善。资源提示是什么以及它何时真正有用浏览器默认的加载流程是先解析文档再发现资源。当关键资源LCP 候选图片、首屏字体、路由关键 CSS在文档中被发现得过晚——比如藏在 CSS 文件内部、由 JS 渲染的组件中或者位于第三方 CDN——浏览器就只能等到发现那一刻才开始建立连接与下载白白浪费宝贵的网络往返时间。资源提示link rel...正是为了解决发现得太晚这一问题它提前告知浏览器哪些资源是重要的、哪些源马上要用、哪些资源下一步大概率需要让浏览器更早地安排 DNS、TCP、TLS 与下载。仓库中performance-resource-hints规则的定位见 packages/content/rules/en/performance/resource-hints.mdx与 skills/performance-resource-hints/SKILL.md 均强调同一个核心观点资源提示只有在在正确的时间加速正确的资源时才有价值它们无法弥补错误的选择。因此先定位瓶颈再动手加提示。该技能的aiContext元数据也明确要求在推荐任何改动前先在 DevTools、Lighthouse 或线上字段数据中确认真正的瓶颈所在。四类核心提示语义、写法与取舍preload提前下载当前路由的必需资源preload用于当前路由在首屏绘制或 LCP 阶段就需要、但被浏览器发现得太晚的资源。典型场景是首屏英雄图hero image与通过 CSS 才被发现的字体head !-- 好英雄图是大概率 LCP 候选 -- link relpreload href/images/hero.webp asimage typeimage/webp fetchpriorityhigh !-- 好路由关键字体通过 CSS 被晚发现 -- link relpreload href/fonts/inter-latin.woff2 asfont typefont/woff2 crossorigin /head注意三个细节as属性不能省它告诉浏览器资源的类型决定了请求的优先级分配script、style、font、image 的优先级各不相同缺失as会被当作低优先级处理type属性提供 MIME 类型帮助浏览器只下载与自己能力匹配的格式如只支持 woff2 时才预加载 woff2crossorigin对字体是必填的字体资源默认以 CORS 模式请求缺少crossorigin会导致重复请求或请求失败详见下文常见错误。preload与fetchpriorityhigh可以组合使用。仓库中 fetchpriority-attribute 规则 指出LCP 元素通常是英雄图但浏览器常因其被晚发现而分配过低优先级fetchpriorityhigh是成本为零、收益立竿见影的优先级提示。prefetch预取下一步而不是当前步prefetch面向未来路由或未来交互下载并缓存很可能但还不必需的资源让用户点击下一个导航时立即呈现head !-- 好很可能的下一步导航 -- link relprefetch href/checkout link relprefetch href/static/checkout.js asscript !-- 坏当前路由的关键 CSS 应当正常加载或 preload而不是 prefetch -- link relprefetch href/styles/home.css asstyle /head关键区分当前路由的关键资源用preload未来路由的候选资源用prefetch。把当前路由关键 CSS 放进prefetch它会被降级为低优先级、空闲时才下载反而拖延首屏。prefetch的数量应克制只保留最可能的下一跳导航目标。preconnect为即将立刻使用的源预热连接preconnect在资源请求发出之前就并行完成目标源的 DNS 查询、TCP 握手和 TLS 协商把这些连接开销从关键路径上移除。它最适合当前路由马上就会用到的第三方源——字体托管商、图片 CDN、API 源head !-- 好首屏字体依赖这些源 -- link relpreconnect hrefhttps://fonts.googleapis.com link relpreconnect hrefhttps://fonts.gstatic.com crossorigin !-- 好图片 CDN 提供英雄图媒体资源 -- link relpreconnect hrefhttps://images.example-cdn.com crossorigin !-- 比 preconnect 更适合投机性第三方 -- link reldns-prefetch hrefhttps://analytics.example.com /head同一源内资源通常受益较小因为浏览器对同源已有成熟的连接策略——preconnect的最佳舞台是第三方源此点与仓库中 preconnect 规则 的表述一致。dns-prefetch轻量级的兜底方案当某个外部源可能用到、但还不确定时完整的preconnect可能过度——此时用dns-prefetch只提前解析 DNS成本更低link reldns-prefetch hrefhttps://analytics.example.com link reldns-prefetch hrefhttps://chat.example.com它应作为preconnect的轻量替代品而不是全站默认配置已经处于关键路径上的源值得完整的preconnect。反模式过早过多地堆砌提示把提示不加区分地堆进head效果往往是负面的——每个不必要的 preload / prefetch / preconnect 都在与更重要的任务争夺带宽、socket 与解析器注意力head !-- 坏过多的 preload 互相竞争 -- link relpreload href/fonts/a.woff2 asfont crossorigin link relpreload href/fonts/b.woff2 asfont crossorigin link relpreload href/fonts/c.woff2 asfont crossorigin link relpreload href/carousel.js asscript link relpreload href/reviews.js asscript link relpreload href/chat-widget.js asscript !-- 坏投机性源不值得提前建立 socket -- link relpreconnect hrefhttps://chat.example.com link relpreconnect hrefhttps://ads.example.com link relpreconnect hrefhttps://social.example.com /head仓库 preconnect 规则 对这条反模式的解释是聊天、评论、广告这类仅在交互后才使用的第三方通常不应出现在首屏关键路径上不加区分地为每个第三方域preconnect会把定向优化变成噪音并浪费连接预算与设备电量。资源提示决策规则决策规则很重要真实世界的瀑布图数据表明过早提示错误的资源比完全不提示更糟。仓库规则文档给出了下面的对照表见 rule.md提示用于避免用于实用上限preload当前路由在首屏或 LCP 需要、但发现太晚的资源未来路由资源、低优先级小组件、或已被足够早发现的资源通常每个路由 3-5个 preloadprefetch下一步路由或交互很可能但还不必需的资源当前路由关键资源带宽敏感用户且下一步不确定时只保留最可能的几个导航目标preconnect确定马上要用的源尤其是字体、媒体 CDN、首屏 API投机性第三方、或很久以后才使用的源通常 2-4个源dns-prefetch低置信度外部源完整连接设置为时过早已在关键路径上、值得完整preconnect的源作为轻量兜底不要当默认项框架落地HTML / Vite / Next.js / React仓库规则文档用CodeTabs给出了四种环境的完整示例见 resource-hints.mdx原生 HTML 与 Vite通用 HTML 与 Vite 的index.html写法一致把提示直接放进head!-- index.htmlVite 同理 -- head link relpreconnect hrefhttps://fonts.gstatic.com crossorigin link relpreload href/fonts/Inter.woff2 asfont typefont/woff2 crossorigin /headNext.js在根布局的head中声明Next.js 使用 App Router 时可在根布局的head标签内声明资源提示crossOrigin在 JSX 中须写成驼峰式import type { ReactNode } from react export default function RootLayout({ children }: { children: ReactNode }) { return ( html langen head link relpreconnect hrefhttps://fonts.gstatic.com crossOriginanonymous / link relpreload href/fonts/Inter.woff2 asfont typefont/woff2 crossOriginanonymous / /head body{children}/body /html ) }React借助 react-helmet 按页面注入在不使用框架级 Layout 的场景下可以用react-helmet在页面级注入提示——适合只对特定页面预取下一步的诉求import { Helmet } from react-helmet function PricingPage() { return ( Helmet link relprefetch href/signup / link relprefetch href/static/signup.js asscript / /Helmet ) }仓库真实实践next/font 如何自动处理字体预加载Front-End-Checklist 的 Web 应用本身就是资源提示的受益者。在 apps/web/app/layout.tsx 中应用使用next/font/google加载三套字体Sora、Public Sans、Fira Code并统一配置display: swapconst sora Sora({ variable: --font-sora, subsets: [latin], display: swap }) const publicSans Public_Sans({ variable: --font-public-sans, subsets: [latin], display: swap }) const firaCode Fira_Code({ variable: --font-fira-code, subsets: [latin], display: swap })这正是框架级资源提示管理的典型范式next/font在构建期自行注入字体文件的preload与preconnect标签并自动携带正确的crossorigin与asfont开发者无需手工编写link relpreload从而规避了忘记crossorigin导致重复请求这类经典错误。字体的 CSS 变量通过launchFontClassNames定义于 packages/design-system/src/typography.ts绑定到html的 class 上。从源码结构可以推断该应用采用框架自管字体提示的策略把手工资源提示的精力留给真正需要的地方例如静态图片的fetchpriority与第三方源的preconnect。这也是一个值得借鉴的分工能用框架自动化的交给框架手工提示只留给框架管不到的关键资源。常见错误清单preload 了当前路由不需要的资源这会把带宽从 CSS、字体和 LCP 资源上偷走prefetch 自己当前所在的页面不改变发现顺序通常只是增加噪音preconnect 了太多源为每个供应商打开 socket 会浪费连接预算与电量忘记as或crossorigin错误的属性会降低优先级分配精度或触发重复请求字体场景尤其致命跳过测量资源提示只有在瀑布图确实按预期发生变化时才有价值。验证改动前后必须测量自动化检查在 Lighthouse、PageSpeed Insights 或 DevTools 中测量受影响页面或流程确认目标指标如 LCP确实改善检查网络瀑布图或性能时间线确认预期的资源下载/执行变化真的发生了——比如对应字体请求出现在瀑布图更早的位置、第三方源在首屏资源请求前已完成连接建立。手动检查在限速的移动端配置下验证而不是只在本地桌面环境验证如果该规则对应某个性能预算或 Core Web Vitals 阈值确认改动后页面仍稳定停留在阈值之内。资源提示的完整规则定义位于 packages/content/rules/en/performance/resource-hints.mdx技能入口与快速参考位于 skills/performance-resource-hints/SKILL.md聚焦preconnect的姊妹规则见 packages/content/rules/en/performance/preconnect.mdx。在动手优化前请先借助 DevTools 或字段数据确认瓶颈确实出在资源发现太晚再按本文的决策规则精准投放提示——这才是资源提示正确的打开方式。赞分享【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址https://gitcode.com/gh_mirrors/fr/Front-End-Checklist点击查看免费下载相关推荐Front-End-Checklist 资源提示Resource Hints实战指南用 preload / prefetch / preconnect 将 LCP 提前 100-300msFront End Checklist 资源提示Resource Hints实战指南用 preload / prefetch / preconnect 将Front-End-Checklist 前端性能指南preload、prefetch、preconnect 与 dns-prefetch 资源提示Resource Hints完整实战Front End Checklist 前端性能指南preload、prefetch、preconnect 与 dns prefetch 资源提示ResouFront-End-Performance-Checklist资源预加载preload、prefetch、preconnect详解Front End Performance Checklist资源预加载preload、prefetch、preconnect详解 前端性能优化是提升用户体验前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考