前言本文是对《BigPipe学习研究》的总结。昨晚浏览Quora，看到一个类似的问题，然后今天早上google了一下，发现了这篇很详细的文章，于是简化了一下，对理解网页性能优化很有帮助。BigPipe起源BigPipe源于Facebook为解决主页加载速度慢而提出的一项改进技术。《高性能网站建设指南》指出，从浏览器向显示该网页的页面发送请求的过程中，只有10%~20%的时间花在了服务器端生成HTML页面并返回给浏览器的过程中，而80%~90%的时间花在了浏览器上，浏览器解析渲染后的HTML、CSS和JavaScript文件。因此，前端的性能优化是减少加载时间最有效的方法。传统的页面加载模型加载大网页速度慢的根本原因在于浏览器和服务器的工作是顺序的。一般浏览器向服务器发送http请求，然后服务器返回响应文件（CSS/HTML/JavaScript），浏览器解析并执行响应文件。服务器工作时浏览器在等待，反之亦然，浏览器工作时服务器在等待。如果你能打破这种束缚，你就可以大大提高页面加载时间。BigPipe的原理是将整个页面按照不同的页面位置划分为不同的pagelet，将众多pagelet的加载过程像管道一样分布在浏览器和服务器上，实现了服务器和浏览器的并行化。在facebook分区图BigPipe中，用户发出页面访问请求后，页面完整的加载过程如下：请求解析：服务器解析并检查httprequestDatafetching：服务器从存储层获取数据标记生成：服务器生成htmlmarkupNetworktransport：网络传输responseCSSdownloading：浏览器下载CSSDOM树构造和CSS样式：浏览器生成DOM树并使用CSSJavaScriptdownloading：浏览器下载页面引用的JS文件JavaScriptexecution：浏览器执行页面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内容加载完成后，浏览器向服务器发送一个jshttp请求。可以在BigPipe.js中保存所有pagelet需要的js文件路径，判断所有内容加载完成后，统一向服务器发送请求。