页面并发请求的链接复用及三次握手时间分析

问题来源于之前项目中的列表查询，在分页查询程中存在图片下载失败问题。问题原因在于单个图片较大，翻页过程中上一个列表的图片没有加载完，新的列表图片请求又发起，导致页面中累计了成百上千的图片下载请求。当时在考虑这问题时候，分析是不是http请求没有复用connection导致了多个http请求加载超时。最后了解到是单个图片下载时间过长，累计的图片下载数量过多问题，可从减少图片下载请求时间和限制图片下载数量方面优化。下面分析下页面中多个TCP请求的链接复用，节省链接初始化时间问题。

1、并发http请求问题

在日常开发中经常会遇到在一个页面发起多个http请求的情况，为什么不用一个请求一次获取所有资源，而是要分多次请求单个获取资源。已图片下载为例，如页面请求300张图片，单张获取资源，需要至少发起300次http请求，根据常识可知一次http请求需要三次握手+ssl验证时间，300次请求明显会增加重复的三次握手+ssl时间，这样的页面响应时间不是应该会浪费很多时间吗！假设三次握手时间500ms+ssl时间500ms，300次请求至少需要300s，也就是说页面完全加载完成需要300s以上的时间。实际上页面加载完成真的需要300s吗？根据常识可知肯定不用300s的，那么是如何解决这种重复的握手和ssl验证时间的呢？正常人会猜测肯定不需要要重复建立连接和重复验证，是不是浏览器的缓存机制。

2、connection复用分析

我们这里以https://http2.akamai.com/demo 网站的地球图片加载为例分析链接复用情况。先介绍下这个网站的左右两幅图片，这里先已左边的http1.1加载的图片分析，暂时不考虑http1.1和http2.0的对比，后续会介绍。这个页面中的地球图片是通过369个小图拼接成一个完整的地球图，页面中左边和右边会分别请求369张图片。通过下图可知页面中发起了730个请求数，按倒数第二列的Connection ID排序，手动数下链接数为15个，通过实际页面分析可知，多