请求一个网页的全过程

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

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

分析

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

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

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

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

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

那么我们到底什么时候用服务端渲染什么时候用客户端渲染呢？一般网站既不是纯异步也不是纯服务端渲染出来的。例如：京东的商品列表就采用的是服务端渲染，目的：为了 SEO 搜索引擎优化，而它的商品评论列表，为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染。

我们需要知道的是，从prompt for unload一直到Processing页面一直是白的。我们可以根据上图来考虑需要优化的几个点：

1) 缓存

2) CDN

3) TCP连接时间，加大带宽，服务器端响应速度

4) 请求，响应速度，数据量越小，响应越快

5) Processing，优化dom结构

参考：

使用 Performance API 获取页面性能