SuperAPI AI 工具集

preconnect

前端与建站

查看项目

更新于 10-16 06:07

技能介绍

用途

该技能适用于审计页面加载缓慢、资源过重或渲染延迟的场景,特别是当问题与关键第三方源的连接开销相关时。它帮助开发者识别并优化第三方域名的连接建立过程。

主要能力

  • 为重要的第三方域名(例如字体、API)提前建立连接。
  • 通过提前执行 DNS 查询、TCP 握手和 TLS 协商来降低延迟。
  • 避免过度使用 preconnect,建议限制在 2-4 个最关键的源。
  • 检查页面 head 中的 preconnect 提示,识别缺失或不必要的第三方连接。
  • 为关键第三方源添加 <link rel="preconnect">,并移除非必要或利用率低的域名。
  • 解释 preconnect 如何减少第三方资源的连接开销。
  • 提供代码审查:审查影响该规则的路由、资源和加载行为,标记增加不必要网络、CPU 或布局成本的具体文件、请求或渲染步骤,并描述用于确认问题的测量方法。

使用方式

  1. 检查:查看页面 head 中的 preconnect 提示,找出缺失或不必要的第三方域名连接。
  2. 修复:为关键第三方源添加 <link rel="preconnect">,并移除非必要或利用率低的域名。
  3. 解释:说明 preconnect 如何帮助减少第三方资源的连接开销时间。
  4. 代码审查:审查相关路由、资源和加载行为,标记具体问题并说明测量方法。

完整实现细节、代码示例和框架特定指南见 references/rule.md。规则页面:https://frontendchecklist.io/en/rules/performance/preconnect

适用场景

  • 页面加载缓慢,怀疑与第三方资源连接延迟有关。
  • 资源过重或渲染延迟,需要优化关键路径。
  • 使用字体、API 等关键第三方域名的前端项目。

限制

关于该技能的具体平台支持、收费情况、价格、实际效果或详细使用步骤,资料中暂未提供。