- 输入网址
- DNS解析获取域名对应的IP地址
- 建立TCP连接
- web浏览器向web服务器发送HTTP请求
- 服务器的永久重定向响应
- web服务器做出应答
- 浏览器显示 HTML
- web服务器关闭TCP连接
1、输入网址
浏览器会在用户输入url时查找历史信息对其补全或直接显示缓存在本地的网页。
2、DNS解析获取域名对应的IP地址
用户发起请求后，浏览器会解析这个url，将其转换为ip地址。
第一步：查看hosts文件，如果hosts文件里面配置了url和ip的关系，则直接使用里面的ip地址。hosts文件存储在操作系统的如下目录中，打开后可手动配置。下图的示例中，左边是ip地址，右边是url。
Hosts
第二步：浏览器向本地DNS服务器（用网络运营商提供，如中国移动等）发送一个DNS请求。DNS (Domain Name System)是域名系统，用来将域名解析成ip地址。
DNS
第三步：本地DNS在收到请求后查询缓存，如果没有命中，还会向根DNS服务器发送请求。
第四步：根DNS服务器不直接存储解析数据，而是返回一个域服务器地址，本地DNS服务器转而向域服务器发送查询请求。
第五步：本地DNS服务器继续向域服务器（例如.com域服务器）发出请求，返回的是一个解析服务器的地址。
第六步：本地DNS服务器向域名的解析服务器发出请求，获得域名与ip的映射关系。在返回数据时，本地DNS会进行缓存。
3、建立TCP连接
浏览器会首先与服务器依照三次握手和四次挥手建立TCP连接（根据OSI七层协议，低层次的协议需要率先建立连接，只有建立了TCP连接才能使用HTTP协议）。
4、浏览器向服务器发送HTTP请求
一个典型的http request header一般需要包括请求的方法，例如GET或者POST等，不常用的还有PUT和DELETE、HEAD、OPTION以及TRACE方法，一般的浏览器只能发起GET或者POST请求。
HTTP的请求信息主要包含三部分内容：
- 请求方法URI协议/版本
- 请求头(Request Header)
- 请求正文(Request Body)
URI和URL的区别：https://blog.csdn.net/qq_32595453/article/details/80563142
一个完整的HTTP请求如下所示：
// 请求行：方法URL议/版本
GET/sample.jsp HTTP/1.1
// 请求头：存储浏览器语言和连接状态等信息
Accept:image/gif.image/jpeg,*/
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate
// 请求正文：以空行和请求头分隔，存储请求参数和他们对应的值
username=jinqiao&password=1234
以Chrome浏览器为例，按F12打开控制台，选择标签页中的Network，然后选择一个请求。下图展示的就是一个Http Request Header和他发送给服务器的参数。
Http Request Header
Http Request Body
5、服务器的永久重定向响应
服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。
重定向原因：
- 网站调整（如改变网页目录结构）；
- 网页被移到一个新地址；
- 网页扩展名改变(如应用需要把.php改成.Html或.shtml)。
此时如果不进行重定向的话，用户会得到一个404报错信息。之后，浏览器根据服务器返回的重定向地址继续请求网站信息。
6、web服务器做出应答
和HTTP请求一样，HTTP响应信息也主要包含三个部分：
- 状态行
- 响应头(Response Header)
- 响应正文(Response Body)
// 状态行：包括协议版本、数字形式的状态代码、及相应的状态描述，以空格分隔
HTTP/1.1 200 OK
// 响应头：存储日期和内容长度等信息
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122
// 响应正文：以空行和响应头分隔，存储cookie，html，image，后端返回的请求数据等
＜html＞
＜head＞
＜title＞http＜/title＞
＜/head＞
＜body＞
＜!-- body goes here --＞
＜/body＞
＜/html＞
7、浏览器显示HTML
网页是根据服务器返回的html文件显示的，显示过程中需要进行渲染。以webkit为例，渲染的过程包括：解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树。
渲染完成后，浏览器会发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、JS等），这个过程和上面发送请求的过程是一样的。
8、web服务器关闭TCP连接
是否关闭TCP连接可以通过参数配置（connection:keep-alive）。新版本的协议也会通过默认持久连接来节省带宽。TCP连接关闭后，一次浏览器显示页面的交互就结束了。
补充：
上面的内容将整个交互中的各部分系统简单分成了浏览器和后端服务器（这个服务器会返回html和其他的业务请求信息）。然而，越来越多的系统开始采用前后端分离的架构，这时候在交互的细节上就会稍有不同。
一般来说，分离后的前端服务和后端服务是两个独立的Java应用程序。前端负责接收浏览器的请求，如果是页面加载，则直接将信息返回给浏览器；如果有业务逻辑处理要求或数据库访问要求，前端则会向后端服务器发送请求。
此时，后端服务器只会收到前端发来的请求，处理完请求后也会直接将结果返回给前端，不会和浏览器产生直接的交互。
而浏览器可以将前端和后端统一看作一个服务器，不去关心他们内部的交互和实现逻辑。现实场景中，后端服务器的架构一般会更加复杂。
网友评论