server push 服务使用尝试

最近我们的CDN服务商 akamai 说他们已经有一些新的功能支持需要确定是否开启对应服务,这其中包括 Automatic Server Push,都送到眼前了 也不得不去看下 h2 Server Push的相关资料了。

包含如下功能:

  • Prefetch Object
    边缘向终端用户下发HTML文件后,同时向源站请求HTML内容中js css文件(如果边缘没有缓存的话)。

    这个挺有用,边缘节点在收到html请求就会去预热html内的js css文件

  • Automatic Server Push
    大致理解成基于人工智能的Server push,根据实际用户的请求数据分析合适推送的资源。

    这个就是今天的主题,我们后面会介绍

  • Automatic Preconnect
    预先对第三方资源做DNS解析、TLS建连等操作。

  • Automatic Font Preload
    也是 Sever Push,跟 Automatic Sever Push的不同就在于这是推送的 font 文件。

使用方式

这里就不对 Server Push 做介绍了,因为参考资料比我写的好。

我们的结论是,不开启CDN 的 Server push

  • 主要原因如下:
  1. CDN 只支持Ai 自动分析需要推送的文件,如果我们想推个接口啥的不可以。
  2. 我们静态资源在单独的域,在跨域下存在一些限制。
  3. Server push 可能无法感知缓存,推送的资源可能浏览器已经存在了,会导致流量的浪费。(这里和cdn提供商讨论过,确实会存在)
  • 我们的方案:
  1. 保持现用的 html preload 标签优先加载方案不变。

    在html文件的最上部分对需要优先加载的资源 preload

    1
    <link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://css.gbtcdn.com/imagecache/gbw/fonts/OpenSans-Bold.1b0edf9.woff2" />
  2. 开启边缘预热和边缘回源链路智能优化

  • 使用preload标签的好处:
  1. preload不会存在缓存无法复用的问题
  2. 放在顶部加载和直接推送加载速度情况区别不大
  3. preload是放在html里面的,就是说是前端控制的,不需要繁杂的流程去申请服务器变更

参考资料

使用实践

测试