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

时间 2019-11-09

标签为何主页加载 bigpipe 栏目硅谷繁體版

原文原文链接

前言

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

BigPipe起源

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

BigPipe原理

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

facebook分区示意图
缓存

BigPipe 中，用户提出页面访问请求后，页面的完整加载流程以下:性能优化

Request parsing：服务器解析和检查http request服务器
Datafetching：服务器从存储层获取数据网络
Markup generation：服务器生成html 标记工具
Network transport ：网络传输response性能
CSS downloading：浏览器下载CSS学习
DOM tree construction and CSS styling:浏览器生成DOM 树，而且使用CSS
JavaScript downloading: 浏览器下载页面引用的JS 文件
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）将样式表放在顶部，通常放在<head>中，主要做用是避免HTML“裸奔”，恶化用户体验。将JavaScript放在底部，放在顶部会使页面加载慢，并且就用户而言，他们更想尽早看到页面，而不是动态功能。Bigpipe实现一个“barrier”的概念，即当全部的pagelet的内容所有加载好了以后，浏览器再向服务器发送js 的http 请求。能够在BigPipe.js 中将全部的pagelet 所需的js文件的路径保存下来，在判断全部的内容加载完成后统一贯服务器发送请求。