为什么facebook主页加载这么快:BigPipe?

前言

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

BigPipe起源

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

BigPipe原理

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

facebook分区示意图
为什么facebook主页加载这么快:BigPipe?

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)将样式表放在顶部,一般放在<head>中,主要作用是避免HTML“裸奔”,恶化用户体验。将JavaScript放在底部,放在顶部会使页面加载慢,而且就用户而言,他们更想尽早看到页面,而不是动态功能。Bigpipe实现一个“barrier”的概念,即当所有的pagelet的内容全部加载好了之后,浏览器再向服务器发送js 的http 请求。可以在BigPipe.js 中将所有的pagelet 所需的js文件的路径保存下来,在判断所有的内容加载完成后统一向服务器发送请求。

本文转载于:猿2048➸https://www.mk2048.com/blog/blog.php?id=hh1khkj211j

上一篇:[译]facebook Android平台上动态列表的内存优化(Memory optimization for feeds on Android)


下一篇:react-native开发系列之Android原生交互