浏览器输入URL到显示页面发生了什么

1.1 在浏览器中输入url

用户输入url,例如http://www.baidu.com其中http为协议,www.baidu.com为网络地址,及指出需要的资源在哪台计算机上。一般网络地址可以为域名或ip地址,此处为域名。使用域名是为了方便记忆，一串数字哦我们很容易记错都是为了让计算机理解这个地址还需要把它解析为IP地址。
扩展知识：
域名
是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识（有时也指地理位置）
二级域名 分两种
在国际顶级域名下的二级域名
国际顶级域名下二级域名， 二级域名一般是指域名注册人选择使用的网上名称，如“yahoo.com”；上网的商业组织通常使用自己的商标、商号或其他商业标志作为自己的网上名称，如“microsoft.com”。
国家顶级域名下二级域名
在国家顶级域名之下二级域名一般是指类似于国际顶级域名的表示注册人类别和功能的标志。例如，在“．com.cn”域名结构中，“.com”此时是置于国家顶级域名“.cn”下的二级域名，表示商业性组织，以此类推。
域名发现对于安全测试意义
可以给安全测试提供更多的测试点，方便获取更多相关信息

1.2 查看浏览器缓存

如果访问过该url,会先进入浏览器缓存中查询是否有要请求的文件(浏览器缓存是在本地保存资源副本)当浏览器发现请求的资源已经在浏览器缓存中存在副本,它会拦截请求,返回该资源的副本，并结束请求，而不再去源服务器重新下载。如果缓存查找失败，就会进入网络请求过程中。
在network中会标注该请求是在服务器中请求的还是在浏览器中缓存中的。
一条域名的DNS记录会在本地有两种缓存：浏览器缓存和操作系统（os）缓存。

1. 浏览器缓存 - 浏览器会缓存DNS记录一段时间。一般是2分钟到30分钟吧等。查找浏览器缓存时会按顺序查找:Service Worker–>Memory Cache–>DiskCache–>Push Cache。
2. Service Worker：
   是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
3. Memory Cache：
   内存中的缓存，主要包含的是当前中页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快，内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
4. Disk Cache：
   存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。
   在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。
5. Push Cache：
   Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。
6. 系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用获得系统缓存中的记录（windows里是gethostbyname）。
7. 路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
8. ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
9. 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了

1.3 DNS域名解析

如果没有访问过该url,就会进行DNS域名解析了。
IP地址和域名一样都是用来做网络标志的,域名和ip地址是一一对应的映射关系。
DNS:Domain Name System 域名系统(基于RFC规范解释)，是万维网上作为域名和ip地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的ip数串
DNS解析过程:
1.3.1 用户主机上运行DNS的客户端,就是我们的PC机或者手机端运行着DNS客户端
1.3.2 浏览器将接收到的url 中抽取出域名字段，就是访问主机名，比如www.feng.com并将这给主机名传送给DNS应用的客户端
1.3.3 DNS客户端向DNS服务器发送一份查询报文,报文中包含着要访问的主机名字段(中间包括一些类缓存查询以及分布式DNS集群的工作)
1.3.4 该DNS客户端最终会收到一份回答报文,其中国包含该主机名对应的IP地址
1.3.5 一旦浏览器收到DNS的IP地址，就可以向IP地址定位HTTP服务器发起TCP连接

1.4 获取端口号

可能域名下有多个端口号,对应着不同的网络功能,所以在DNS解析之后,浏览器还会获得端口号

1.5 建立TCP连接

TCP连接,就是耳熟能详的三次握手好朋友,四次挥手是路人

TCP连接过程

1. 服务端通过socket,bind 和 listen 准备好接受外来的连接,此时服务端状态为Listen
2. 客户端通过调用 connect 来发起主动连接,导致客户端TCP发送一个SYN(同步)字节,告诉服务器客户将在(待建立的)连接中发送的数据的初始序列号,客户端状态为SYN_SENT
3. 服务端确认 (ACK) 客户的SYN,并自己也发送一个SYN,它包含服务器在同一连接中发送数据的初始序列号。
4. 客户端确认访问的ACK和SYN,向服务器发送ACK,客户端状态ESTABLISHED
5. 服务器接收ACK,服务器状态ESTABLISHED

1.6 HTTP请求

既然我们握手成功了连接到了web服务器,浏览器会根据解析到的IP地址和端口号发起HTTP请求。

1. http协议向服务器发起请求,发送请求的过程中,浏览器会向Web服务器以Stream(流)的形式传输数据,告诉Web服务器要访问服务器里面的哪个Web应用下的Web资源
2. 服务器接收到浏览器传输的数据后,开始解析接收到的数据,服务器解析请求里面的内容时知道客户端浏览器要访问的是应用里面的哪个Web资源,然后访问器就去读取这个Web资源里的内容,将读到的内容在以StreamL(流)的形式传输给浏览器.

1.7 关闭Tcp

TCP连接中止过程:

1. 某端首先调用close,成为主动关闭端,向另一端发送FIN分节,表示数据发送完毕,此时主动关闭端状态 FIN_WAIT_1;
2. 接收到FIN的是被动关闭端，FIN由TCP确认，先向主动关闭端发送ACK，作为一个文件结束符传递给接收端应用进程（放在已排队等候该应用进程接收到的任何其他数据之后），因为FIN的接收意味着接收端应用进程在相应连接无额外数据可接收，接收端状态CLOSE_WAIT；主动关闭端接收到ACK状态变为FIN_WAIT_2；
3. 一段时间后，接收端接收到这个文件结束符的应用进程调用close关闭套接字，向主动关闭端发送FIN，接收端状态为LAST_ACK
4. 主动关闭端确认FIN，状态变为TIME_WAIT，并向接收端发送ACK，接收端接收到ACK关闭TCP，而主动关闭端一段时间后也关闭TCP；

1.8 浏览器渲染

当浏览器获得一个html文件时,会自上而下的加载,并在加载过程中进行解析渲染。

解析：

1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将CSS解析成 CSS Rule Tree 。
3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。
4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点

渲染：

1. 接收服务器返回html文件。
2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件，浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
3. 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。
4. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
6. 浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它。
7. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这部分代码。
8. 终于等到了＜/html＞的到来，浏览器泪流满面。
9. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径。
10. 浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。