一次完整的http请求过程

一次完整的http请求过程

当我们在web浏览器的地址栏中输入: www.google.com,然后回车,到底发生了什么?

过程概览

1.对www.google.com这个网址进行DNS域名解析,得到对应的IP地址

2.根据这个IP,找到对应的服务器,发起TCP的三次握手

3.建立TCP连接后发起HTTP请求

4.服务器响应HTTP请求,浏览器得到html代码

5.浏览器解析html代码,并请求html代码中的资源(如js、css图片等)(先得到html代码,才能去找这些资源)

6.浏览器对页面进行渲染呈现给用户

具体过程

1.域名解析

DNS查询过程:浏览器缓存、系统缓存、hosts文件、野生DNS服务器(本地DNS服务器)、根DNS、顶级DNS、权威DNS、本地(附近)CDN、源站。

DNS优化:DNS缓存、DNS负载均衡

DNS请求是专门的dns协议,使用udp发送,因为是udp所以不需要建立连接。

2.TCP连接

1) Client首先发送一个连接试探,ACK=0 表示确认号无效,SYN = 1 表示这是一个连接请求或连接接受报文,同时表示这个数据报不能携带数据,seq = x 表示Client自己的初始序号(seq = 0 就代表这是第0号包),这时候Client进入syn_sent状态,表示客户端等待服务器的回复

2) Server监听到连接请求报文后,如同意建立连接,则向Client发送确认。TCP报文首部中的SYN 和 ACK都置1 ,ack = x + 1表示期望收到对方下一个报文段的第一个数据字节序号是x+1,同时表明x为止的所有数据都已正确收到(ack=1其实是ack=0+1,也就是期望客户端的第1个包),seq = y 表示Server 自己的初始序号(seq=0就代表这是服务器这边发出的第0号包)。这时服务器进入syn_rcvd,表示服务器已经收到Client的连接请求,等待client的确认。

3) Client收到确认后还需再次发送确认,同时携带要发送给Server的数据。ACK 置1 表示确认号ack= y + 1 有效(代表期望收到服务器的第1个包),Client自己的序号seq= x + 1(表示这就是我的第1个包,相对于第0个包来说的),一旦收到Client的确认之后,这个TCP连接就进入Established状态,就可以发起http请求了。

注:
SYN(synchronous建立联机)  ACK(acknowledgement 确认)  PSH(push传送)  FIN(finish结束) 
RST(reset重置) URG(urgent紧急) Sequence number(顺序号码) Acknowledge number(确认号码)

建立连接,发起请求。
HTTP请求报文由三部分组成:请求行,请求头和请求正文

请求行:用于描述客户端的请求方式,请求的资源名称以及使用的HTTP协议的版本号(例:GET/books/java.html HTTP/1.1)

请求头:用于描述客户端请求哪台主机,以及客户端的一些环境信息等

常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。

注:这里提一个请求头 Connection,Connection设置为 keep-alive用于说明 客户端这边设置的是,本次HTTP请求之后并不需要关闭TCP连接,这样可以使下次HTTP请求使用相同的TCP通道,节省TCP建立连接的时间

请求正文:当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中(GET方式是保存在url地址后面,不会放到这里)

3.服务器响应

服务器端响应http请求,浏览器获取服务内容。
HTTP响应也由三部分组成:状态码,响应头和实体内容

状态码:状态码用于表示服务器对请求的处理结果

列举几种常见的:
            200:OK(没有问题)
            206:Partial Content(客户端使用Content-Range指定了需要的实体数据的范围,然后服务端处理请求成功之后返回用户需要的这一部分数据而不是全部)
            301:Moved Permanently(代表永久性定向。该状态码表示请求的资源已经被分配了新的URL,以后应该使用资源现在指定的URL)
            302:Found(代表临时重定向。该状态码表示请求的资源已经被分配了新的URL,但是和301的区别是302代表的不是永久性的移动,只是临时的。) 
            304:Not Modifie(要你去拿缓存) 
            307:Temporary Redirect(临时重定向,与302相同,但是302会把POST改成GET,而307就不会。)
            400:Bad Request(400表示请求报文中存在语法错误。需要修改后再次发送)
            403:Forbidden(有表明请求访问的资源被拒绝了。没有获得服务器的访问权限,IP被禁止等。)
            404:Not Found(服务器没有这个资源)
            500:Internal Server Error(表明服务器端在执行请求时发生了错误,很有可能是服务端程序的Bug或故障)

«状态码详见»

若干响应头:响应头用于描述服务器的基本信息,以及客户端如何处理数据

    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: x-requested-with, Content-Type, Authorization,userId,token
    Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE, PATCH
    Access-Control-Allow-Origin: http://udig.iceshi.org
    Access-Control-Expose-Headers: status
    Access-Control-Max-Age: 3600
    Content-Length: 612
    Content-Type: application/json;charset=UTF-8
    Date: Sat, 12 Oct 2019 01:32:33 GMT
    Server: Apache-Coyote/1.1
    XDomainRequestAllowed: 1

实体内容:服务器返回给客户端的数据

4.浏览器解析

浏览器拿到html文件后,就开始解析其中的html代码,遇到js/css/image等静态资源时,就向服务器端去请求下载(会使用多线程下载,每个浏览器的线程数不一样),这是时候就用上 keep-alive特性了,建立一次HTTP连接,可以请求多个资源,下载资源的顺序就是按照代码里面的顺序,但是由于每个资源大小不一样,而浏览器又是多线程请求请求资源,所以这里显示的顺序并不一定是代码里面的顺序。最后,浏览器利用自己内部的工作机制,把请求的静态资源和html代码进行渲染,渲染之后呈现给用户

浏览器如何对页面渲染?
a)解析html文件构成 DOM树
b)解析CSS文件构成渲染树
c)边解析,边渲染
d)JS的解析是由浏览器中的JS解析引擎完成的。JS单线程运行,JS有可能修改DOM结构,意味着JS执行完成前,后续所有资源的下载是没有必要的,所以JS是单线程,会阻塞后续资源下载

浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上
涉及到两个概念: reflow(回流)和repain(重绘)。
DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;
当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。
页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

总结

域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求,浏览器得到html代码 –> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) –> 浏览器对页面进行渲染呈现给用户

参考

文章目录
  1. 1. 一次完整的http请求过程
    1. 1.1. 过程概览
    2. 1.2. 具体过程
      1. 1.2.1. 1.域名解析
      2. 1.2.2. 2.TCP连接
      3. 1.2.3. 3.服务器响应
      4. 1.2.4. 4.浏览器解析
    3. 1.3. 总结
  2. 2. 参考
,
Fork me on GitHub