quicklink

Google Chrome Labs 出品的智能链接预取库，在浏览器空闲时自动预加载视口内链接，加速后续页面导航。

性能优化预加载prefetch导航加速

轻量级（< 2KB）性能优化库，使用 Intersection Observer 检测视口内链接，通过 requestIdleCallback 在空闲时预取或预渲染，支持 Speculation Rules API 及 prefetch/prerender 等多种策略，具备连接感知能力。

访问官网

quicklink - 智能预加载链接

Google Chrome Labs 出品的智能链接预取库，在浏览器空闲时自动预加载视口内链接，加速后续页面导航。

技术简介说明

quicklink 是由 Google Chrome Labs 开发的轻量级性能优化库，旨在通过智能预加载机制提升网站导航体验。该库压缩后体积小于 2KB，能够在浏览器空闲时自动检测用户视口内的链接，并提前预取或预渲染这些链接指向的页面资源，使后续页面导航几乎瞬时完成。

quicklink 的核心价值在于其"智能"特性：使用 Intersection Observer API 检测视口内的链接，利用 requestIdleCallback 在浏览器空闲时执行预加载，同时具备连接感知能力，会在慢速网络或启用数据节省模式时自动跳过预加载。这种设计在不浪费带宽的前提下，显著提升了用户的导航体验。

作为 Google Chrome Labs 的官方项目，quicklink 代表了现代 Web 性能优化的最佳实践。v3.0+ 版本已支持最新的 Speculation Rules API——Chrome 推荐的原生预加载规范，为开发者提供了灵活的预加载策略选择。

基本信息

官网：https://getquick.link/
GitHub：https://github.com/GoogleChromeLabs/quicklink
License：Apache-2.0
最新版本：v3.0.1（2025 年 5 月 12 日）
主要维护者/公司：Google Chrome Labs
npm 包：quicklink
包大小：< 2KB（minified + gzipped）
GitHub Stars：11.3k+

快速上手

安装

# 使用 npm 安装
npm install quicklink
 
# 使用 yarn 安装
yarn add quicklink
 
# 使用 pnpm 安装
pnpm add quicklink

或者直接通过 CDN 引入：

<!-- 从 unpkg CDN 加载 -->
<script src="https://unpkg.com/[email protected]/dist/quicklink.umd.js"></script>

基础配置

import { listen } from 'quicklink';
 
// 自动预加载视口内的所有链接
listen();

最小示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>quicklink 示例</title>
</head>
<body>
  <a href="/page1.html">页面 1</a>
  <a href="/page2.html">页面 2</a>
  <a href="/page3.html">页面 3</a>
  
  <!-- 引入 quicklink -->
  <script src="https://unpkg.com/[email protected]/dist/quicklink.umd.js"></script>
  <script>
    // 初始化 quicklink
    quicklink.listen();
  </script>
</body>
</html>

高级配置示例

import { listen } from 'quicklink';
 
listen({
  // 是否使用 prerender（需要浏览器支持 Speculation Rules API）
  prerender: true,
  
  // 超时时间（毫秒）
  timeout: 2000,
  
  // 节流控制（并发预加载数量）
  throttle: 2,
  
  // 预加载优先级
  priority: 'low',
  
  // 允许的源（跨域预加载时）
  origins: [
    'https://example.com',
    'https://api.example.com'
  ],
  
  // 自定义忽略规则
  ignores: [
    /\/admin\/.*/,
    (uri, elem) => elem.classList.contains('no-prefetch'),
    (uri, elem) => elem.hasAttribute('download')
  ],
  
  // 限制预加载数量
  limit: 10
});

核心概念与架构

工作原理

quicklink 采用多层检测机制实现智能预加载：

视口检测：使用 Intersection Observer API 监测哪些链接元素当前在用户视口内
空闲调度：通过 requestIdleCallback 在浏览器主线程空闲时执行预加载
连接感知：检查 navigator.connection.effectiveType 判断网络状况，在慢速网络或数据节省模式时跳过
资源获取：根据配置使用不同策略预加载目标资源

预加载策略

quicklink 支持四种预加载模式：

Prefetch（预取）：通过 <link rel="prefetch"> 或 XHR/fetch 提前获取资源
Prerender（预渲染）：使用 Speculation Rules API 完全预渲染页面
XHR：使用 XMLHttpRequest 预取资源
Fetch：使用 fetch API 预取资源

