CDN 是边缘计算的基础能力之一，但只放静态资源确实不够——首屏慢通常卡在 HTML 下载和 JS 执行，得在边缘节点动态生成 HTML。

就这样：用 Cloudflare Workers 做边缘渲染，把 SSR 或预渲染的 HTML 直接返回，跳过源站：

addEventListener('fetch', event => {

  event.respondWith(

    fetch(event.request).then(res => {

      // 优先用缓存里的预渲染 HTML（比如 /index.html）

      if (event.request.url.endsWith('/')) {

        return cfrFetch('https://your-cdn.com/index.html')

      }

      return res

    }).catch(() => {

      // 回退兜底：简单静态页

      return new Response('Loading...', {

        headers: { 'Content-Type': 'text/html' }

      })

    })

  )

})

真要提速，还得配合：
- HTML 里只放关键 CSS（内联）+ 少量 JS
- 图片用 WebP + 懒加载
- JS 按路由拆分，别一次性全加载

别迷信边缘渲染，先测 LCP 瓶颈在哪——多数情况是首屏图片太大或 JS 太重。

静态资源放 CDN 确实属于边缘计算的一种基础应用，但你只做了资源分发，没动 HTML，LCP（最大内容绘制）还是卡在后端渲染或 JS 加载上，这是常见痛点。

真正能提首屏速度的是「边缘预渲染」或者「边缘重写响应」，比如：

1. 用 Cloudflare Workers 在边缘直接返回预渲染好的 HTML（纯静态页），或者
2. 把 HTML 请求代理到你的源站，改写响应体（比如注入 preload、提前注入关键 CSS）

下面这个是简单版：边缘直接返回预渲染 HTML，不回源，适合纯展示页（比如首页、活动页）：

addEventListener('fetch', event => {

  event.respondWith(handleRequest(event.request))

})



async function handleRequest(request) {

  // 仅处理 GET / 首页请求

  const url = new URL(request.url)

  if (request.method === 'GET' && url.pathname === '/') {

    return new Response(





  

  

  





  
首屏内容已预渲染


  



, {

      headers: { 'Content-Type': 'text/html; charset=utf-8' }

    })

  }

  // 其他请求照常回源

  return fetch(request)

}

如果你要动态数据，比如首页带用户昵称、推荐内容，那得在 Worker 里调后端 API 拼 HTML（注意控制延迟，别超时）：

addEventListener('fetch', event => {

  event.respondWith(

    handleRequest(event.request).catch(err => new Response(err.message, { status: 500 }))

  )

})



async function handleRequest(request) {

  const url = new URL(request.url)

  if (request.method === 'GET' && url.pathname === '/') {

    try {

      const userRes = await fetch('https://your-api.com/user')

      const userData = await userRes.json()

      

      const html = 



欢迎，${userData.name}








      return new Response(html, {

        headers: { 'Content-Type': 'text/html; charset=utf-8' }

      })

    } catch (e) {

      // 降级方案：直接返回静态 HTML

      return new Response(
加载中，请稍后刷新, {

        headers: { 'Content-Type': 'text/html' }

      })

    }

  }

  return fetch(request)

}

注意：边缘渲染有缓存策略问题，动态内容要控制好 cache-control，别把用户 A 的数据缓给用户 B。

再强调下：CDN 只是边缘计算的最外层，想真正提速，得让「HTML」也走边缘逻辑，不是只放 JS 图片。

拿去改改，先测个纯静态页，LCP 能压到 1s 内，再考虑加点动态逻辑。