资源加载合并章节为什么没有提到http2？

Question

有了http2之后，合并和不合并更是要取舍吧？应该说不合并会更好一些？

另外针对移动端的页面将css和js都合并压缩到html中以减少rtt的时延是不是更好一点？

期待课程能够更深入地讲解不同场景中的优化策略，谢谢老师！

Answer 1

千迦 2017-08-20 08:28:56

hi～你好～

确实如你所说，有了http2之后，web很多前端性能优化点都可以退休的感觉，因为http2多路复用这样的特性，就是为了要来解决在http1时代需要进行的繁琐的性能优化的。

理论上来说，在纯http2的情况下，不合并也不会有多次建立连接的问题存在，合并还可能会存在合并文件过大，频繁的缓存失效等问题，使用http2会更好，仅仅针对资源合并解决的多次请求建立连接的耗时问题，http2已经是完全解决了。

但是在实际业务场景中，浏览器对于资源的并发请求的上限，如果完全不合并的话，相同域名的资源过多，浏览器也没有办法完全的并发请求，可以看下手淘的请求情况。另外更重要的是，http1退休还要好久，不仅浏览器存在支持问题，现在大部分网站其实都还在http1到http2的过渡阶段，我们的代码肯定还是要考虑http1的业务场景。所以这一块，还是要基于自己的场景，根据上述的这些点进行权衡的，甚至针对http2支持和http2不支持两种情况，开发不同版本的代码都是可能的。

针对你第二个问题，其实要这么做的目的就是要提升第一次请求的速度，内联的话，不需要在解析html之后，再发请求去请求资源。但是，我们一般只会对一些比较小和js和css这么做，原因有两点：1. 对于html我们一般是不做缓存的（可以看手淘的访问情况），这样不适合内联大的js和css；2. 内联的html和css是无法做到多页面共享的。其实内联要解决的问题，在http2中也有方案，使用http2中的server push，其实可以在请求html的时候，就将这个html需要引用的资源通过server push的方式推送的浏览器的缓存中，这样不需要等html请求回来解析外部链接，就可以提前请求到依赖的资源了。

所以希望http2能更广泛的应用起来（据说http1至少还要10年才能退出历史舞台）

• 提问者 xjtumj #1

  谢谢老师的细心讲解，对于html一般不缓存这一个做法有些疑问，我能理解不缓存html是为了更好地进行版本发布，让用户第一时间更新js和css，但按理说虽然html较小，但同样每次需要建立网络连接，消耗请求时延，从优化角度我认为应该是需要缓存html，在hybrid模式下可以借助客户端存储来接管webview本身的缓存，service worker方式也是提倡是离线整个应用
   
  现在静态资源大多是部署到cdn上，server push本身也存在多推或漏推的情况，要用起来还是困难重重啊

• 千迦 回复 提问者 xjtumj #2

  如果连html都缓存的话，岂不是不管我线上的代码版本怎么发布改变，只要缓存不过期，命中缓存页面之后，发布的新版本永远不会生效，访问的页面永远都一样了？现在是因为html不缓存，所以当我发布新的线上代码之后，html中引用的资源就会改变，从而我们能够访问到最新的线上业务的js和css代码，而其中html中引用资源没有改变的部分，就会走我们的缓存来提升性能。
  用客户端存储的能力的时候，只缓存js和css，参看手机百度（https://m.baidu.com）的localstorage情况。
  至于你说的service worker缓存，我们用service worker的缓存能力用于提升性能的情况下，其实也不需要缓存html，参见淘宝国际站（https://m.intl.taobao.com/）。
  对于你说的完全缓存离线应用的情况，一定是这个应用的代码的html代码不需要更新的场景，正常离线应用的html也确实是不需要更新的。参见twitter手机版（https://mobile.twitter.com/login），页面很简单，基本不需要版本迭代。
  server push设计出来就是要解决页面外部资源需要等html解析完才能加载的问题，可能先阶段存在一些问题，但是后续发展肯定是要往彻底解决这个问题的方向上靠，这个肯定是一个发展方向不会错。

• 千迦 回复 提问者 xjtumj #3

  你提的这些，都是先阶段非常重要的优化点～在之后的浏览器存储中～会有相关的知识给大家分享～～

点开查看后面1条评论