为什么facebook主页加载这么快：BigPipe？

前言

本文是对《BigPipe学习研究》的总结。昨晚刷Quora，看到一个类似的问题，然后今早百度了下，发现了这篇非常细致的额文章，所以精简了下，对理解网页性能优化有很大帮助。

BigPipe起源

BigPipe来源于facebook公司解决主页面加载速度慢而提出的一项改进技术。《高性能网站建设指南》指出，从浏览器发出请求到页面显示网页的过程中，只有10%~20%的时间花在服务器产生HTML页面并传回浏览器这个过程，80%~90%的时间花在浏览器解析渲染得到的HTML、CSS、JavaScript文件。所以，针对前端的性能优化是减少加载时间最有效地方法。
传统页面加载模型加载大型网页速度慢的根本原因在于，浏览器和服务器的工作是有先后顺序的。一般，浏览器发送http请求到服务器，然后服务器返回响应文件（CSS/HTML/JavaScript），浏览器解析并执行响应文件。服务器工作的时候浏览器在等待，反之，浏览器工作的时候服务器在等待。如果能够打破这一桎梏，就可以极大改善页面加载时间。

BigPipe原理

根据页面位置不同，将整个页面分为不同的pagelet，将众多pagelet的加载过程像流水线一样分布在浏览器和服务器上，这实现了服务器和浏览器的并行化。

facebook分区示意图

BigPipe 中，用户提出页面访问请求后，页面的完整加载流程如下:

1. Request parsing：服务器解析和检查http request

2. Datafetching：服务器从存储层获取数据

3. Markup generation：服务器生成html 标记

4. Network transport ： 网络传输response

5. CSS downloading：浏览器下载CSS

6. DOM tree construction and CSS styling:浏览器生成DOM 树，并且使用CSS

7. JavaScript downloading: 浏览器下载页面引用的JS 文件

8. JavaScript execution: 浏览器执行页面JS代码

这个8 个流程几乎与上文中提到现有的模式没有区别，但这只是一个pagelet 的完整流程，而多个pagelet 的不同操作阶段就可以像流水线一样进行执行了。流水线方式降低了页面整体的加载时间，而且，通过让一部分页面先显示，让用户感觉页面加载的更快了。

限制

这一技术的限制很明显，由于不同pagelet是通过JavaScript动态加载的，这会导致爬虫无法收录，影响SEO结果；还有就是当客户端禁用JavaScript时，这一功能就不能用了。所以要进行浏览器嗅探和JavaScript脚本检测，然后决定使用原有模式或者是动态添加模式。

facebook的其他性能优化技术

1）资源文件的G-zip压缩，使CSS和JS文件大小降低70%，这是页面加载过程中传输的主要文件。
2）JavaScript精简，移除代码中不必要的注释和字符，精简工具可以使用JSMin，精简后得脚本会减少20%左右。
3）将CSS和JavaScript合并，减少HTTP请求次数，尤其是对于用户量巨大的facebook，这会极大地降低服务器压力。
4）使用外部JavaScript和CSS，有利于文件复用和修改。由于浏览器缓存的作用，仅第一次加载会慢一点。
5）将样式表放在顶部，一般放在中，主要作用是避免HTML“裸奔”，恶化用户体验。将JavaScript放在底部，放在顶部会使页面加载慢，而且就用户而言，他们更想尽早看到页面，而不是动态功能。Bigpipe实现一个“barrier”的概念，即当所有的pagelet的内容全部加载好了之后，浏览器再向服务器发送js 的http 请求。可以在BigPipe.js 中将所有的pagelet 所需的js文件的路径保存下来，在判断所有的内容加载完成后统一向服务器发送请求。