在地址栏输入网址会发生什么？

从输入url到页面展示到底发生了什么详解

1. 当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址

2. 浏览器查找域名的 IP 地址。请求一旦发起，浏览器首先要做的事情就是解析这个域名，一般来说，浏览器会首先查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS（因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析））请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。
   

3. 浏览器向 web 服务器发送一个 HTTP 请求。在通过DNS域名解析后，获取到了服务器的IP地址，在获取到IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接：

   第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；

   第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

   第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
   

4. 浏览器向服务器发送HTTP请求

5. 服务器返回一个 HTTP 响应，浏览器接收响应
   服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。

   状态码主要包括以下部分：

   1xx：指示信息–表示请求已接收，继续处理。　
   　
   2xx：成功–表示请求已被成功接收、理解、接受。
   　　
   3xx：重定向–要完成请求必须进行更进一步的操作。
   　　
   4xx：客户端错误–请求有语法错误或请求无法实现。
   　　
   5xx：服务器端错误–服务器未能实现合法的请求。
   　　
   响应头主要由Cache-Control、 Connection、Date、Pragma等组成。

   响应体为服务器返回给浏览器的信息，主要由HTML，css，js，图片文件组成。

6. 页面渲染。如果说响应的内容是HTML文档的话，就需要浏览器进行解析渲染呈现给用户。整个过程涉及两个方面：解析和渲染。在渲染页面之前，需要构建DOM树和CSSOM树。
   
   
   在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念：Reflow和Repaint。

   Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树，这个过程称为Reflow。

   Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。

   所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow

   下面这些动作有很大可能会是成本比较高的：

   增加、删除、修改DOM结点时，会导致Reflow或Repaint

   移动DOM的位置，或是搞个动画的时候

   内容发生变化

   修改CSS样式的时候

   Resize窗口的时候（移动端没有这个问题），或是滚动的时候

   修改网页的默认字体时

   基本上来说，reflow有如下的几个原因：

   Initial，网页初始化的时候

   Incremental，一些js在操作DOM树时

   Resize，其些元件的尺寸变了

   StyleChange，如果CSS的属性发生变化了

   Dirty，几个Incremental的reflow发生在同一个frame的子树上

7. 关闭TCP连接或继续保持连接

   通过四次挥手关闭连接(FIN ACK, ACK, FIN ACK, ACK)。
   
   第一次挥手是浏览器发完数据后，发送FIN请求断开连接。

   第二次挥手是服务器发送ACK表示同意，如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥，但考虑到服务器可能还有数据要发送，所以服务器发送FIN应该放在第三次挥手中。

   这样浏览器需要返回ACK表示同意，也就是第四次挥手。

这就是我对在地址栏输入网址会发生了的一些事情的了解，这只是一小点的内容，再深的了解还需大家继续深挖了