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

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

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学习研究