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 。

   <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里面的，就是说是前端控制的，不需要繁杂的流程去申请服务器变更

参考资料

使用实践

• http2 简介：https://developers.google.com/web/fundamentals/performance/http2/?hl=zh-cn
• nghttp2调试h2流量：https://imququ.com/post/intro-to-nghttp2.html
• 腾讯追加实战最佳实践：https://mp.weixin.qq.com/s/U0311_AiGkIEtyuO9Uh1Rw
• HTTP/2 Server Push 详解：https://zhuanlan.zhihu.com/p/26519760
• H2 Server push入门到放弃： https://www.yuque.com/wuomzfx/article/eh551s
• h2o：https://h2o.examp1e.net/

测试

• akamai h2对比：https://http2.akamai.com/demo
• h2测试：https://http2-server-push-demo.keksi.io/
• server push 测试：https://http1.gtimg.cn/push/mypush.html