从URL输入到页面展示都发生了什么？

总的来说分为以下过程：

DNS解析
TCP三次握手
发送HTTP请求
服务器端处理请求并返回HTTP保文
浏览器渲染页面
断开连接：TCP的四次挥手

URL到底是什么？

URL（Uniform Resource Locator），统一资源定位符，用户定位互联网上资源，俗称网站。

语法规则：scheme://host.domain.port/path/filename

schme：定义因特尔互联网服务的类型。常见协议有 http，https，ftp，file。

host：定义域主机(http 默认主机是 www)

域名解析（DNS）

DNS协议提供通过域名查找IP地址，或逆向从IP地址反查域名的服务。DNS是一个网络服务器，我们的域名简单来说就是在DNS上记录一条信息记录。

如何通过域名去查询URL对应的IP呢？

浏览器缓存：浏览器会按照一定频率缓存DNS记录。

操作系统缓存：如果在浏览器缓存中没有找到，那就会去操作系统中找。

ISP的DNS服务器：ISP是互联网服务提供商（Internet Service Provider）的简称，ISP有专门的DNS服务器应对DNS的查询请求。

根服务器：如果ISP的DNS服务器还没找到，就会向根服务器发送请求，进行递归查询（DNS服务器先问根域名服务器 .com域名服务器的IP地址，然后再问.baidu 域名服务器，依次类推）

TCP三次握手

在客户端发送请求之前，会发送TCP三次握手用以同步客户端和服务端的序列号和确认号，并交换TCP窗口大小信息。

第一次握手，由浏览器发送请求，告诉服务器我要发送请求了。

第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发吧。

第三次握手，由浏览器发送，告诉浏览器，我马上要发了，你准备接受吧。

为什么需要三次握手？

“为了防止已失效的连接请求报文突然又传送到了服务端，因而产生错误” -- 谢希人《计算机网络》

发送HTTP请求

TCP三次握手结束后，开始发送HTTP请求报文。

请求报文由请求行（request line）、请求头(header)、请求体

请求行包含请求方法、URL、协议版本

请求方法包含8种：GET、POST、PUT、DELETE、TRACE、OPTIONS、HEAD、PATCH

URL:即请求地址，由协议://主机：端口/路径？参数组成。

协议版本即http版本号

POST /app/bscron/baseext.html?AppID=5211394&ajax=json&r=0.6853821113886356 HTTP/1.1

请求头包含请求的附加信息，由关键字、值对组成，每行一对，关键字和值用英文冒号：分割。

请求头部通知服务器有关客户端请求的信息。它包含许多有关的客户端环境和请求正文的有用信息。

Connection: keep-alive

Content-Length: 34

Accept: */*

Origin: http://app.huicui.me

X-Requested-With: XMLHttpRequest

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

Referer: http://app.huicui.me/app/bscron/edit.html?AppID=5211394&id=100153

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

Cookie: UM_distinctid=1676d855f-0d0045fe32f2c6-35617600-1fa400-1676264dd87274; PHPSESSID=pcvbojcnb7vdo9q9mhpab1; CNZZDATA1261434238=298008907-15435792-http%253A%252F%252Fapp.huicui.me%252F%7C4440878

请求体，可以承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据。

AppID=123&ajax=json

服务器处理请求并返回HTTP报文

服务器，每台服务器都会安装处理请求的应用-web serve。常见的web serve 产品有 apache，nginx, IIS, Lighttpd等。

http响应报文

响应报文由响应行（request line）、响应头部（header）、响应主体组成。

响应行包含：协议版本、状态码、状态码描述

状态码规则如下：

1xx：指示信息-表示请求已接收，继续处理

2xx：成功-表示请求已被成功接收、理解、接受。

3xx：重定向-要完成请求必须进行更进一步的操作。

4xx：客户端错误-请求有语法错误或请求无法实现。

5xx：服务器端错误-服务器未能实现合法的请求。

浏览器解析渲染页面

根据HTML解析出DOM树

根据CSS解析生成CSS规则树

结合DOM数和CSS规则树，生成渲染树

根据渲染树计算每一个节点的信息

根据计算好的信息绘制页面

断开连接

当数据传送完毕，需断开TCP连接，此时发起TCP四次挥手。

第一次挥手：由浏览器发起，发送给服务器，我请求报文发送完了，你准备关闭吧。

第二次挥手：由服务器发起，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧。

第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧。

第四次挥手：有浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧。