请求一个网页的全过程

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

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

页面加载全过程

分析

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

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

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

补充：

Chrome浏览器开发者工具Network窗口下，Timing中显示资源在整个请求生命周期过程中各部分花费的时间。

1）因为有“队头阻塞”，谷歌浏览器对每个域名最多开 6 个并发连接（HTTP/1.1），当页面里链接很多的时候就必须排队等待（Queued、Queueing），这里它就等待了 9.33 秒，然后才被浏览器正式处理；

2）浏览器要预先分配资源，调度连接，花费了 23.24 毫秒（Stalled）;

3）连接前必须要解析域名，这里因为有本地缓存，所以只消耗了 11微秒（DNS Lookup）；

4）与网站服务器建立连接的成本很高，总共花费了 153.40 毫秒，其中有 88.83 毫秒用于 TLS 握手，那么 TCP 握手的时间就是 65.57 毫秒（Initial connection、SSL）；

5）实际发送数据非常快，只用了 0.48 毫秒（Request sent）；

6）之后就是等待服务器的响应，专有名词叫 TTFB（Time To First Byte），也就是“首字节响应时间”，里面包括了服务器的处理时间和网络传输时间，花了 75.28 毫秒；

7）接收数据也是非常快的，用了 0.60 毫秒（Content Dowload）。

从这张图你可以看到，一次 HTTP“请求 - 响应”的过程中延迟的时间是非常惊人的，总时间 254.66 毫秒里占了多于99%。

优化措施详见https://blog.csdn.net/qgnczmnmn/article/details/118086642

一、服务端渲染

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

服务端渲染过程

二、客户端渲染

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