http请求过程

一次完整的HTTP请求所经历的7个步骤
HTTP通信机制是在一次完整的HTTP通信过程中，Web浏览器与Web服务器之间将完成下列7个步骤：
1. 建立TCP连接：
在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能进行更高层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。
2. Web浏览器向Web服务器发送请求命令： 
一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。例如：GET/sample/hello.jsp HTTP/1.1。
3. Web浏览器发送请求头信息 ：
浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。
4. Web服务器应答 ：
客户机向服务器发出请求后，服务器会客户机回送应答， HTTP/1.1 200 OK ，应答的第一部分是协议的版本号和应答状态码。
5. Web服务器发送应答头信息： 
正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。
6. Web服务器向浏览器发送数据： 
Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。
7. Web服务器关闭TCP连接 ：
一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码：Connection:keep-alive；TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

 

（输入一个URL回车后的后台过程）

1.客户机提出域名解析请求，并将该请求发送给本地的域名服务器。

2.当本地的域名服务器收到请求后，就先查询本地缓存，如果有该记录项，则本地的域名服务器就直接地把查询的结果返回。

3.如果本地的缓存中没有该记录项，则本地域名服务器就直接把请求发送给根域名服务器，然后根域名服务器再返回给本地域名服务器一个所查询域（根的子域）的主域名服务器的地址。

4.本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录则返回相关的下级的域名服务器的地址。

5.重复第四步，直到找到正确的记录。

 

前端不仅要让用户对网页有完美的体验，让用户尽快体验到完美的网页也是很重要的，这就要前端攻城狮掌握一些计算机原理相关的知识了，这里就来聊一聊从用户输入URL到页面加载完成的过程中都发生了什么事情？

用户输入url之后大致发生了以下几件事：

  1. 浏览器查找域名的IP地址:这一步包括DNS具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
  2. 浏览器向web服务器发送一个HTTP请求;
  3. 服务器的永久重定向响应;
  4. 浏览器跟踪重定向地址;
  5. 服务器处理请求;
  6. 服务器返回一个HTTP响应;
  7. 浏览器显示HTML;
  8. 浏览器发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、JS等等）;
  9. 浏览器发送异步请求;

下面我们就详细地了解一下这些过程。

DNS查找IP地址

DNS是域名系统(Domain Name System)的缩写，是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

DNS查找过程

  1. 浏览器缓存 – 浏览器会缓存DNS记录一段时间，但是操作系统并没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
  2. 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname），这样便可获得系统缓存中的记录。
  3. 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
  4. ISP DNS缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
  5. 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到example的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

DNS进行域名解析的过程

  1. 客户端发出DNS请求翻译IP地址或主机名；
  2. DNS服务器在收到客户机的请求后检查DNS服务器的缓存，若查到请求的地址或名字，即向客户机发出应答信息；
  3. 若没有查到，则在数据库中查找，若查到请求的地址或名字，即向客户机发出应答信息；
  4. 若没有查到，则将请求发给根域DNS服务器，并依序从根域查找顶级域，由顶级查找二级域，二级域查找三级，直至找到要解析的地址或名字，即向客户机所在网络的DNS服务器发出应答信息，DNS服务器收到应答后现在缓存中存储，然后，将解析结果发给客户机。
  5. 若没有找到，则返回错误信息。

HTTP请求

三次握手建立TCP连接

在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能，才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。在TCP/IP协议中，TCP协议提供可靠的连接服务，采用三次握手建立一个连接。

  • 第一次握手：
    建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；
    SYN：同步序列编号（Synchronize Sequence Numbers）。
  • 第二次握手：
    服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
  • 第三次握手：
    客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

完成三次握手，客户端与服务器开始传送数据。
一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。
浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。

四次挥手终止连接

由于TCP连接是全双工的，因此每个方向都必须单独进行关闭。这原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动，一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另一方执行被动关闭。

  1. TCP客户端发送一个FIN，用来关闭客户到服务器的数据传送。
  2. 服务器收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。和SYN一样，一个FIN将占用一个序号。
  3. 服务器关闭客户端的连接，发送一个FIN给客户端。
  4. 客户端发回ACK报文确认，并将确认序号设置为收到序号加1。

服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“HTTP://www.facebook.com/” 而非“HTTP://facebook.com/”。
为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢？这个问题有好多有意思的答案。
其中一个原因跟搜索引擎排名有关。你看，如果一个页面有两个地址，就像HTTP://www.igoro.com/ 和HTTP://igoro.com/，搜索引擎会认为它们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是 什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。
还有一个是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。

浏览器跟踪重定向地址

现在，浏览器知道了“HTTP://www.facebook.com/”才是要访问的正确地址，所以它会发送另一个获取请求。

服务器”处理”请求

服务器接收到获取请求，然后处理并返回一个响应。

页面渲染

现代浏览器渲染页面的过程是这样的：解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像<head>元素或display属性值为none的元素都不在渲染树中。
在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

结语

做前端不仅要掌握前端的知识，对一些前端相关的例如计算机网络、数据结构、计算机原理都要有一定的了解，因为网络世界连接在一起的，前端与这些知识都是有接触的，说不准什么时候就会用上。而且，学好这些知识，对前端优化也有很大的帮助。

 转载：http://foreverz.cn/2016/10/20/%E4%BB%8E%E8%BE%93%E5%85%A5URL%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E7%9A%84%E8%BF%87%E7%A8%8B%E4%B8%AD%E9%83%BD%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%E4%BA%8B%E6%83%85/#footer

posted @ 2017-09-18 22:11  飞奔的小水牛  阅读(124)  评论(0)    收藏  举报