前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载本文以仓库内 rendering-resource-hints.md 规则文档为主体系统讲解 React DOM 提供的六大资源提示 APIprefetchDNS、preconnect、preload、preloadModule、preinit、preinitModule。你将掌握如何在 Server Components 与客户端组件中提前向浏览器打招呼在 HTML 到达之前就开始解析 DNS、建立连接、预取字体与样式从而把关键资源的加载时间压到最短——这是 Vercel React 最佳实践技能库中标注为HIGH 影响减少关键资源加载时间的核心渲染优化规则。一、什么是资源提示为什么它的影响级别是 HIGH浏览器加载页面时从发现资源到资源可用之间存在一条不可忽略的链路DNS 解析、TCP 连接、TLS 握手、下载、解析执行。传统做法是浏览器渲染到link或script标签时才逐段发现并下载资源这会在首屏路径上制造串行等待。React DOM 提供的资源提示 API 解决的是提前发现与提前建立连接的问题它允许你在组件渲染期间直接调用 API向浏览器声明我接下来会用到这些资源。这些调用会被 React 转化为浏览器原语如link reldns-prefetch、link relpreconnect、link relpreload、link relmodulepreload让浏览器并行地去解析 DNS、预热连接、预取文件。正如规则文档所标注的Impact: HIGH (reduces load time for critical resources)资源提示的价值在Server Components服务器组件场景中尤为突出服务器组件在服务端渲染时即可触发这些 API浏览器甚至还没收到 HTML 就开始了 DNS 解析与连接建立关键资源的下载窗口被大幅前移。二、六大资源提示 API 一览规则文档给出了 React DOM 提供的六个核心 API按成本递增、收益递增的梯度排列API作用成本prefetchDNS(href)仅解析某个域名的 DNS最低preconnect(href)建立完整连接DNS TCP TLS低preload(href, options)预取样式表、字体、脚本、图片等资源中preloadModule(href)预取即将使用的 ES Module中preinit(href, options)预取并执行样式表或脚本较高preinitModule(href)预取并执行ES Module较高要点拆解prefetchDNS(href)只做 DNS 解析适合之后某刻可能连接的第三方域名。它不建立 TCP/TLS 连接开销最小。preconnect(href)把 DNS TCP TLS 一次做完适合马上就会发起请求的 API 或 CDN 域名。注意它在整个页面生命周期内保持连接不宜滥用。preload(href, options)按options中声明的资源类型as预取资源适合当前页面即将使用的关键资源——字体、首屏样式、关键图片、关键脚本。preloadModule(href)针对 ES Module 的预取版本适合很可能会进行的下一次导航所需的代码分割模块。preinit(href, options)不仅预取还会立即下载并执行样式表或脚本。适合必须尽早生效的关键 CSS如as: style与关键脚本。preinitModule(href)preinit的模块版本预取并执行 ES Module。从源码结构上看这六条规则共同构成了 .agents/skills/vercel-react-best-practices/rules/rendering-resource-hints.md 的核心内容并被归入该技能库第 6 类 Rendering Performance渲染性能分区——见 _sections.md 中的分区定义rendering-前缀、MEDIUM 分区、关注减少浏览器需要做的工作。三、六个 API 的选用决策表规则文档提供了一张精炼的何时用哪个决策表这是实战中最值得贴在代码旁的速查卡API使用场景prefetchDNS之后才会连接的第三方域名preconnect立即就要请求的 API 或 CDNpreload当前页面必需的关键资源preloadModule很可能在下次导航用到的 JS 模块preinit必须尽早执行的样式表 / 脚本preinitModule必须尽早执行的 ES Module选择逻辑可以归纳为两条轴时间轴现在就要 → 用preconnect/preinit稍后就要 → 用prefetchDNS/preload。执行轴只需要下载供将来使用→preload*需要下载并立即求值 →preinit*。四、实战示例三个可复制场景4.1 预连接第三方 APIpreconnectprefetchDNS规则文档给出的第一个示例面向最常见的需求——页面依赖第三方服务埋点、API、CDN却不想让用户在首次请求时白白等待建连import { preconnect, prefetchDNS } from react-dom export default function App() { prefetchDNS(https://analytics.example.com) preconnect(https://api.example.com) return main{/* content */}/main }对埋点域名用prefetchDNS它的请求相对低频、可容忍慢一拍只提前做 DNS 解析即可。对核心 API 域名用preconnect首次数据请求是首屏关键路径把 DNS TCP TLS 全部提前完成。注意这些调用应放在组件顶层直接调用不依赖副作用时机渲染期间执行即可生效。4.2 预加载关键字体与关键样式preloadpreinit第二个示例面向字体与首屏 CSS 这两个经典的隐形瓶颈场景import { preload, preinit } from react-dom export default function RootLayout({ children }) { // 预加载字体文件 preload(/fonts/inter.woff2, { as: font, type: font/woff2, crossOrigin: anonymous }) // 立即获取并应用关键样式表 preinit(/styles/critical.css, { as: style }) return ( html body{children}/body /html ) }这里有两个容易踩坑的细节值得展开字体必须带crossOrigin: anonymous即使字体与页面同源font-face的字体请求也按 CORS 规则处理缺少该选项会导致preload与真正使用字体时的请求不匹配、预加载失效。type: font/woff2与资源的 MIME 类型保持一致帮助浏览器准确匹配后续请求。preinit(/styles/critical.css, { as: style })与preload的区别preload只是把样式下载到缓存而preinit会下载并立即应用——对于阻塞首屏渲染的关键 CSSpreinit是更贴切的语义它等价于提前把这张样式表当成同步 CSS 处理。普通样式表用preload即可关键样式表用preinit。4.3 为代码分割路由预取模块preloadModulepreinitModule第三个示例展示如何把资源提示用于按需路由代码分割场景让用户还没点模块已经在路上import { preloadModule, preinitModule } from react-dom function Navigation() { const preloadDashboard () { preloadModule(/dashboard.js, { as: script }) } return ( nav a href/dashboard onMouseEnter{preloadDashboard} Dashboard /a /nav ) }把预取动作挂在onMouseEnter悬停上利用悬停往往预示点击的用户意图窗口完成模块下载。preloadModule与浏览器link relmodulepreload语义对应专门用于 ES Module。如果该模块在进入后需要立即执行可升级为preinitModule默认情况下preloadModule只负责下载缓存不执行。这一做法与技能库中另一条规则 bundle-preload.md基于用户意图预加载形成互补那条规则建议用动态import(./monaco-editor)在 hover/focus 时拉取重型 bundle并配合typeof window ! undefined检查避免 SSR 打包膨胀本规则则给出了 React DOM 层面的preloadModule声明式方案。两者可以按场景任选——需要精确控制模块执行时机时用动态import需要提前下载但不执行的纯预取时用preloadModule。五、为什么在 Server Components 中尤其重要规则文档特别强调这些 API在服务器组件中尤其有用能在客户端收到 HTML 之前就启动资源加载原文especially useful in server components to start loading resources before the client even receives the HTML。理解这一点需要抓住 SSR 的时间线服务器组件在服务端执行渲染 HTML 并同时触发资源提示调用浏览器原语随 HTML 一并输出浏览器解析到head中的dns-prefetch/preconnect/preload标签时HTML 尚未下载完但连接与下载已经并行开始等到 HTML 主体到达、React 水合hydration开始真正使用这些资源时它们已在缓存中等待。这相当于把下载关键资源从串行的渲染路径中剥离出来提前到与 HTML 传输并行。对字体、关键 CSS、首屏 API 这类资源收益是立竿见影的首屏时间缩短。顺带一提与资源提示配套的还有同属渲染性能分区的 rendering-script-defer-async.md 规则脚本标签若不加defer/async会阻塞 HTML 解析延迟 FCP 与 TTI。资源提示负责提前拿资源defer/async负责别挡住渲染两者共同构成脚本与关键资源加载的完整优化闭环。六、落地时的注意事项综合规则文档内容与浏览器资源提示语义落地时建议遵守以下几点不要对所有域名preconnect每个preconnect都会让浏览器在整个页面生命周期内保持一条空闲连接占用客户端资源。只对首屏关键路径上的域名使用。区分preload与preinitpreload是放缓存将来用preinit是下载并执行/应用。用错语义不会报错但会让关键资源仍然晚到。字体预加载必须补全crossOrigin: anonymous与type否则预取与真实请求不匹配预加载白做。模块预取配合用户意图把preloadModule挂在onMouseEnter/onFocus等意图信号上避免无条件预取所有路由模块造成带宽浪费。与动态import方案做取舍参考 bundle-preload.md需要精确控制执行时机时优先动态import纯提前下载场景用 React DOM 资源提示 API。七、这条规则在技能库中的定位该规则文件位于仓库的 .agents/skills/vercel-react-best-practices/ 目录下这是 Vercel Engineering 维护的 React / Next.js 性能优化技能库版本 1.0.0见 metadata.json按影响级别分 8 个分区、以分区前缀-规则名的命名约定组织详见 README.md 与 _sections.md所属分区Rendering Performance渲染性能影响级别 MEDIUM前缀rendering-本条规则影响HIGH减少关键资源加载时间是本分区内少有的 HIGH 级规则规则文件遵循统一的 _template.md 结构frontmattertitle / impact / impactDescription / tags 规则说明 正反示例 参考链接规则按标题在分区内自动排序ID 由构建脚本自动生成pnpm build。这也意味着如果你在团队内以规则文件形式沉淀性能规范可以完全复用这套结构与影响分级体系——把影响级别写进 frontmatter让自动化的代码审查与 LLM 驱动的重构能按优先级决策。小结React DOM 的资源提示 API 用六个声明式调用覆盖了提前解析 DNS → 提前建连 → 提前下载 → 提前执行的完整资源加速阶梯。配合 Server Components 的渲染时机它们能在客户端收到 HTML 之前就启动关键资源的加载是首屏性能优化中投入产出比极高的一招。使用时牢记两条主线按需使用、分级预取prefetchDNS→preconnect→preload*→preinit*以及关键资源必须匹配正确的选项字体加crossOrigin、样式区分preload与preinit就能在不牺牲带宽的前提下最大化关键资源的加载效率。赞分享前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载相关推荐Open Slide 中的 React DOM 资源提示Resource Hints最佳实践preload / preconnect / preinit 详解Open Slide 中的 React DOM 资源提示Resource Hints最佳实践preload / preconnect / preinitZCode 实战React DOM 资源提示Resource Hints全面指南——用 prefetchDNS / preconnect / preload / preinit 压榨首屏性能ZCode 实战React DOM 资源提示Resource Hints全面指南——用 prefetchDNS / preconnect / preloaPolar 前端实战用 React DOM Resource Hints 预加载关键资源缩短首屏加载时间Polar 前端实战用 React DOM Resource Hints 预加载关键资源缩短首屏加载时间 本篇技术指南以 Polar 仓库中 Vercel后端前端金融科技上一篇如何永久保存微信聊天记录WeChatMsg开源工具完整指南下一篇自建激活服务器安全吗jrebel-license-active-server 安全风险与最佳实践创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考