边缘计算能减少首屏加载时间吗？具体怎么用？

端木美美提问于 2026-03-14 08:33:22 阅读 4

优化

我们网站的首屏加载在海外用户那特别慢，听说边缘计算可以就近分发内容，但我不太确定该怎么实际应用到前端项目里。

比如我现在有个静态 HTML 页面，已经部署在 CDN 上了，但 API 请求还是回源到国内服务器。是不是只要把 API 也放到边缘节点就行？试过 Cloudflare Workers，但不知道怎么和现有页面配合。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
</head>
<body>
  <div id="content">Loading...</div>
  <script>
    fetch('/api/data') // 这个请求能不能走边缘？
      .then(res => res.json())
      .then(data => document.getElementById('content').innerText = data.text);
  </script>
</body>
</html>

网络优化边缘计算

我来解答赞 4 收藏

反馈

1 条解答

世霖 Lv1

边缘计算确实能减少首屏加载时间，但得看你怎么用。

你的情况是这样的：静态页面走CDN已经没问题了，但 fetch('/api/data') 这个请求会先到CDN边缘节点，然后CDN再转发到你的国内服务器。问题在于CDN只是个缓存层，它不会帮你转发API请求到国内，API请求还是直接从用户浏览器发到国内，一样慢。

解决方案：Cloudflare Workers 做反向代理

把 /api/data 的请求通过 Workers 转发到国内：

// Workers 脚本

addEventListener('fetch', event => {

  event.respondWith(handleRequest(event.request))

})



async function handleRequest(request) {

  const apiUrl = 'https://你的国内服务器.com'

  const url = new URL(request.url)

  

  // 只代理 /api/ 开头的请求

  if (!url.pathname.startsWith('/api/')) {

    return fetch(request)

  }

  

  const response = await fetch(apiUrl + url.pathname, {

    method: request.method,

    headers: {

      'Content-Type': 'application/json',

      ...request.headers

    },

    body: request.body

  })

  

  return new Response(response.body, {

    status: response.status,

    headers: {

      ...response.headers,

      'Access-Control-Allow-Origin': '*'

    }

  })

}

这样海外用户的请求先到边缘节点，节点再转发到国内，比用户直连国内服务器快一些。

但这还不够彻底。 Workers 转发只是减少了客户端到边缘这段距离，国内服务器的处理时间可省不了。如果你的API响应本身要500ms，那再怎么样也要500ms。

更有效的方案：边缘缓存

如果你的API数据不要求实时性，可以在 Workers 里做缓存：

const CACHE_KEY = 'api_data_cache'

const CACHE_TTL = 60 // 秒



async function handleRequest(request) {

  const url = new URL(request.url)

  if (!url.pathname.startsWith('/api/')) {

    return fetch(request)

  }

  

  const cache = caches.default

  const cached = await cache.match(request)

  

  if (cached) {

    return cached

  }

  

  const response = await fetch('https://你的国内服务器.com' + url.pathname)

  

  // 只有GET请求才缓存

  if (request.method === 'GET') {

    const responseToCache = response.clone()

    await cache.put(request, responseToCache)

  }

  

  return response

}

这样第一次请求后，数据会存在边缘节点，后续海外用户直接从边缘拿，延迟能降到几十毫秒级别。

总结一下：你的页面不需要改，Workers 那边配置好路由规则，/api/* 的请求就会走边缘。首屏加载能不能快，关键看你的API响应时间和缓存策略。数据变化不频繁的话，边缘缓存效果立竿见影；如果数据实时性要求高，那就只能靠 Workers 转发减少网络跳数了。

2026-03-14 09:01