Introduction to Bigpipe
Facebook's first asynchronous loading page solution that reduces HTTP requests and quickly loads the first screen. It is a direction for front-end performance optimization.
Comparison of BigPipe and AJAX
AJAX is mainly XMLHttpRequest. The front end asynchronously requests the server to obtain dynamic data and add it to the web page. Such round-trip requests take time, and BigPipe technology does not need to send XMLHttpRequest requests, thus saving time. Another benefit of reducing requests is a direct reduction in server load. Another difference is that the server waits before the AJAX request. Page is waiting after request. BIGPIPE can work in parallel on the front and back ends, which also brings efficiency improvements.
Disadvantages of Bigpipe
SEO issues. Facebook's dynamic display content is mainly customer-oriented personalized pages. The requirements for SEO are not high. And if BIGPIPE technology is used on Taobao, SEO problems will be obvious. I am not sure how well Baidu supports the search for this kind of dynamic page. In fact, there will also be this problem when using ANGULARJS to dynamically bind data. Therefore, pages with SEO needs need to carefully consider whether to use BIGPIPE technology. (It is known that GOOGLE search is optimized for ANGULAR's SEO.) As for Baidu -. -Look at the picture below to find out
NODEJS implementation
js imported from bigpipe.js page
var Bigpipe=function(){
this.callbacks={};
}
Bigpipe.prototype.ready=function(key,callback){
if(!this.callbacks[key]){
this.callbacks[key]=[];
}
this.callbacks[key].push(callback);
}
Bigpipe.prototype.set=function(key,data){
var callbacks=this.callbacks[key]||[];
for(var i=0;i<callbacks.length;i++){
callbacks[i].call(this,data);
}
}
app.js server code
var express = require('express');
var path = require('path');
var http = require('http');
var ejs = require('ejs');
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.get('/index.html', function (req, res) {
res.render('index', { title: "测试" }, function (err, str) {
res.write(str)
})
var Pagelets_list ={
pagelet1:false,
pagelet2:false
}
var data = {is: "true"};
function is_end(Pagelets) {
Pagelets_list[Pagelets]=true;
for (x in Pagelets_list) {
if(!Pagelets_list[x]){
return;
}
}
res.end();
return;
}
function Pagelets(Pagelets) {
res.write('<script>bigpipe.set("' + Pagelets + '",' + JSON.stringify(data) + ');</script>');
is_end(Pagelets)
}
setTimeout(function(){Pagelets("pagelet1");},1000);
setTimeout(function(){Pagelets("pagelet2");},3000);
});
http.createServer(app).listen(3000);
index.html front-end code
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>zchq88-bigpipe</title>
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="test1">loading......</div>
<div id="test2">loading......</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script src="/js/bigpipe.js"></script>
<script>
var bigpipe=new Bigpipe();
bigpipe.ready('pagelet1',function(data){
$("#test1").html("test1 ready");
})
bigpipe.ready('pagelet2',function(data){
$("#test2").html("test2 ready");
})
</script>
</body>
</html>
Summary
In fact, the specific implementation of Bigpipe technology requires the cooperation of server code. During development, I feel that functions account for 20% and optimization accounts for 80% of the workload. Optimization is often more difficult than development. A possible understanding of the full stack is also required. So now nodejs as the middle layer that separates the front and back ends is a solution that I personally think is more reasonable. If the front-end and back-end complete the middle layer separation of nodejs, the implementation of Bigpipe technology will be an optimization that the front-end can complete independently. Improve first screen loading time. And improving the loading time of the entire web page will have a certain effect on increasing the number of views.
Vercel是什么？怎么部署Node服务？May 07, 2022 pm 09:34 PMVercel是什么？本篇文章带大家了解一下Vercel，并介绍一下在Vercel中部署 Node 服务的方法，希望对大家有所帮助！
node.js gm是什么Jul 12, 2022 pm 06:28 PMgm是基于node.js的图片处理插件，它封装了图片处理工具GraphicsMagick（GM）和ImageMagick（IM），可使用spawn的方式调用。gm插件不是node默认安装的，需执行“npm install gm -S”进行安装才可使用。
火了！新的JavaScript运行时：Bun，性能完爆NodeJul 15, 2022 pm 02:03 PM今天跟大家介绍一个最新开源的 javaScript 运行时：Bun.js。比 Node.js 快三倍，新 JavaScript 运行时 Bun 火了！
聊聊Node.js中的多进程和多线程Jul 25, 2022 pm 07:45 PM大家都知道 Node.js 是单线程的，却不知它也提供了多进（线）程模块来加速处理一些特殊任务，本文便带领大家了解下 Node.js 的多进（线）程，希望对大家有所帮助！
nodejs中lts是什么意思Jun 29, 2022 pm 03:30 PM在nodejs中，lts是长期支持的意思，是“Long Time Support”的缩写；Node有奇数版本和偶数版本两条发布流程线，当一个奇数版本发布后，最近的一个偶数版本会立即进入LTS维护计划，一直持续18个月，在之后会有12个月的延长维护期，lts期间可以支持“bug fix”变更。
node爬取数据实例：聊聊怎么抓取小说章节May 02, 2022 am 10:00 AMnode怎么爬取数据？下面本篇文章给大家分享一个node爬虫实例，聊聊利用node抓取小说章节的方法，希望对大家有所帮助！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 English version
Recommended: Win version, supports code prompts!
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
