请求一个网页的全过程

2020-06-13 本文已影响0人 Jeff_9021

关键词：打开一个网页几个HTTP请求

总结：若网站是纯服务端渲染，那么浏览该网站至少发起一次请求，否则浏览该网站至少发起两次请求。

页面加载全过程

浏览器加载页面全过程

分析

众所周知，打开一个网页的过程中，浏览器会因页面上的css/js/image等静态资源而多次发起连接请求，所以我们暂且把这个网页加载过程分成两部分：

（1）html(jsp/php/aspx) 页面加载(假设存在简单的Nginx负载均衡)

（2）css/js/image等网页静态资源加载(假设使用CDN)

一、页面加载

浏览器页面准备：如unload前一个页面、初始化资源等。

重定向：如果服务端返回header中定义了重定向才会有这个过程，如果没有重定向，不会产生这个过程。

app cache：会先检查这个域名是否有缓存，如果有缓存就不需要DNS解析域名。这里的app是值应用程序application，不指手机app。

DNS解析：把域名解析成IP，如果直接用ip地址访问，不产生这个过程。

TCP连接： 浏览器会选择一个大于1024的本机端口向目标IP地址的80端口发起TCP连接请求。经过标准的TCP握手流程，建立TCP连接。但是依赖于长连接，不会产生这个过程。

HTTP请求：（发送请求+接受请求）

其本质是在建立起的TCP连接中，按照HTTP协议标准发送一个索要网页的请求。http协议是经过TCP来传输的，所以产生一个http请求就会有TCP connect。

负载均衡：

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

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

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

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

浏览器渲染：

（解析HTML结构加载外部脚本和样式表文件：正常来说JS、css都是外部加载的。解析并执行脚本代码。构建与解析HTML DOM树）

1) 浏览器根据页面内容，生成DOM Tree。根据CSS内容，生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。

2) 根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)

3) 根据Render Tree渲染网页

但是在浏览器解析页面内容的时候，会发现页面引用了其他未加载的image、css文件、js文件等静态内容，因此开始了第二部分。

二、网页静态资源加载

以阿里巴巴的淘宝网首页的logo为例，其url地址为 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg

我们清楚地看到了url中有cdn字样。

什么是CDN？如果我在广州访问杭州的淘宝网，跨省的通信必然造成延迟。如果淘宝网能在广东建立一个服务器，静态资源我可以直接从就近的广东服务器获取，必然能提高整个网站的打开速度，这就是CDN。CDN叫内容分发网络，是依靠部署在各地的边缘服务器，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度。

接下来的流程就是浏览器根据url加载该url下的图片内容。本质上是浏览器重新开始第一部分的流程，所以这里不再重复阐述。区别只是负责均衡服务器后端的服务器不再是应用服务器，而是提供静态资源的服务器。

加载外部图片

页面加载完成，页面正常显示。

浏览器请求某资源时间线

重定向过程

重定向是http协议中的规范，重定向需要和服务端通过http协议通信，因此也有着DNS解析和TCP链接等过程，具体如下：

app cach

DNS解析

TCP连接

发送请求

接受请求：响应状态码为302, 且响应头中包含重定向地址Location

进行重定向：将浏览器地址重定向至location指向的地址

一、服务端渲染

就是服务端接收到客户端发来的html字符串时，使用模板引擎（ejs、jade等）将数据传到模板，最后返回一个数据+html的字符串给浏览器，浏览器自动解析成一个完成的html页面，很明显浏览器渲染过程只发生了一次网络请求。

服务端渲染过程

二、客户端渲染

客户端向服务端发起请求，服务端不做任何处理，直接以原文件的形式返回给客户端，客户端渲染html页面，当遇到ajax请求，又发起一次网络请求，服务器端根据接口返回相应的数据，客户端结合模板引擎（art-template）和数据拼装，最后以dom形式插入html页面，当然这种方式是比较老套的方式了，如当下用得火热的 spa 框架，Angular、React、Vue等。很明显浏览器渲染过程发生了两次网络请求。