从输入网址到页面显示发生了什么？

　　在讨论这个问题之前，我们需要对于网络通信方面的知识有一定的理解。

　　一、网络通信

　　计算机程序是需要分层的，这是程序设计的基本要求。分层解耦、分而治之是贯穿程序设计的一条基本准则。网络协议设计也是按照分层思想设计， 国际标准化组织（ISO）于 1984 年提出了一种标准参考模型 OSI。它被公认为是计算机通信和 InterNet 网络通信 的一种基本结构模型。

　　遵循原则：

　　1、同一层中的各网络节点都有相同的层次结构，具有同样的功能

　　2、同一节点内相邻层之间通过接口进行通信

　　3、七层结构中的每一层使用下一层提供的服务，并且向其上层提供服务

　　4、不同节点的同等层按照协议实现对等层之间的通信

　　OSI 七层模型：

　　OSI七层模型总结：

　　1、应用层：产生网络流量的程序

　　2、表示层：传输之前是否进行加密或者压缩处理

　　3、会话层：查看会话，查木马 netstat-n

　　4、传输层：可靠传输、流量控制、不可靠传输

　　5、网络层：负责选择最佳路径、规划IP地址

　　6、数据链路层：帧的开始和结束、透明传输、差错校验

　　7、物理层：接口标准、电器标准、如何更快传输数据

　　但是在实践过程中，实际上广泛采用 TCP/IP 四层协议结构，整个因特网就是建立在 TCP/IP 协议栈基础之上的。互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走。

　　TCP/IP协议：

　　【TCP的三次握手】

　　第一次握手：客户端将标志位SYN置为1，随机产生一个值seq=J，并将该数据包发送给服务器端，客户端进入SYN_SENT状态，等待服务器端确认。

　　第二次握手：服务器端收到数据包后由标志位SYN=1知道客户端请求建立连接，服务器端将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端以确认连接请求，服务器端进入SYN_RCVD状态。

　　第三次握手：客户端收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务器端，服务器端检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端和服务器端进入ESTABLISHED状态，完成三次握手，随后客户端与服务器端之间可以开始传输数据了。

　　【TCP四次挥手】

　　第一次挥手：客户端发送一个FIN=M，用来关闭客户端到服务器端的数据传送，客户端进入FIN_WAIT_1状态。意思是说"我客户端没有数据要发给你了"，但是如果你服务器端还有数据没有发送完成，则不必急着关闭连接，可以继续发送数据。

　　第二次挥手：服务器端收到FIN后，先发送ack=M+1，告诉客户端，你的请求我收到了，但是我还没准备好，请继续你等我的消息。这个时候客户端就进入FIN_WAIT_2 状态，继续等待服务器端的FIN报文。

　　第三次挥手：当服务器端确定数据已发送完成，则向客户端发送FIN=N报文，告诉客户端，好了，我这边数据发完了，准备好关闭连接了。服务器端进入LAST_ACK状态。

　　第四次挥手：客户端收到FIN=N报文后，就知道可以关闭连接了，但是他还是不相信网络，怕服务器端不知道要关闭，所以发送ack=N+1后进入TIME_WAIT状态，如果Server端没有收到ACK则可以重传。服务器端收到ACK后，就知道可以断开连接了。客户端等待了2MSL后依然没有收到回复，则证明服务器端已正常关闭，那好，我客户端也可以关闭连接了。最终完成了四次握手。

　　二、具体过程

　　1、在浏览器中输入URL

　　一般网络地址可以为域名或IP地址，此处为域名。

　　2、应用层DNS解析域名

　　【递归查询】： 一般客户机和服务器之间属递归查询，即当客户机向DNS服务器发出请求后，若DNS服务器本身不能解析，则会向另外的DNS服务器发出查询请求，得到结果后转交客户机。

　　【迭代查询】：一般DNS服务器之间属迭代查询，如：若DNS2不能响应DNS1的请求，则它会将DNS3的IP给DNS2，以便其再向DNS3发出请求。

　　3、应用层客户端发送HTTP请求

　　【请求方法】：URI协议/版本

　　【请求头】：Request Header

　　1、Post 

　　 向指定资源提交数据进行处理请求（例如 提交表单或者上传文件），数据被包含在请求体中。

　　2、Get 

　　主要用于向指定的URL（URI）请求资源（资源文件或是数据均可），请求具有幂等性就可以使用Get。

