浏览器从输入URL到界面显示一共经历了6个阶段

1. DNS(域名)解析

2. TCP连接(三次握手)

3. 发送HTTP请求

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

5. 浏览器解析渲染页面

6. 连接结束

1. DNS(域名)解析

一个网址到ip地址的转换，找到URL对应的IP。如www.xiaochongtec.cn到22.33.55.66。

DNS查找过程中若有对应IP则停止查找：浏览器缓存、系统缓存、路由缓存、ISP(互联网服务提供商) DNS缓存(DNS服务器)

2. TCP连接

拿到 ip 地址后，浏览器会向服务器发起TCP连接请求，通过三次握手建立TCP连接。

服务器为什么能接收到客服端发起的请求呢？

服务器监听原理：服务器通过 socket(应用层与TCP通信中间层)，bind 和 listen准备好接收外来连接，此时服务端状态为Listen

三次握手：

1. 客户端向服务器发送SYN(同步)报文(SEQ=x，SYN=1)，并进入SYN_SENT状态，等待服务器确认  (SENT：发送)

2. 服务器收到客户端的请求，向客户端回复一个确认消息(ACK=x+1)；服务器向客户端发送一个SYN包(SEQ=y)建立请求连接，此时服务器进入 SYN_RECV 状态   (RECV：接收)

3. 客户端接收服务器的回复(SYN+ACK 报文)，然后客户端也向服务器发送发送确认包，此包发送完毕客户端和服务器进入 ESTABLISHED 状态，完成 3 次握手。  (ACK：确认   ESTABLISHED ：成立)

3. 发送HTTP请求

浏览器向服务器发送HTTP请求。一个HTTP又分为请求和响应两部分。

HTTP请求消息：由请求行(request line)、请求头(header)、空行和请求数据4个部分组成。

1. 请求行：请求方法 + URL + HTTP协议版本 组成。如：GET /index.html HTTP/1.1

2. 请求头：由关键字/值对组成。User-Agent：产生请求的浏览器类型。Accept：客户端可识别的内容类型列表。Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机

3. 空行：最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头

4. 请求数据：请求数据不在GET方法中使用，而是在POST方法中使用。与请求数据相关的最常使用的请求头是Content-Type(Content-Type：application/x-www-form-urlencoded)和Content-Length

HTTP响应消息：由响应行、响应头、响应体三个部分组成。

1. 响应行：HTTP协议版本 + 状态码 + 描述 组成。如： HTTP/1.1 200 OK

状态码：由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。1xx：指示信息–表示请求已接收，继续处理。2xx：成功–表示请求已被成功接收、理解、接受。3xx：重定向–要完成请求必须进行更进一步的操作。4xx：客户端错误–请求有语法错误或请求无法实现。5xx：服务器端错误–服务器未能实现合法的请求。

2. 响应头：与请求头部类似，为响应报文添加了一些附加信息，描述服务器的基本信息，以及数据的描述，服务器通过这些数据的描述信息，可以通知客户端如何处理等一会儿它回送的数据。

3. 响应体：响应体就是响应的消息体，如果是纯数据就是返回纯数据，如果请求的是HTML页面，那么返回的就是HTML代码，如果是JS就是JS代码

HTTP特性：

1. HTTP是无连接：无连接意味着每次只能处理一个请求，服务器处理完客户端的请求并收到客户端应答后断开连接

2. HTTP是媒体独立的：只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型

3. HTTP是无状态：HTTP协议是无状态协议，表现为后续处理需要前面的信息，则它必须重传

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

服务器在接收到请求后,解析用户请求,知道了要调度那些资源文件,再通过相应的资源文件,处理用户的请求和参数,并调用数据库信息,最后讲结果通过web服务器返回给浏览器.

5. 浏览器解析渲染页面

解析过程6个步骤：解析HTML -> 创建DOM树 -> 解析CSS形成CSS对象模型 -> DOM树和CSS 结合构建渲染树 -> 布局 - > 绘制 -> 显示

渲染树：从DOM树的根节点开始遍历每个可见节点，让后对每个可见节点找到适配的CSS样式规则并应用，DOM 树不完全对应，display: none的元素不在渲染树中，而visibility: hidden的元素在渲染书中。display: none在DOM 树中

布局：对渲染树上的每个元素，计算它的坐标，称之为布局。包含宽高，位置，背景色等样式信息，我们常说的脱离文档流(可以随意设置宽高、不设置则给根据内容适应、不再给父元素汇报宽高)，其实就是脱离渲染树，导致脱离标准流的元素：float元素，absoulte元素，fixed元素会发生位置偏移。

绘制：根据渲染树以及布局得到的几何信息，通过绘制得到节点的绝对像素。

显示：将得到的节点的绝对像素发送给GPU，展示在页面上

回流(重排)与重绘

回流(重排)：当浏览器发现某个部分发生了页面布局和几何信息的变化，就需要倒回去重新渲染了，重新渲染，就又要经过布局计算可见节点在设备视口(viewport)内的几何信息，以及之后的绘制和显示将这些信息渲染在页面上。如：DOM操作(元素添加、删除、修改或者元素顺序的改变)

重绘：改变元素外观，但是不影响之前的位置，重新执行浏览器的绘制和显示过程。如： background-color(背景色)， border-color(边框色)， visibility(可见性)。浏览器会根据元素的新属性重新绘制一次(这就是重绘，或者说重新构造样式)，使元素呈现新的外观。

"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

display:none、visibility:hidden和overflow:hidden的区别

1. display:none：隐藏元素，不占网页中的任何空间，让这个元素彻底消失(看不见也摸不着),由于会影响到网页的空间，所以会引起两次重排和重绘

2.  visibility:hidden：占据的空间还是存在的，该操作不会对页面有影响，所以只会引起一次重绘。

3. overflow:hidden：宽高把多余的那部分剪掉，会引起一次重排和重绘

4.脱离文档流和添加回文档这两次回流是无可避免的，但是中间的DOM操作，则是在渲染树之外进行的，因此不会产生任何的回流与重绘