经典面试题-从浏览器地址栏输入网址，到网页彻底打开，中间过程详解

前言：前天看到曹大『caoz的梦呓』在帅张『stormzhang』的星球说到一个经典面试题：从浏览器地址栏输入网址，到网页彻底打开，中间经历了什么。

在结合曹大给的分析和自己查阅相关资料。遂整理出了这篇详细的文章供大家参考。

背景分析：
这题考查的是面试者对整个上网概念以及背后流程的了解。而俗称的上网大致分为三个方面：
1：客户端（也称用户端，较常用的就是万维网使用的网页浏览器）。
2：网络传输层（两台计算机经过计算机网络进行的数据通信）。
3：服务端（为客户端提供服务，提供资源，保存客户端数据的一种服务程序）。

一：URL解析
名词解释：
URL :(Uniform Resource Locator)统一资源定位符，用于互联网上不同资源的标示。

1:浏览器本地解析URL（一般是做格式化检查以及确认用http还是https协议，默认是http协议）。
2：浏览器本地缓存查找url对应ip。
3：本地host文件查找对应ip。
4：本地路由器dns查看对应ip。

若上面都查不到，则要请求到dns服务器查找ip。
1:：服务商dns检查缓存是否存在对应ip。
2：若不存在缓存或者缓存过期 则到根域名服务商上查找对应ip。
3：根域名服务商也是先检查缓存，若无，则检查域名为哪个dns服务商负责解析。然后请求转发。获得域名对应ip。

最后：ip返回到本地服务商的dns，本地服务商dns更新缓存。客户端成功拿到ip。（至于为啥一定要拿到ip，因为我们的tcp/ip协议很任性的只能识别ip）

 二：网络传输通信
1：客户端拿到ip地址后，想要进行通信，先要和对方取得联系。看对方在不在，这个通常是由三次握手来实现。

三次握手补充：客户端和服务器一共发送三个包，同步连接双方的序列号和确认号并交换 TCP） 建立tcp连接。与目标服务器建立短连接。
通俗的说就是这样：

客户端：在家么，想去你家看看你。
服务器：在呀，欢迎来玩啊。
客户端：马上到。

2：三次握手完成后，tcp和服务器之间就建立了一个可靠地虚拟通道。浏览器知道了这个消息后。就将http请求消息打包，通过tcp协议发送给了服务端。

3：服务端收到请求报文后，处理报文信息，处理完成后将数据打包返回给客户端啊。
4：通信完成后，通过四次挥手，拆除tcp连接。客户端或服务器均可主动发起挥手动作。
5：最后，客户端拿到返回数据。

 三：页面渲染
1：浏览器会将返回的HTML通过深度遍历解析成一个DOM树。
2：将CSS解析成 CSS Rule Tree 。
3：根据DOM树和CSSOM来构造 Rendering Tree。

补充（CSSOM是一个建立在web页面上的 CSS 样式的映射，它和DOM类似，但是只针对CSS而不是HTML）

4：最后通过Rendering Tree，浏览器就可以知道每个节点和各节点css的关系，再算出每个节点在屏幕的位置就可以绘制出每个节点了。
上述渲染过程为从上而下，逐步完成。即浏览器绘制了一部分就会显示一部分出来，再继续计算下面的部分。

结尾：整个过程详细描述起来还有很多的知识点没有说清楚，拓展开来还有很多的分布式，数据库，负载均衡，轮询等可以聊。我作为一个技术渣，通过曹大的这次分析，结合自己的思考输出了这篇文章。写文章的目的也只是为了让自己知识点记忆更深刻。最后，感谢我的偶像曹大和帅张。

祝所有技术人都能成长。共勉。