网页加载流程及其优化方法

目前的技术实现中，用户提出页面访问请求后，页面的完整加载流程以下：

1. 用户访问网页，浏览器发送一个HTTP 请求到网络服务器

2. 服务器解析这个请求，而后从存储层去数据，接着生成一个html 文件内容，并在一个HTTP Response 中把它传送给客户端

3. HTTP response 在网络中传输

4. 浏览器解析这个Response ，建立一个DOM 树，而后下载所需的CSS 和JS文件

5. 下载完CSS 文件后，浏览器解析他们而且应用在相应的内容上

6. 下载完JS 后，浏览器解析和执行他们

完整流程见图1.图中左侧表示服务器，右侧表示浏览器。浏览器先发送请求，而后服务器进行查找数据，生成页面，返回html 代码，最后浏览器进行渲染页面。这种模式有很是明显的缺陷：流程中的操做有着严格的顺序，若是前面的一个操做没有执行结束，后面的操做就不能执行，即操做之间是不能重叠。这样就形成性能的瓶颈：服务器生成一个页面的内容时，浏览器是空闲的，显示空白内容；而当浏览器加载渲染页面内容时，服务器又是空闲的，时间与性能的浪费由此产生。

考虑图2 中现有的服务模型，横轴表示花费的时间。黄色表示在服务器的生成页面内容的时间，白色表示网络传输时间，蓝色表示在浏览器渲染页面的时间。能够看出，现有的模式形成很大的时间浪费。 考虑图3 中的状况，图中绿色表示服务器从春储层取查数据花费的时间，在海量数据下，当执行一条很费时的查询语句时（以下图右侧），服务器就就阻塞在那 里没有其余操做，而浏览器更是得不到任何反馈。这会形成很是不友好的用户体验，用户不知道什么缘由使他们等待很长时间。

面对上述问题，咱们看下BigPipe的解决办法。BigPipe提出分块的概念，即根据页面内容位置的不一样，将整个页面分红不一样的块儿——称为pagelet。该技术的设计者Changhao Jiang 是研究电子电路的博士，可能从微机上获得了启发，将众多pagelet加载的不一样阶段像流水线同样在浏览器和服务器上执行，这样就作到了浏览器和服务器的并行化，从而达到重叠服务器端运行时间和浏览器端运行时间的目的。使用BigPipe 不只能够节省时间，使加载的时间缩短，并且能够同过pagelet的分步输出，使一部分的页面内容更快的输出，从而得到更好的用户体验。

想了解BigPipe更多内容请看：BigPipe学习研究