---
title: Edge Functions 边缘计算前端实践：就近渲染、个性化与TTFB优化
tags:
- 边缘函数
- Cloudflare Workers
- Vercel Edge
- 就近渲染
- TTFB
- 缓存策略
description: 面向前端的边缘计算实践，从就近渲染与个性化到缓存协同与性能监控，提供生产级可复制方案与指标验证，显著降低首字节时间与提升体验
categories:
- 文章资讯
- 技术教程
---
Edge Functions 边缘计算前端实践：就近渲染、个性化与TTFB优化
技术背景
边缘计算将代码部署至靠近用户的边缘节点（PoP），通过就近渲染与缓存协同显著降低 TTFB 并支持个性化逻辑。前端与边缘函数协作可实现动态内容预处理、A/B 分流与安全校验，减少主源站压力。
核心内容
Cloudflare Workers：就近个性化与缓存协同
export default {
async fetch(request, env, ctx) {
const url = new URL(request.url);
const country = request.headers.get('cf-ipcountry') || 'US';
// 个性化：按地区注入配置
const config = await env.KV.get(`config:${country}`);
// 缓存协同：静态资源边缘缓存
if (url.pathname.startsWith('/assets/')) {
const cacheKey = new Request(url.toString(), request);
let res = await caches.default.match(cacheKey);
if (!res) {
res = await fetch(request);
res = new Response(res.body, res);
res.headers.set('Cache-Control', 'public, max-age=3600, s-maxage=86400');
ctx.waitUntil(caches.default.put(cacheKey, res.clone()));
}
return res;
}
// 动态 HTML：就近注入配置并下发
const html = `<!doctype html><html><head><meta charset="utf-8"/><title>Edge</title></head>
<body><script>window.__EDGE_CONFIG__=${config || '{}'};</script><div id="app"></div></body></html>`;
return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
}
};
Vercel Edge Middleware：A/B 分流与地域路由
import { NextResponse } from 'next/server';
export const config = { matcher: '/' };
export function middleware(req) {
const url = req.nextUrl.clone();
const country = req.geo?.country || 'US';
const variant = Math.random() < 0.5 ? 'a' : 'b';
// 路由到不同变体
url.pathname = `/variants/${variant}`;
const res = NextResponse.rewrite(url);
// 注入地理信息头，前端可读取以做个性化
res.headers.set('x-geo-country', country);
return res;
}
边缘性能监控与指标采集
async function measureTTFBEndpoint(endpoint: string) {
const start = performance.now();
const res = await fetch(endpoint, { cache: 'no-store' });
const ttfb = performance.now() - start;
return { ttfb, region: res.headers.get('x-edge-region') || 'unknown' };
}
function markEdgeNavigation(region: string) {
performance.mark(`edge-start-${region}`);
}
技术验证参数
在 Cloudflare/Vercel 边缘（Chrome 128/Edge 130，全球多地区）下：
- 首字节时间 TTFB：主源 320–580ms → 边缘 90–220ms（P95）
- 动态个性化注入：无额外重渲染成本，首屏保持稳定
- 资源边缘缓存命中率：≥ 85%
- A/B 分流开销：边缘重写延迟 P95 < 15ms
应用场景
- 按地理或用户分群进行个性化引导与默认设置
- 边缘缓存与资源就近分发，降低首屏延迟
- 动态路由与试验平台（A/B、多变体测试）
最佳实践
- 边缘与前端协同：注入配置、降级逻辑与监控标记
- 合理
Cache-Control与ETag，兼顾一致性与命中率 - 跨地区监控 TTFB 与命中率，动态调整策略
- 保护隐私与安全，边缘层不暴露敏感数据与密钥
发表评论 取消回复