【Javascript】BigPipe

⭐️ 本文首发自前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

传统请求周期：

浏览器发送一个HTTP请求到Web服务器；

web服务器解析请求，然后读取数据存储层，制定一个HTML文件并用一个HTTP响应把它发送到客户端；

HTTP响应通过互联网传送到浏览器；

浏览器解析Web服务器的响应；

使用HTML文件构建一个DOM树并下载引用的CSS和javascript文件

CSS下载后，浏览器解析它，并将它们应用到DOM树；

javascript下载后，浏览器解析并执行它；

针对这样一个低下的执行效率，我们该如何下手？延迟加载js?并行下载？但是这些很少涉及到处理web服务器和浏览器的执行顺序带来的瓶颈。当web服务器正在生成一个页面的时候，浏览器却没事干。当web服务器生成完成一个页面并发送给浏览器渲染的时候，web服务器却帮不上忙。
那么，我们是否可以重叠web服务器的生成时间与浏览器的渲染时间呢？这样是不是能更快的是页面呈现给用户？增加用户体验？

OK，下面我们来说说这一点。

首先举个栗子：

传统模式下，如果用户在一个淘宝搜索他想买的东西，淘宝会将与这个东西相关的产品、广告等数据呈现出来，这个时候，用户不得不等到这些数据都返回并生成最终文件返回到用户终端，那这样必将耗费很长的时间。

这是个很明显的web服务器与浏览器没有并行工作的案例。

为了实现这一点，我们来看看BigPipe在页面生成过程中是如何工作：

请求解析：web服务器解析和完整性检查的http请求；

数据获取：web服务器从存储层获取数据;

标记生成：web服务器生成响应的html标记;

网络传输：响应从web服务器传送到浏览器;

CSS下载；

浏览器构造DOM树结构并应用CSS样式；

js下载；

浏览器执行js；

需要注意的是：BigPipe把一个页面分成了多个可调用的Pagelets（相当于一个页面的一块div，例如导航div、请求div等，这些pagelets之间是相互独立的），并且在不同阶段对这些多个的Pagelets是同时执行

例如：

 <div><div id="left_column"><div id="pagelet_navigation"></div></div><div id="middel_column"><div id="pagelet_composer"></div><div id="pagelet_stream"></div></div><div id="right_column"><div id="pagelet_ask"></div></div></div>

浏览器在渲染后会输出，但是web服务器并没有停下，它会继续生成后续的pagelet，然后浏览器接着渲染；也就是说这一过程形成了一个循环的结构，直到这个循环执行完毕。

并且，在BigPipe中，多个Pagelets的CSS可在同一时间下载，他们可以根据各自CSS的下载完成情况来确认显示顺序。而js的下载要等到所有的pagelets都下载之后才下载。

从这个角度看，页面是逐步呈现的。

来看一段facebook使用BigPipe的代码：

 <script>big_pipe.onPageletArrive({"id":"pagelet_welcome_box","css":{name: "css/c5mv8gd5gwoc4kk0.pkg.css"permanent: truesrc: "http://static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.css"type: "css"},"js":{name: "js/19khsprwvtvokwow.pkg.js"permanent: falsesrc: "http://static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.js"type: "js"},"content":{"pagelet_welcome_box":"<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock clearfix fbxWelcomeBox\"> ...这里省略N多HTML"}});</script>

重点看四个参数id、css、js、content,很明显，content中的html是插入到对应的id的，并下载对应的css、js。

【Javascript】BigPipe相关推荐

【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload
有时候.在JavaScript中.即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就開始想document是否写错之类的.事实上根本就不是你的代码的大 ...
【Javascript】深入理解this作用域问题以及new/let/var/const对this作用域的影响
理解this作用域 <javascript高级程序设计>中有说到: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象调用时,t ...
【JavaScript】查漏补缺 —对象转换成字符串JSON.stringify()
[JavaScript]查漏补缺 -对象转换成字符串JSON.stringify() 将字符串转换为对象类型
【JavaScript】查漏补缺 —数组中reduce()方法
[JavaScript]查漏补缺 -数组中reduce()方法
【JavaScript】查漏补缺 —数组中filter()方法
[JavaScript]查漏补缺 -数组中filter()方法一.filter()方法该方法用于过滤数组成员,满足条件的成员组成一个新数组返回.它的参数是一个函数,所有数组成员依次执行该函数,返回 ...
Number()函数转换‘单个数值的数组‘为何是数字?【JavaScript】
Number()函数转换'单个数值的数组'为何是数字?[JavaScript] 1.Number() 熟悉Number()函数的同学可跳过项使用Number函数,可以将任意类型的值转化成数值. 原始 ...
【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...
【JavaScript】时间与时间戳相互转换
[JavaScript]时间与时间戳相互转换文章目录 [JavaScript]时间与时间戳相互转换 1.时间戳 2.时间戳转换为时间 3.时间转换为时间戳 4.时间yyyy-MM-dd HH:mm: ...
【JavaScript】鼠标、键盘的基础事件
鼠标键盘的基础事件: 鼠标事件事件类型点击左键 click 鼠标经过 mouseover 鼠标离开 mouseout 获得鼠标焦点 focus 失去鼠标焦点 blur 鼠标移动 mousemove ...

【Javascript】BigPipe

【Javascript】BigPipe相关推荐

最新文章

热门文章