Speculation Rules API

quicklink 3.0+ 支持最新的 Speculation Rules API，这是 Chrome 推荐的原生预加载方式：

// 注入 speculation rules 实现 prerender
const rules = {
  prerender: [{
    where: {
      and: [
        { href_matches: "/**" },
        { not: { href_matches: "/admin/**" } }
      ]
    },
    eagerness: "moderate"
  }]
};
 
const script = document.createElement('script');
script.type = 'speculationrules';
script.textContent = JSON.stringify(rules);
document.head.appendChild(script);

核心特性

智能视口检测：使用 Intersection Observer 精确识别用户可见的链接
空闲时间执行：利用 requestIdleCallback 避免阻塞主线程
连接感知：自动检测网络状况，在慢速网络或数据节省模式下禁用预加载
多策略支持：支持 prefetch、prerender、XHR、fetch 四种预加载方式
Speculation Rules API：支持 Chrome 最新的原生预加载规范
超轻量级：压缩后小于 2KB，对页面性能影响可忽略
灵活配置：支持超时、节流、优先级、源限制、忽略规则等
框架集成：提供 React、Angular、Vue 等框架的集成方案

生态图

关键依赖

quicklink 几乎零依赖，仅依赖浏览器原生 API：

Intersection Observer API
requestIdleCallback
navigator.connection（Network Information API）

框架集成

React / Next.js 集成

npm install quicklink webpack-route-manifest

// pages/_app.js
import { withQuicklink } from 'quicklink/react';
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
 
export default withQuicklink(MyApp);

Angular 集成

npm install ngx-quicklink

import { QuicklinkStrategy } from 'ngx-quicklink';
 
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: QuicklinkStrategy
    })
  ]
})
export class AppModule { }

Vue 集成

import { listen } from 'quicklink';
 
router.afterEach(() => {
  listen();
});

CMS 集成

WordPress：通过插件集成
Drupal：官方模块（https://www.drupal.org/project/quicklink）

适用场景

多页面应用（MPA）：传统多页面网站预加载用户可能访问的下一个页面
博客和新闻网站：文章列表页预加载文章详情页
电商网站：商品列表页预加载商品详情页
文档网站：目录导航预加载相关文档页面
单页应用（SPA）：配合路由系统预加载未来可能访问的路由
移动端优化：在网络状况良好时预加载，提升移动用户体验
高流量网站：减少服务器响应时间感知，改善 Core Web Vitals

开发与工程化

开发流程

git clone https://github.com/GoogleChromeLabs/quicklink.git
cd quicklink
npm install
npm run dev      # 开发模式
npm run build    # 构建
npm test         # 测试

构建产物

// ES Module
import { listen } from 'quicklink';
 
// CommonJS
const { listen } = require('quicklink');
 
// UMD（浏览器直接引入）
<script src="quicklink.umd.js"></script>

性能监控

// 监控预加载成功率
new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.initiatorType === 'link') {
      console.log('预加载资源:', entry.name, '耗时:', entry.duration);
    }
  });
}).observe({ entryTypes: ['resource'] });

性能与安全

性能特点

优势：

极小体积（< 2KB），加载开销可忽略
智能调度，不阻塞主线程渲染
网络感知，避免在慢速网络下浪费带宽
按需预加载，不浪费资源

性能影响：

预加载会增加网络请求数量
Prerender 模式会消耗更多内存和 CPU
不当使用可能导致带宽浪费

优化建议

合理设置限制：使用 limit 和 throttle 控制并发预加载数量
精确配置忽略规则：避免预加载不需要的页面（如登录页、管理页）
监控网络状况：根据用户网络动态调整预加载策略
A/B 测试：对比开启前后的性能指标（LCP、TTI 等）

安全注意事项

源限制：使用 origins 配置只允许预加载可信域名的资源
忽略敏感路径：确保不会预加载包含敏感信息的页面
CORS 策略：跨域预加载需要目标服务器正确配置 CORS
缓存竞争：预加载的资源会占用浏览器缓存空间

已知性能瓶颈

大量链接：页面链接过多时 Intersection Observer 开销增加
慢速网络：2G/3G 网络下预加载可能适得其反
低端设备：Prerender 模式对设备性能要求较高
动态内容：频繁更新的页面预加载后可能已过期

技术对比

