🌐 边缘计算
什么是边缘计算
边缘计算（Edge Computing）是一种将计算和数据存储推向更靠近用户和数据来源的分布式计算范式。在前端领域，边缘计算意味着在 CDN 边缘节点上运行 JavaScript 代码，实现更低的延迟和更好的用户体验。
💡 核心理念
让代码离用户更近，减少网络延迟，提升响应速度，降低源站压力。
传统架构 vs 边缘架构
| 特性 | 传统云架构 | 边缘计算架构 |
|---|---|---|
| 计算位置 | 集中式数据中心 | 分布式边缘节点（全球数百个位置） |
| 延迟 | 50-200ms（取决于距离） | <10ms（就近处理） |
| 扩展性 | 需要预配置容量 | 自动弹性扩展 |
| 成本 | 按服务器容量计费 | 按实际使用量计费 |
| 单点故障 | 存在风险 | 天然高可用 |
边缘计算在前端的应用场景
1. 动态内容加速
在边缘节点上生成个性化 HTML，减少回源请求。
// Cloudflare Workers 示例
export default {
async fetch(request, env) {
const url = new URL(request.url);
const country = request.cf?.country || 'US';
// 根据用户位置返回不同内容
if (country === 'CN') {
return new Response(`<h1>欢迎来到中国站点</h1>`, {
headers: { 'content-type': 'text/html' }
});
}
return fetch(request);
}
};
2. A/B 测试
在边缘进行流量分流，无需修改应用代码。
async fetch(request) {
const userId = request.headers.get('X-User-ID');
const bucket = parseInt(userId) % 10;
// 50% 用户看到新版本
if (bucket < 5) {
request.headers.set('X-AB-Version', 'v2');
}
return fetch(request);
}
3. 身份验证
在边缘验证 JWT Token，保护后端服务。
import { verify } from '@tsndr/cloudflare-worker-jwt';
async fetch(request, env) {
const authHeader = request.headers.get('Authorization');
if (!authHeader || !authHeader.startsWith('Bearer ')) {
return new Response('Unauthorized', { status: 401 });
}
const token = authHeader.split(' ')[1];
const isValid = await verify(token, env.JWT_SECRET);
if (!isValid) {
return new Response('Invalid token', { status: 401 });
}
return fetch(request);
}
4. 请求聚合
在边缘聚合多个 API 请求，减少客户端请求次数。
async fetch(request) {
const [userRes, postsRes, statsRes] = await Promise.all([
fetch('https://api.example.com/user/123'),
fetch('https://api.example.com/posts?userId=123'),
fetch('https://api.example.com/stats?userId=123')
]);
const [user, posts, stats] = await Promise.all([
userRes.json(),
postsRes.json(),
statsRes.json()
]);
return Response.json({ user, posts, stats });
}
5. 图片优化
在边缘动态调整图片尺寸和格式。
async fetch(request, env) {
const url = new URL(request.url);
const width = url.searchParams.get('w') || '800';
const format = url.searchParams.get('f') || 'webp';
// 使用 Cloudflare Images
const imageUrl = `https://imagedelivery.net/${env.ACCOUNT_HASH}/${url.pathname}/w=${width},f=${format}`;
return fetch(imageUrl);
}
主流边缘计算平台
| 平台 | 运行环境 | 特点 | 定价模式 |
|---|---|---|---|
| Cloudflare Workers | V8 Isolates | 启动快、冷启动<5ms、全球 300+ 节点 | 免费 10 万次请求/天 |
| Vercel Edge Functions | Edge Runtime (V8) | 与 Next.js 深度集成、开发体验好 | 免费 100GB 小时/月 |
| Netlify Edge Functions | Deno | 基于 Deno、TypeScript 原生支持 | 免费 125K 调用/月 |
| AWS Lambda@Edge | Node.js/Python | 与 CloudFront 集成、功能强大 | 按请求和持续时间计费 |
| Fastly Compute@Edge | WebAssembly | 支持多语言、高性能 | 免费 $0.0125/百万操作 |
边缘数据库
2026 年，边缘数据库已经成熟，支持在边缘节点存储和查询数据：
| 数据库 | 类型 | 特点 |
|---|---|---|
| Cloudflare D1 | SQLite | Serverless SQL 数据库、与 Workers 集成 |
| Turso | libSQL | 基于 SQLite、边缘优先、实时同步 |
| PlanetScale | MySQL | Serverless MySQL、全球分布式 |
| Upstash | Redis | Serverless Redis、按请求计费 |
开发实践
1. 本地开发
// wrangler.toml (Cloudflare Workers 配置)
name = "my-edge-app"
main = "src/index.ts"
compatibility_date = "2026-01-01"
[dev]
port = 8787
[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "xxxx-xxxx-xxxx"
2. 部署命令
# 安装 Wrangler CLI
npm install -g wrangler
# 登录
wrangler login
# 本地开发
wrangler dev
# 部署到边缘
wrangler deploy
3. 环境变量管理
// wrangler.toml
[vars]
ENVIRONMENT = "production"
API_VERSION = "v2"
[secrets]
# 使用 wrangler secret put API_KEY 设置
性能优化技巧
- ✅ 利用缓存：使用 Cache API 缓存频繁请求
- ✅ 并行请求：使用 Promise.all() 并发多个 API 调用
- ✅ 流式响应：使用 TransformStream 流式处理大响应
- ✅ 减少依赖：边缘环境有大小限制，尽量使用轻量库
- ✅ 监控指标：跟踪冷启动时间、执行时间、错误率
- ✅ 错误处理：设置合理的超时和重试机制
限制与注意事项
⚠️ 边缘计算的限制
- 执行时间限制：通常限制在 10-50ms CPU 时间
- 内存限制：通常 128MB-1GB
- 无状态：不能依赖本地存储（需使用 KV 或数据库）
- 网络限制：只能访问 HTTPS 端点
- 调试困难：分布式环境调试比本地复杂
2026 年新趋势
| 趋势 | 描述 |
|---|---|
| 边缘 AI 推理 | 在边缘运行小型 ML 模型（如情感分析、图像分类） |
| 边缘实时通信 | WebRTC SFU 部署在边缘，降低视频延迟 |
| 边缘 GraphQL | 在边缘聚合多个数据源的 GraphQL API |
| 边缘渲染 | React/Vue 组件在边缘渲染成 HTML |
| 边缘向量数据库 | 支持 AI 应用的向量相似度搜索 |