　　幂等：指多个请求返回相同的结果

　　3、Put ：

　　从客户端向服务器端传送的数据取代指定的文档内容，功能和Post相似。

　　Put方法是幂等方法，Post非幂等方法，Put在请求时容易造成数据冗余，Post则不然

　　4、Head：

　　类似于GET请求，只不过返回中没有具体内容，用户获取报头。

　　HTTP头中包含的元信息应该和一个GET请求的响应消息相同。这种方法可以用来获取请求中隐含的元信息，而不用传输实体本身。也经常用来测试超链接的有效性、可用性和最近的修改。

　　主要有以下特点：

　　　　1、只请求资源的首部；

　　　　2、检查超链接的有效性；

　　　　3、检查网页是否被修改；

　　　　4、多用于自动搜索机器人获取网页的标志信息，获取RSS种子信息，或者传递安全认证信息等

　　RSS：聚合RSS是在线共享内容的一种简易方式（也叫聚合内容）。通常在时效性比较强的内容上使用RSS订阅能更快速获取信息，网站提供RSS输出，有利于让用户获取网站内容的最新更新。

　　5、Delete

　　请求服务器删除指定页面。该请求返回状态有：

　　　　200：表示删除请求被成功执行，返回被删除的资源；

　　　　202：表示删除请求被接受，但还没有被执行；

　　　　204：表示删除请求被执行，但没有返回被删除的资源。

　　6、Connect

　　HTTP1.1协议中预留给能够将连接改为管道方式的代理服务器，把服务器作为跳板，让服务器代替用户去访问其它网页，之后把数据原原本本的返回给用户。

　　7、Options

　　用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。

　　8、Trace

　　TRACE_Method是HTTP（超文本传输）协议定义的一种协议调试方法，该方法会使服务器原样返回任意客户端请求的任何内容。支持该方式的服务器存在跨站脚本漏洞，通常在描述各种浏览器缺陷的时候，把"Cross-Site-Tracing"简称为XST。攻击者可以利用此漏洞欺骗合法用户并得到他们的私人信息。

　　【请求主体】

　　4、传输层TCP传输报文（三次握手）

　　5、网络层IP协议查询MAC地址

　　6、数据到达数据链路层

　　7、服务器接收数据

　　8、服务器响应请求

　　服务器端收到请求后的由Web服务器（准确说应该是Http服务器）处理请求，诸如Apache、Ngnix、IIS等。Web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过Web服务器返回给浏览器客户端。

　　9、服务器返回响应文件

　　服务器会返回一个包含Http状态码的信息头，用来响应浏览器的请求。

　　Http状态码：　　

　　　　1** ：信息，服务器收到请求，需要请求者继续执行操作

　　　　2** ：成功，操作成功接收并处理

　　　　3** ：重定向，需要进一步操作以完成请求

　　　　4** ：客户端错误，请求包含语法问题

　　　　5** ：服务器错误，服务器在处理请求的过程中发生了错误

　　10、关闭TCP链接（TCP四次挥手）

　　11、浏览器解析资源

　　构建DOM树 -> 构建CSS规则树 -> 构建渲染树 -> 布局（浏览器根据渲染树布局，把每个树节点确定在浏览器上） -> Paint画元素（调用Dom节点的Paint方法，画出元素）  -> 绘制渲染树 

　　绘制渲染树上的节点的位置、属性发生变化时，会引起回流和重绘。

　　当样式发生变化且不影响元素在页面中的位置时，会引起重绘。

　　【回流】：就是当渲染树树上的节点的位置、属性发生变化时，浏览器绘制页面的过程

　　【重绘】：就是当样式发生变化且不影响元素在页面中的位置时，浏览器重新赋予元素新样式的过程

　　回流耗费的性能比重绘高，触发回流一定会触发重绘，到那时触发重绘，不一定会触发回流

　　【DOM】：文档对象模型是 HTML 和 XML 文档的编程接口。 DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。

 

参考：

1、https://www.cnblogs.com/yuanzhiguo/p/8119470.html

2、https://www.cnblogs.com/kongxy/p/4615226.html

3、https://www.cnblogs.com/onesea/p/13053697.html

4、https://blog.csdn.net/yaopeng_2005/article/details/7064869

5、https://www.jianshu.com/p/c2050fa5fb94

6、https://blog.csdn.net/jiepan9178/article/details/104264682