特性	quicklink	instant.page	Guess.js	Speculation Rules API
体积	< 2KB	~1KB	~10KB	原生（0KB）
预加载策略	prefetch/prerender/XHR/fetch	prefetch	prefetch	prefetch/prerender
视口检测	✅ Intersection Observer	✅ 悬停触发	❌ 基于 ML 预测	❌ 基于规则
网络感知	✅	✅	✅	✅
框架集成	React/Angular/Vue	无	React/Next.js	原生
智能预测	❌ 基于视口	❌ 基于悬停	✅ ML 预测	❌ 基于规则
浏览器支持	现代浏览器	现代浏览器	现代浏览器	仅 Chrome/Edge

选择建议：

选择 quicklink：需要轻量、开箱即用的视口感知预加载方案
选择 Speculation Rules API：只针对 Chrome/Edge 用户，希望零 JS 依赖
选择 Guess.js：有足够数据进行 ML 预测的大型站点

最佳实践

生产环境配置

listen({
  prerender: false, // 保守使用 prerender
  timeout: 3000,
  throttle: 2,
  priority: 'low',
  limit: 10,
  origins: ['https://yourdomain.com'],
  ignores: [
    /\/login/,
    /\/admin/,
    /\/checkout/,
    (uri, elem) => elem.hasAttribute('download'),
    (uri, elem) => elem.getAttribute('target') === '_blank'
  ]
});

常见陷阱

// ❌ 错误：预加载所有链接，浪费带宽
listen({ limit: Infinity });
 
// ✅ 正确：合理限制
listen({ limit: 10, throttle: 2 });
 
// ❌ 错误：不考虑网络状况
listen();
 
// ✅ 正确：检查网络
if (navigator.connection?.effectiveType === '4g') {
  listen();
}
 
// ❌ 错误：可能预加载敏感页面
listen();
 
// ✅ 正确：忽略敏感路径
listen({
  ignores: [/\/admin/, /\/private/, /\/api\/.*/]
});

技术局限与边界

已知限制

浏览器兼容性：Intersection Observer 需要 IE11+ 或 polyfill；requestIdleCallback 不支持 Safari（需 polyfill）；Speculation Rules API 仅支持 Chrome 121+ 和 Edge
网络开销：预加载增加网络流量，用户可能为未访问页面支付流量费用
缓存竞争：预加载资源占用浏览器缓存空间，可能挤出真正需要的资源
预测准确性：基于视口的预测不一定准确，用户可能点击视口外链接

不适用场景

SPA 内部路由切换（已有前端路由管理）
低带宽环境（2G/3G 网络）
用户付费网络（按流量计费）
登录/支付流程等关键路径页面
隐私敏感页面（预加载可能泄露浏览意图）

迁移注意事项

从其他预加载方案迁移时：

移除手动的 <link rel="prefetch"> 标签
配置合适的 origins 和 ignores 规则
监控性能指标对比（LCP、TTI）
先在部分页面启用，验证效果后再全面推广

学习资源

官方网站：https://getquick.link/
GitHub 仓库：https://github.com/GoogleChromeLabs/quicklink
web.dev 教程：https://web.dev/articles/quicklink
Chrome Developers 文档：https://developer.chrome.com/docs/web-platform/prerender-pages
Speculation Rules API：https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
CSS Wizardry 深度分析：https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/
Shopify 实践案例：https://performance.shopify.com/blogs/blog/speculation-rules-at-shopify

2026 年现状

发展趋势

Speculation Rules API 成为主流：quicklink 3.0+ 已支持该 API；Chrome 持续投入优化；Shopify 等大型平台已采用
与框架深度集成：Next.js、Nuxt 等框架内置预加载支持
浏览器原生能力增强：Chrome 内置 prerender 支持不断演进

社区活跃度

GitHub Stars：11.3k+
维护状态：活跃维护
版本发布：2025 年发布 v3.0.0 大版本

替代方案关注

原生 Speculation Rules API：浏览器原生支持，无需 JavaScript 依赖
框架内置方案：Next.js 的 <Link> 组件已内置 prefetch 能力
AI 预测工具：基于 ML 的智能预加载方案

quicklink 作为 Google Chrome Labs 的官方项目，在智能预加载领域持续发挥重要作用。虽然浏览器原生 Speculation Rules API 在不断演进，但 quicklink 提供的跨浏览器兼容性、灵活配置和框架集成能力，使其仍然是 2026 年值得推荐的预加载解决方案。