一个网页由打开到加载完成经历怎样的过程
1、概要
从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程。
2、分析
众所周知,打开一个网页的过程中,浏览器会因页面上的css/js/image等静态资源会多次发起连接请求,所以我们暂且把这个网页加载过程分成两部分:
html(jsp/php/aspx) 页面加载(假设存在简单的Nginx负载均衡)
css/js/image等 网页静态资源加载(假设使用CDN)
2.1.
2.1.1 DNS解析
什么是DNS解析?当用户输入一个网址并按下回车键的时候,浏览器得到了一个域名。而在实际通信过程中,我们需要的是一个IP地址。因此我们需要先把域名转换成相应的IP地址,这个过程称作DNS解析。
1) 浏览器首先搜索浏览器自身缓存的DNS记录。
2) 如果浏览器缓存中没有找到需要的记录或记录已经过期,则搜索hosts文件和操作系统缓存。
3) 如果在hosts文件和操作系统缓存中没有找到需要的记录或记录已经过期,则向域名解析服务器发送解析请求。
4) 如果域名解析服务器也没有该域名的记录,则开始递归+迭代解析。
5) 获取域名对应的IP后,一步步向上返回,直到返回给浏览器。
至此,浏览器就得到了url的IP地址。
2.1.2 发起TCP请求
建立TCP连接的过程就是三次握手过程。
这里简述一下三次握手的过程:
- 客户端向服务器端发送连接请求的报文;
- 服务器端收到请求后,同意建立连接,向客户端发送确认报文;
- 客户端收到服务器端的确认报文后,再次向服务器端发出报文,确认已收到确认报文。
至此,浏览器与服务器已经建立了TCP连接,开始进行通信。
2.1.3 建立TCP连接后,浏览器向服务器发送http请求
例如:浏览器发出取文件指令GET
2.1.4 负载均衡
什么是负载均衡?当一台服务器无法支持大量的用户访问时,将用户分摊到两个或多个服务器上的方法叫负载均衡。
1) 一般,如果我们的平台配备了负载均衡的话,前一步DNS解析获得的IP地址应该是我们Nginx负载均衡服务器的IP地址。所以,我们的浏览器将我们的网页请求发送到了Nginx负载均衡服务器上。
2) Nginx根据我们设定的分配算法和规则,选择一台后端的真实Web服务器,与之建立TCP连接、并转发我们浏览器发出去的网页请求。
3) Web服务器收到请求,产生响应,并将网页发送给Nginx负载均衡服务器。
4) Nginx负载均衡服务器将网页传递给filters链处理,之后发回给我们的浏览器。
2.1.5 服务器响应http请求,将请求的指定资源发送给浏览器
2.1.6.浏览器释放TCP连接
建立TCP连接的过程就是四次挥手过程。
这里简述一下四次挥手过程:
1.浏览器向服务器发送释放连接报文;
2.服务器收到释放报文后,发出确认报文,然后将服务器上未传送完的数据发送完;
3.服务器数据传输完成后,向浏览器发送释放连接请求;
4.浏览器收到报文后,发出确认,然后等待一段时间后,释放TCP连接。
2.1.7 浏览器渲染
1) 浏览器根据页面内容,生成DOM Tree。根据CSS内容,生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。
2) 根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)
3) 根据Render Tree渲染网页