从输入URL到整个页面显示在用户面前发生了什么

大体流程

  1. 浏览器从url中解析出服务器的主机名
  2. 浏览器将服务器的主机名转换成服务器的IP地址(DNS)
  3. 浏览器将端口号从url中解析出来
  4. 浏览器建立一条与web服务器的TCP连接
  5. 浏览器向服务器发送一条HTTP的请求报文
  6. 服务器向浏览器回送一条HTTP的响应报文
  7. 关闭连接,浏览器渲染

1. 浏览器查找域名对应的IP地址

IP地址:IP协议为互联网上的每一个网络和每一台主机都分配的一个逻辑地址。通过IP地址才能确定一台主机(服务器)的位置。

域名(DN,Domain Name):IP地址不便于用户记忆和使用,故用域名来代替纯数字的IP地址。

DNS(Domain Name System):每个域名都对应一个或多个提供相同服务的服务器的IP地址,只有知道服务器IP地址才能建立连接,所以需要通过DNS把域名解析成一个IP地址。

域名和IP的关系

域名和IP不是一一对应的关系,可以把多个提供相同服务的服务器IP设置为同一个域名,同一时刻一个域名可以解析出多个IP地址;同时,一个IP地址可以绑定多个域名,数量不限。

再强调一下,同一时刻一个域名是可以解析出多个IP地址的(多条A记录很常见)。只是每次域名解析请求会根据对应的负载均衡算法计算出一个IP地址返回给访客。

bash
vivi@vivi:~$ nslookup aliyun.com
Server:		127.0.0.53
Address:	127.0.0.53#53

Non-authoritative answer:
Name:	aliyun.com
Address: 140.205.60.46
Name:	aliyun.com
Address: 106.11.172.9
Name:	aliyun.com
Address: 140.205.135.3
Name:	aliyun.com
Address: 106.11.253.83
Name:	aliyun.com
Address: 106.11.249.99
Name:	aliyun.com
Address: 106.11.248.146
Name:	aliyun.com
Address: 2401:b180:1:60::6
Name:	aliyun.com
Address: 2401:b180:1:60::5

vivi@vivi:~$ dig aliyun.com

; <<>> DiG 9.16.1-Ubuntu <<>> aliyun.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 47126
;; flags: qr rd ra; QUERY: 1, ANSWER: 6, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 65494
;; QUESTION SECTION:
;aliyun.com.			IN	A

;; ANSWER SECTION:
aliyun.com.		300	IN	A	106.11.248.146
aliyun.com.		300	IN	A	106.11.249.99
aliyun.com.		300	IN	A	106.11.253.83
aliyun.com.		300	IN	A	140.205.135.3
aliyun.com.		300	IN	A	106.11.172.9
aliyun.com.		300	IN	A	140.205.60.46

;; Query time: 8 msec
;; SERVER: 127.0.0.53#53(127.0.0.53)
;; WHEN: 2 21 16:12:48 CST 2024
;; MSG SIZE  rcvd: 135

DNS重定向

这里的知识点,对前端而言只要知道使用CDN存放静态资源这种优化策略的原理是DNS负载均衡: 如果一个大型网站的所有请求都由同一个服务器进行处理,是不现实的; 并且对用户而言,用户并不关注具体是哪台机器处理了他的请求。 因此,DNS可以根据多个服务器中每个服务器的负载量、该机器离用户的地理位置的距离等信息 返回其中某个适合的主机的IP地址,这个过程就是DNS负载均衡,又叫做DNS重定向CDN(Content Delivery Network)就是利用DNS的重定向技术,DNS服务器会返回一个跟用户最接近的点的IP地址。

要实现一个域名对应多个IP地址的效果,首先需要了解DNS(域名系统)的工作原理。

DNS(Domain Name System)是因特网的一项服务,它作为域名和IP地址相互映射的一个分布式数据库,能够使人们更方便地访问互联网。我们平时访问网站更多的是通过域名而非IP地址去触达,但域名并不能被计算机直接识别,所以需要通过DNS将域名“翻译”成可由计算机直接识别的IP地址。具体的操作方式,是在DNS解析操作平台,添加一条解析记录(A记录或AAAA记录),将网站的域名指向服务器的IP地址。一般情况下,一个域名对应一个IP地址,也就只需添加一条解析记录即可。如果想要实现一个域名对应多个IP地址,就需要添加多条解析记录,这也是通过DNS实现负载均衡的简单原理。

如我们想要将http://www.example.com这个域名分别指向1.1.1.1(北京电信)、2.2.2.2(上海移动)、3.3.3.3(深圳联通)三个IP。那么我们就可以在DNS服务器中配置三个A记录,分别为

这样,每次域名解析请求都会根据对应的负载均衡算法计算出一个不同的IP地址返回给访客,这样就构成了一个服务器集群,并实现负载均衡的效果。在实际场景中,当北京用户访问http://www.example.com域名时,DNS会根据负载均衡算法和A记录得出一个就近IP地址1.1.1.1返回给客户端,当上海用户访问http://www.example.com域名时,DNS就会返回给2.2.2.2的服务器地址,深圳用户返回3.3.3.3。

不同用户就近访问不同的服务器IP地址,访问速度大大提升,同时也减轻了单个服务器的访问压力。

