一个网页的形成过程

7次阅读

共计 1507 个字符,预计需要花费 4 分钟才能阅读完成。

一个网页从我们输入网址到打开经历了以下步骤。

DNS 解析

DNS(域名系统 Domain Name System)由解析器和域名服务器组成, 域名服务器保存着该网络中所有主机的域名和对应的 IP 地址, 域名有唯一对应的 IP 地址, 但是 IP 地址不一定对应一个域名,我们就是根据 DNS 来上网的。
当用户输入一个网址并按下回车键时,浏览器得到一个域名。而实际通讯过程中我们需要一个 IP 地址。因此我们需要先把域名转化成对应的 IP 地址,这个过程就叫做 DNS 解析。
过程
简述

浏览器搜索缓存 –>hosts 文件和操作系统缓存 –> 域名解析服务器 –> 递归迭代 YSE–> 返回给浏览器 NO–> 向下找

详细描述

浏览器首先搜索自身缓存的 DNS 记录。
如果没有或记录已经过期,则搜索 hosts 文件和操作系统缓存。
如果没有或记录已经过期,则向域名解析服务器发送解析请求。
如果还是没有,则开始递归 + 迭代解析。
获取域名和对应 IP 后,一步步向上返回,直到返回给浏览器。

发起 TCP 请求(三次握手)
简述

客户端(发送连接请求)–> 服务器端服务器端(建立连接并发送确认报文)–> 客户端客户端(发送确认收到确认报文)–> 服务器端

详细描述

客户端向服务器端发送连接请求的报文。
服务器端收到请求后,同意建立连接,并向客户端发送确认报文。
客户端收到后,再次向服务器端发送报文,确认已经收到确认报文。

建立起 TCP 连接后,开始进行通信。
建立 TCP 连接后,浏览器向服务器发送 HTTP 请求
如:浏览器发出取文件指令 GET。
负载均衡
当一台服务器无法支持大量用户访问时,将用户分摊到两个或多个服务器上的方法叫负载均衡。
过程
简述
浏览器(发送请求)–>Nginx(建立 TCP 连接,转发请求)–>web 服务器(发送网页)–>Nginx(传递网页)–>filter 链(处理)–> 浏览器
详细描述

一般,如果我们的平台配备了负载均衡的话,前一步 DNS 解析获得的 IP 地址应该是我们 Nginx 负载均衡服务器的 IP 地址。所以,我们的浏览器将我们的请求发送到了 Nginx 负载均衡服务器上。

Nginx 根据我们设定的分配算法和规则,选择一台后端的真实 Web 服务器,与之建立 TCP 连接、并转发我们浏览器发出去的网页请求。

Web 服务器收到请求,产生响应,并将网页发送给 Nginx 负载均衡服务器。

Nginx 负载均衡服务器将网页传递给 filter 链处理,之后发回给我们的浏览器。

服务器响应 HTTP 请求,将请求的资源发送给浏览器。
浏览器释放 TCP 连接(四次挥手)

浏览器(发送释放连接报文)–> 服务器服务器(发送确认报文并发送完数据)–> 浏览器服务器(发送释放连接请求)–> 浏览器浏览器(发出确认)–> 服务器等待一段时间后,浏览器释放 TCP 连接

浏览器向服务器发送释放连接报文。
服务器收到后,发出确认报文,然后将服务器上未传送完的数据发送完。
服务器数据传输完成后,向浏览器发送释放连接请求。
浏览器收到后,发出确认,然后等待一段时间,释放 TCP 连接。

浏览器渲染
浏览器接收到服务器服务器返回的 HTML 页面代码,在解析和渲染这个页面时,里面的 JS、CSS、图片等静态资源,也是一个个 HTTP 请求,都需要经过上面的步骤。

浏览器根据页面内容,生成 DOM Tree。
根据 css 内容,生成 CSS Rule Tree(规则树)。
调用 JS 执行引擎执行 JS 代码。
根据 DOM Tree 和 CSS Rule Tree 生成 Render Tree(呈现树)。
根据根据 Render Tree 渲染网页。

文章参考自 https://www.jianshu.com/p/0c8c7cecf946 和 https://www.jianshu.com/p/cc1d185a7842

正文完
 0