关键词：打开一个网页几个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等。很明显浏览器渲染过程发生了两次网络请求。
客户端渲染过程
服务端渲染和客户端渲染的优缺点
三、服务端渲染和客户端渲染抉择
那么我们到底什么时候用服务端渲染什么时候用客户端渲染呢？一般网站既不是纯异步也不是纯服务端渲染出来的。例如：京东的商品列表就采用的是服务端渲染，目的：为了 SEO 搜索引擎优化，而它的商品评论列表，为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染。
参考：
http://www.suoniao.com/article/5e7beb9ce4e60557a02a973e
https://blog.csdn.net/qq_22313585/article/details/78926141
https://baijiahao.baidu.com/s?id=1619524916741810052&wfr=spider&for=pc
网友评论