摘要：起源来源于公司解决主页面加载速度慢而提出的一项改进技术。流水线方式降低了页面整体的加载时间，而且，通过让一部分页面先显示，让用户感觉页面加载的更快了。将样式表放在顶部，一般放在中，主要作用是避免裸奔，恶化用户体验。
前言
本文是对《BigPipe学习研究》的总结。昨晚刷Quora，看到一个类似的问题，然后今早百度了下，发现了这篇非常细致的额文章，所以精简了下，对理解网页性能优化有很大帮助。
BigPipe起源BigPipe来源于facebook公司解决主页面加载速度慢而提出的一项改进技术。《高性能网站建设指南》指出，从浏览器发出请求到页面显示网页的过程中，只有10%~20%的时间花在服务器产生HTML页面并传回浏览器这个过程，80%~90%的时间花在浏览器解析渲染得到的HTML、CSS、JavaScript文件。所以，针对前端的性能优化是减少加载时间最有效地方法。
传统页面加载模型加载大型网页速度慢的根本原因在于，浏览器和服务器的工作是有先后顺序的。一般，浏览器发送http请求到服务器，然后服务器返回响应文件（CSS/HTML/JavaScript），浏览器解析并执行响应文件。服务器工作的时候浏览器在等待，反之，浏览器工作的时候服务器在等待。如果能够打破这一桎梏，就可以极大改善页面加载时间。
根据页面位置不同，将整个页面分为不同的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）将样式表放在顶部，一般放在
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50230.html
摘要：起源来源于公司解决主页面加载速度慢而提出的一项改进技术。流水线方式降低了页面整体的加载时间，而且，通过让一部分页面先显示，让用户感觉页面加载的更快了。将样式表放在顶部，一般放在中，主要作用是避免裸奔，恶化用户体验。 前言 本文是对《BigPipe学习研究》的总结。昨晚刷Quora，看到一个类似的问题，然后今早百度了下，发现了这篇非常细致的额文章，所以精简了下，对理解网页性能优化有很大帮...
摘要：杨永林，人称教主，八年前端开发经验，原新浪微博前端技术专家，现任链家网前端总架构师。年年底，教主加入链家网，负责前端的整体架构工作。 杨永林，人称教主，八年前端开发经验，原新浪微博前端技术专家，现任链家网前端总架构师。长期研究Web访问性能优化和前端框架搭建。作为初始团队成员，教主参与了新浪微博所有PC版本的开发，其中4~6版以架构师的身份设计了微博PC版的前端架构。在新浪微博任职期间...
摘要：比如首页是一个静态页面，不依赖什么接口列表页涉及到价格日历，筛选，一些提示信息模块等，依赖不同的接口因为使用了，可以实现前后端模板共用。 说起网页速度优化，想必大家都能说上几句，最知名的莫过于雅虎的23条了。这里有一系列的小建议和优化策略，但是治病也得看症状，对症下药才是关键。 比如淘宝卖家中心首页速度优化的这个场景，就是一个很突出的例子。文章里针对首页展示优化策略做个一个全面的对比，...
摘要：当年的加载在没有前端工程化之前，基本上是我们是代码一把梭，把所需要的库和自己的代码堆砌在一起，然后自上往下的引用就可以了。而且对于前后端的技术要求较高，所以对于项目未必是最有效的方案。 当年的 js 加载 在没有 前端工程化之前，基本上是我们是代码一把梭，把所需要的库和自己的代码堆砌在一起，然后自上往下的引用就可以了。 那个时代我们没有公用的cdn，也没有什么特别好的方法来优化加载j...
摘要：前端性能优化的涉及点从服务器到协议再到宿主环境本身都要有比较深刻的认识，业界目前主要还是以雅虎总结出来条前端性能优化的黄金军规为参考。 欢迎大家前往腾讯云技术社区，获取更多腾讯海量技术实践干货哦~ 导语 : 从事前端有6年+的时间了，从最开始的美工到重构再到偏向js逻辑开发的前端开发，一直在前端这个行业里面摸索和学习，我现在将自己这些年的一个心得体会来个系统性的梳理写成一篇关于性能优化...
阅读 2786·2021-11-17 09:33
阅读 2168·2021-09-03 10:40
阅读 522·2019-08-29 18:45
阅读 2955·2019-08-29 16:21
阅读 612·2019-08-29 11:11
阅读 3393·2019-08-26 12:00
阅读 2946·2019-08-23 18:19
阅读 1092·2019-08-23 12:18
