当我们在浏览器中输入URL时,Web页面是如何呈现的

首先我们需要了解两点:1. URL代表的是资源的位置;2. 浏览器本身不具有发送请求的功能。

我们先来看看最简单的一个过程,如下图所示:
简单的一个请求相应过程

但是接下来我们会更加深入的了解:当我们在浏览器中输入URL时,到Web页面是呈现出来,中间究竟发生了怎样的一个过程?
接下来先来看一张图片,然后我会根据图片来进行一个相应的讲解,图片如下图所示:
详细的一个解析过程

  1. a. 首先我们需要清楚一点,就是daipi173.github.io域名相当于服务器的一个别名,而服务器真正的地址是一个ip地址
    任何一个域名首先都会去DNS服务器中去转换成一个ip地址,只有转换成ip地址之后才能准确的找到这个服务器,你通过别名它不认识这是哪一个服务器。
    我们可以通过Ping daipi173.github.io来解析该域名所对应的ip地址。
    b. 为什么不直接输入一个ip地址,而需要去使用域名呢?
    其原因是因为我们对数字不是特别的敏感,相反对拼音这一些更加敏感并且是容易记住的。
    c. 注意本地中会有一个hosts的文件,这个文件会存储一部分这样的域名和ip地址对应的信息。举一个例子:比如我要去访问一个百度, 它会首先去hosts本地文件中看一下有没有www.baidu.com 所对应的ip地址信息,如果有的话就直接去访问,而不用去DNS服务器了;如果hosts本地文件没有存储该www.baidu.com 域名所对应的ip地址信息,那么就需要去DNS服务器中去解析一下域名,然后返回一个ip,然后改ip会存储到hosts文件当中,当下一次还需要去访问时,就不需要走DNS服务器了,直接走本地中取出来就可以了。(注意:hosts文件不是永久存储的,它会存储一段时间之后,里面的存储信息就会失效了。

  2. 浏览器向服务器发送请求之前,会先建立一个可靠的TCP/IP连接(三次握手)
    为什么叫TCP/IP?因为TCP模块是没有发送功能的,它要委托IP模块帮它把数据包发送出去,因此叫TCP/IP。
    a. 首先客户端先向服务器请求连接,然后会带上SYN=1的标识表示去请求连接;
    b. 服务器接收到信息,然后确认信息没有问题,返回ACK=1,同时想向客户端建立连接,然后发送SYN=1的数据包;
    c. 双方都确认好了没有问题之后,TCP连接就建立成功了。(此时握手结束)

  3. 浏览器向web服务器发送请求

  4. web服务器接收并处理请求

  5. web服务器会向浏览器返回响应

  6. TCP/IP关闭(四次挥手)
    注意:TCP/IP连接和断开是为了安全考虑
    a. 客户端向服务器请求断开,它会发送一个FIN=1的TCP头部信息,然后委托给IP模块,然后把它发送出去;
    b. 服务器接收到这个包,然后看了看包的信息,它会给客户端返回一个ACK的响应,表示我已经接收到了,需要让你等一下(此时浏览器是出于等待状态的);
    c. 服务器确定已经没有什么东西可以给客户端了,它就会发送一个FIN表示同意断开的请求;
    d. 此时客户端会给服务器返回一个ACK响应,表示你要断开的请求我也接收到了,此时他们之间就可以断开了。

  7. 解析HTML、渲染页面
    下面看一看js加载的时间线图:
    js加载的时间线过程
    解析DOM的时候生成DOM树,解析CSS的时候生成CSS树,DOM树和CSS树全部都完成后,它会结合生成一个render树。render树有重排重绘的过程。

  8. 关于UDP连接和TCP连接的区别:
    UDP连接采用无连接的,而TCP连接采用有连接的
    像视频、语音,它们的包很大,可能会分成许多个小包,丢了其中一两个是无所谓的(它是比较节约性能的)。
    像字符串、数据等的时候,需要采用TCP。因为这些东西比较小,可能会因为网络不好的原因造成丢了一个包的话,整个东西都可能找不到了。