从输入 URL 到页面加载完的过程中都发生了什么---优化

这篇文章是转载自：安度博客，http://www.itbbu.com/1490.html

在很多地方看到，感觉不错，理清了自己之前的一些思路，特转过来留作记录。

一个HTTP请求的过程

为了简化我们先从一个HTTP请求开始，简要介绍一下一个HTTP求情的网络传输过程，也就是所谓的“从输入 URL 到页面下载完的过程中都发生了什么事情”，直白点就是：输入网址到打开网页这个过程中都发生了什么，你不知道的事情。

● DNS Lookup 先获得URL对应的IP地址

● Socket Connect 浏览器和服务器建立TCP连接

● Send Request 发送HTTP请求

● Content Download 服务器发送响应

如果这些你还认可这几个步骤的话，我们就来讲一下这里面存在的性能问题。

● 如果你对DNS的查询还有印象的话现在反思一下，DNS Lookup就是为了获取一串IP地址要和无数个DNS服务器进行通信，这要消耗多少时间？别忘了，你查询完了的时候，你还没和那边的服务器通信呢。

● TCP连接要三次握手。 如果服务器很远的话这三次握手要花多少时间？别忘了建立连接之后你还没发请求呢。（通常到这里0.5秒就出去了）

● 发送HTTP请求的时候你要知道一点，就是 我们的网络带宽上行和下行通常是不一样的，通常上行的带宽会小一些 ，一个的话还好，但是现在的网页通常都会后续请求很多资源，带宽小的时候上行拥塞怎么办？别忘了已经到第三步了，服务器还没给你发响应呢，现在你的浏览器还什么都画不出来。

● 终于到了服务器发响应了，不巧你访问的这个服务器比较忙，好几万个人都要这个资源，服务器的上行带宽也是有限的，怎么办？

　　我觉得我出了几道还不错的面试题。顺便提一下，前两步的延迟和网络带宽的影响不大；后两步加带宽是能一定程度缓解，不过你要有钱，而且很贵。

　　虽说博主做过WebKit本地渲染的优化，但是深知 网页加载的主要时间还是浪费在网络通信上 ，所以在这些步骤上的优化会比你在浏览器内核的优化省力且效果明显。网络方面的主要优化手段，总结一下不外乎缓存、预取、压缩、并行。以后如果再有面试问性能优化之类的问题，大家都可以照着这个思路去考虑。

---

下面就分阶段介绍一下现有的优化手段。

DNS优化

对于DNS优化，缓存无疑是最简单粗暴且效果明显的了。说到缓存就一定要提到缓存层级：

● 浏览器DNS缓存

● 系统DNS缓存

● Hosts文件

● 各个DNS服务器上的缓存

　　当然DNS缓存失效期通常都比较短，很多情况下都要再去查找。为了降低用户体验到的延迟（注意这里不是网络延时），预取是一个不错的方法。

　　比如说你敲网址的时候还没有敲完，但是浏览器根据你的历史发现你很有可能去访问哪个网站，就提前给你做DNS预取了，比如你打了一个“w”的时候，chrome已经帮你去找weibo.com的IP地址了。chrome用户看一下chrome://predictors 你就知道了。

　　此外浏览器还会记录你过去的历史，知道每个域名下通常还会有哪些其他的链接，以便建立起网站的拓扑结构。当你访问这个域名下的网站，它就会预先对其他链接的域名进行DNS解析。

TCP优化

　　看到前面的DNS的具体优化这么繁杂，知道这简单的一步没那么简单了吧。

　　结果到TCP这一步优化反而简单了，因为刚才DNS已经把IP都预先弄到了，那么我们顺着刚才的步骤再建立连接就好了。所以在你敲第一个字母的时候，DNS解析完了就去建立连接了，这时候你可能网址还没敲完。当你刚访问一个网站的时候，浏览器刷刷刷的帮你把到别的服务器的TCP连接给你建好。

HTTP传输优化

　　写到这里可能有人会想，既然已经把TCP连接建立好了，那我干脆预取更进一步，把所有的链接内容直接预取下来不就好了，这样我网址还没敲完网页就已经加载完成了。

　　这个想法是好的，但现实却是残酷的，因为要记住我们的带宽是有限的，DNS和TCP连接量级都比较轻，对网络带宽不会占据太多，但是HTTP传输就不一样了。如果你所有链接都去预取的话，你的带宽很快就被占满了，这样你正常的请求无法得到满足，性能反而会严重下降。

　　缓存就又出现了，提缓存必提层次结构。

● PageCache 这个是最快的了，直接在内存中缓存了现有网页的DOM结构和渲染结果，这就是你为什么在点前进后退的时候会这么快。

● HTTP Cache 文件级别的Cache存在本地的文件系统上按照RFC2616实现。

● 代理Cache 如果是通过代理服务器上网的话，代理服务器通常也会按照缓存标准

● CDN 一个地理上离你很近的内容服务器，比如说你在北京请求杭州淘宝的一个图片，结果在北京的一个CDN上有这个图片，那么就不用去杭州了。

● DMOC（distributed memory object caching system）CDN主要存放的是静态数据，但是网页中通常有很多动态的数据需要查数据库，流量多了压力就会很大，通常服务器外围还会有一层内存缓存服务器，专门缓存这些数据库中的对象，据《淘宝技术这10年》称可以减少99.5%的数据库访问。

● Server 其实真正落在服务器上的请求已经不多了。

　　大家看到这里有没有想到能在什么地方再加一层缓存呢？其实可以在2和3之间加，也就是在路由器上加缓存。

　　小米路由器和搜狗合作的预取引擎其实就相当于在路由器上加一层缓存款顺便智能预取一下。为什么在这里另起一段专门谈小米呢？难不成是小米的水军？才不是呢，是因为博主看到这个消息的时候心都凉了，和博主的毕设撞车了有木有。

　　另一个HTTP常用的优化就是压缩了，网络传输时间＝消息大小/网速。既然网速比较贵那么就压缩一下吧，大部分服务器都会对HTTP消息进行gzip压缩。可以在Http Header中看到，具体的就不细说了。