Web前端: 一次HTTP请求过程

Author Avatar
wanglinzhizhi Feb 08, 2016

一次HTTP请求过程

demo以www.npmjs.com为例子

1.chrome自己的缓存,存留时间大概1min

Notes:chrome://net-internals/#dns中查询

2.chrome搜索操作系统自身的DNS缓存(浏览器没有找到缓存或者缓存已经失效)

3.读取本地的HOST文件

4.浏览器发起一个DNS的一个系统调用

​ - 宽带运营商服务器查看本身的本地缓存

​ - 运营商服务器发起一个迭代DNS解析请求(->根->顶级域名地址->目标)

​ - 运营商服务器把结果返回给操作系统内核,同时缓存起来

​ - 操作系统内核把结果返回浏览器

​ - 最终浏览器拿到了www.npmjs.com对应的IP地址

5.建立TCP/IP连接

TCP/IP连接,属于计算机网络的事情,包括运输层的连续ARQ协议,TCP/UDP等,以及IP层路由选择算法(RIP,OSPF),ARP地址解析,再往下CSMA/CD(载波监听,碰撞检测)以及CSMA/CA等…..总之,这里面是一个漫长的故事…..

6.TCP/IP 链接建立起来之后,浏览器就可以向服务器发送HTTP请求了使用了.比如说,用HTTP的GET方法请求一个根域名的一个域名,协议可以采用HTTP1.0的一个协议(HTTP1.1 是保持连接,与此有所不同,对于同义词请求中,可以同时包含)

7.服务器端接受到了这个请求,根据路径参数,经过后端的一些处理后,把处理后的一个结果的数据返回给浏览器,如果是慕课网的页面,就会把完整的HTML页面代码返回给浏览器

8.浏览器拿到了慕课网的完整的HTML页面代码,在解析和渲染这个页面的时候,里面的JS,CSS, 图片静态资源,他们同样也是一个个的HTTP请求,都需要经过上述的主要七个步骤

9.浏览器根据拿到的资源对页面进行渲染,最终把一个完整的页面呈现给了用户.





个人心得:

以前知道DNS的缓存机制,也知道host,知道TCP/IP的过程中数据的流动(我习惯用流动路径,也可以说传输过程的传输路径以及各种封装各种解封)也知道怎么渲染,但是对于浏览器的缓存机制,真心不知道.

: )