How nodejs implements bigpipe asynchronously loading pages
This article shares with you the solution of using nodejs combined with bigpipe to implement asynchronous loading of pages. It is very practical and is also a direction for future front-end performance optimization. I hope you will like it.
Bigpipe introduces
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 between 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.
Bigpipe Disadvantages
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 problems in this regard 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 know
NODEJS implementation
js introduced by 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>
<p id="test1">loading......</p>
<p id="test2">loading......</p>
<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. Still high. 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.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
About node.js method of reading and writing system files and directories based on the fs module
Introduction to Node.js connecting to postgreSQL and performing data operations
nodejs uses ztree to move between two divs
The above is the detailed content of How nodejs implements bigpipe asynchronously loading pages. For more information, please follow other related articles on the PHP Chinese website!
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is nodejs a backend framework?
Apr 21, 2024 am 05:09 AM
Node.js can be used as a backend framework as it offers features such as high performance, scalability, cross-platform support, rich ecosystem, and ease of development.
How to connect nodejs to mysql database
Apr 21, 2024 am 06:13 AM
To connect to a MySQL database, you need to follow these steps: Install the mysql2 driver. Use mysql2.createConnection() to create a connection object that contains the host address, port, username, password, and database name. Use connection.query() to perform queries. Finally use connection.end() to end the connection.
What is the difference between npm and npm.cmd files in the nodejs installation directory?
Apr 21, 2024 am 05:18 AM
There are two npm-related files in the Node.js installation directory: npm and npm.cmd. The differences are as follows: different extensions: npm is an executable file, and npm.cmd is a command window shortcut. Windows users: npm.cmd can be used from the command prompt, npm can only be run from the command line. Compatibility: npm.cmd is specific to Windows systems, npm is available cross-platform. Usage recommendations: Windows users use npm.cmd, other operating systems use npm.
Is there a big difference between nodejs and java?
Apr 21, 2024 am 06:12 AM
The main differences between Node.js and Java are design and features: Event-driven vs. thread-driven: Node.js is event-driven and Java is thread-driven. Single-threaded vs. multi-threaded: Node.js uses a single-threaded event loop, and Java uses a multi-threaded architecture. Runtime environment: Node.js runs on the V8 JavaScript engine, while Java runs on the JVM. Syntax: Node.js uses JavaScript syntax, while Java uses Java syntax. Purpose: Node.js is suitable for I/O-intensive tasks, while Java is suitable for large enterprise applications.
Is nodejs a back-end development language?
Apr 21, 2024 am 05:09 AM
Yes, Node.js is a backend development language. It is used for back-end development, including handling server-side business logic, managing database connections, and providing APIs.
How to connect nodejs to mycat
Apr 21, 2024 am 06:16 AM
Steps to connect MyCAT in Node.js: Install the mycat-ts dependency. Create a connection pool, specify the host, port, username, password and database. Use the query method to execute SQL queries. Use the close method to close the connection pool.
What is the relationship between nodejs and npm?
Apr 21, 2024 am 06:09 AM
Node.js is a JavaScript runtime environment and npm is its package manager. The two work together to enable developers to write server-side programs in JavaScript, use third-party modules, and easily manage modules.
What projects is nodejs suitable for?
Apr 21, 2024 am 05:45 AM
Node.js is suitable for the following project types: Network and server applications Event-driven applications Real-time applications Data-intensive applications Command-line tools and scripts Lightweight microservices