实现负载均衡的方式有很多种,其中DNS是一种十分简单和有效的技术手段,它主要有以下几点优势:

  • 将负载均衡工作交给DNS,省去了网站管理维护负载均衡服务器的麻烦;
  • 技术实现比较灵活,操作简单,成本低,适用于大多数TCP/IP应用;
  • 对于部署在服务器上的应用来说,不需要修改任何代码就能实现不同机器上的应用访问;
  • 很多DNS系统还支持基于地理位置的域名解析,可以将域名解析成距离用户地理位置最近的服务器地址,加快用户访问速度。

但基于DNS的负载均衡同样也存在一些弊端:

  • 目前的DNS系统是需要经过递归服务器、顶级服务器、权威服务器以及众多缓存等多级解析的,在每一个环节都可能存在解析记录缓存。如果服务器IP发生变动,即使修改了A记录,也需要各级缓存失效后才能生效。而在解析生效前的这段时间,用户可能就会根据缓存记录访问到已经被更换过的服务器上,从而导致访问失败。
  • DNS负载均衡采用的是简单的轮询算法,不能区分不同服务器之间的性能和负载差异,不能反映服务器当前的运行状态,所以负载均衡效果并不太好。
  • 为了本地DNS服务器能够及时同步权威服务器上的最新记录,所以一般将DNS缓存刷新时间设置得比较小,这就会导致DNS频繁发起解析请求,从而造成额外的网络问题。

所以一些大型网站总是使用DNS域名解析作为第一级负载均衡手段,然后在通过提供负载均衡服务的内部服务器再进行负载均衡,将最终请求发到真实的服务器上,从而完成最终请求。

2. 浏览器根据IP地址与服务器建立socket连接

建立连接——三次握手

知道了服务器的IP地址,便可开始与服务器建立连接了,通信连接的建立需要经历以下三个过程:

  1. 客户端首先发送一个带有SYN标志的数据包给服务端(您好,我想认识你);
  2. 服务端接受SYN数据包之后,回传一个SYN/ACK标志的数据包以示传达确认连接信息(好的,很高兴认识你);
  3. 客户端收到SYN/ACK的确认数据包之后,再回传一个ACK标志的数据包给服务端,表示‘握手’结束(我也很高兴认识你),至此,客户端便与服务器建立了连接。

说明:

  • TCP协议:三次握手的过程采用TCP协议,其可以保证信息传输的可靠性,三次握手过程中,若一方收不到确认信息,协议会要求重新发送信号。

TCP的作用是啥?

  • 提供无差错的数据传输
  • 按序传输(数据总是会按照发送顺序到达)
  • 未分段的数据流(可以在任意时刻以任意尺寸将数据发送出去)

3. 浏览器与服务器通信:浏览器发出请求、服务器处理请求、渲染

当服务器与客户端建立了连接之后,客户端便开始与服务器进行通信。 网页请求是一个客户端向服务器请求数据==>服务器返回相应数据的单向的请求过程。

  • 浏览器根据URL生成HTTP请求,请求中包含请求文件的位置、请求文件的方式等信息;
  • 服务器接到请求后,会根据HTTP请求中的信息来决定如何获取相应的HTML文件;
  • 服务器将得到的HTML文件发送给浏览器;
  • 在浏览器还没有完全接受完HTML文件时便开始渲染、显示页面
  • 在执行HTML中代码时,根据需要,浏览器会继续请求图片、CSS、Javascript、视频、音频等文件,过程类似。

针对浏览器渲染、显示页面的过程,说明如下:

  • 浏览器端是一个边解析边渲染的过程。
  • HTML Parser将HTML内容解析为DOM Tree,CSS Parser将CSS内容解析为样式规则(Style Rules);
  • 根据样式规则和DOM Tree来渲染树(Render Tree),在这个渲染树的过程中会发生回流(layout/reflow/relayout),回流就是浏览器计算各个盒模型的位置、大小等属性的过程;
  • 等浏览器确定了盒模型的位置、尺寸等数据后开始绘制页面,这个过程称为重绘(Painting/repaint)。

4. 浏览器与服务器断开连接

断开连接——四次挥手

  • 客户端向服务端先发送一个带有FIN标志的数据包(我想关闭);
  • 服务端接受FIN数据包之后,回传一个ACK的数据包给客户端以示传达确认关闭信息(知道了:只是表示确认我知道你想要关闭了,但是我可能还有事还在处理,不一定现在就关)
  • 服务端向客户端发送一个FIN标志的数据包,请求关闭连接(我处理好了,可以关闭了)
  • 客户端收到FIN的数据包之后,回传一个ACK的数据包给服务端,以表示确认关闭(好的,那我关了),服务器收到确认信号后断开连接。

说明:

  • 为什么服务器在接到断开请求时不立即同意断开:当服务器收到断开连接的请求时,可能仍然有数据未发送完毕,所以服务器先发送确认信号,等所有数据发送完毕后再同意断开;
  • 第四次挥手后,主机发送确认信号后并没有立即断开连接,而是等待了2个报文传送周期,原因是:如果第四次挥手的确认信息丢失,服务器将会重新发送第三次挥手的断开连接的信号,而服务器发觉丢包与重新发送断开连接到达主机的时间正好为2个报文传输周期。