nodejs实现bigpipe异步加载页面的方法
本文给大家分享的是使用nodejs结合bigpipe实现异步加载页面的方案，非常的实用，也是以后前端性能优化的一个方向，希望大家能够喜欢。
Bigpipe介绍
Facebook首创的一种减少HTTP请求的，首屏快速加载的的异步加载页面方案。是前端性能优化的一个方向。
BigPipe与AJAX的比较
AJAX主要是XMLHttpRequest，前端异步的向服务器请求，获取动态数据添加到网页上。这样的往返请求需要耗费时间，而BigPipe技术并不需要发送XMLHttpRequest请求，这样就节省时间损耗。减少请求带来的另一个好处就是直接减少服务器负载。还有一个不同点就是AJAX请求前服务器在等待。请求后页面在等待。BIGPIPE可以前后端并行工作也带来了效率上的提升。
Bigpipe缺点
SEO问题。Facebook的动态展现内容主要是面向客户的个性页面。对于SEO的要求并不高。而如果把BIGPIPE技术用到淘宝上的话SEO的问题就会明显了，现在不确定百度对于这种动态页面的搜索支持度如何，其实在使用ANGULARJS动态绑定数据的时候也会有这方面的问题所以对于SEO有需求的页面需要慎重考虑是否使用BIGPIPE技术。（已知GOOGLE搜索对于ANGULAR的SEO有优化。）至于百度么-。-看下图就知道了
NODEJS实现
bigpipe.js页面引入的js
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服务器代码
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前端代码
<!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>总结
Bigpipe技术其实具体实现需要服务器的代码配合，在开发中我感觉功能占20%，优化占80%的工作量，优化的难度很多时候比开发还高。还需可能对全栈的了解。所以现在nodejs作为前后端分离的中间层是一个我个人认为比较合理的一个解决方案。如果前后端完成nodejs的中间层分离，Bigpipe技术的实现将会是前端可以独立完成的一个优化。提高首屏加载时间。并且提高整个网页的加载时间，对于浏览量的提升会带来一定效果的。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于node.js基于fs模块对系统文件及目录进行读写操作的方法
关于Node.js连接postgreSQL并进行数据操作的介绍
Atas ialah kandungan terperinci nodejs实现bigpipe异步加载页面的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Adakah nodejs rangka kerja bahagian belakang?
Apr 21, 2024 am 05:09 AM
Node.js boleh digunakan sebagai rangka kerja bahagian belakang kerana ia menawarkan ciri seperti prestasi tinggi, kebolehskalaan, sokongan merentas platform, ekosistem yang kaya dan kemudahan pembangunan.
Bagaimana untuk menyambungkan nodejs ke pangkalan data mysql
Apr 21, 2024 am 06:13 AM
Untuk menyambung ke pangkalan data MySQL, anda perlu mengikuti langkah berikut: Pasang pemacu mysql2. Gunakan mysql2.createConnection() untuk mencipta objek sambungan yang mengandungi alamat hos, port, nama pengguna, kata laluan dan nama pangkalan data. Gunakan connection.query() untuk melaksanakan pertanyaan. Akhir sekali gunakan connection.end() untuk menamatkan sambungan.
Apakah perbezaan antara fail npm dan npm.cmd dalam direktori pemasangan nodejs?
Apr 21, 2024 am 05:18 AM
Terdapat dua fail berkaitan npm dalam direktori pemasangan Node.js: npm dan npm.cmd Perbezaannya adalah seperti berikut: sambungan berbeza: npm ialah fail boleh laku dan npm.cmd ialah pintasan tetingkap arahan. Pengguna Windows: npm.cmd boleh digunakan daripada command prompt, npm hanya boleh dijalankan dari baris arahan. Keserasian: npm.cmd adalah khusus untuk sistem Windows, npm tersedia merentas platform. Cadangan penggunaan: Pengguna Windows menggunakan npm.cmd, sistem pengendalian lain menggunakan npm.
Adakah terdapat perbezaan besar antara nodejs dan java?
Apr 21, 2024 am 06:12 AM
Perbezaan utama antara Node.js dan Java ialah reka bentuk dan ciri: Didorong peristiwa vs. didorong benang: Node.js dipacu peristiwa dan Java dipacu benang. Satu-benang vs. berbilang benang: Node.js menggunakan gelung acara satu-benang dan Java menggunakan seni bina berbilang benang. Persekitaran masa jalan: Node.js berjalan pada enjin JavaScript V8, manakala Java berjalan pada JVM. Sintaks: Node.js menggunakan sintaks JavaScript, manakala Java menggunakan sintaks Java. Tujuan: Node.js sesuai untuk tugas intensif I/O, manakala Java sesuai untuk aplikasi perusahaan besar.
Adakah nodejs bahasa pembangunan bahagian belakang?
Apr 21, 2024 am 05:09 AM
Ya, Node.js ialah bahasa pembangunan bahagian belakang. Ia digunakan untuk pembangunan bahagian belakang, termasuk mengendalikan logik perniagaan sebelah pelayan, mengurus sambungan pangkalan data dan menyediakan API.
Bagaimana untuk menyambungkan nodejs ke mycat
Apr 21, 2024 am 06:16 AM
Langkah-langkah untuk menyambungkan MyCAT dalam Node.js: Pasang kebergantungan mycat-ts. Buat kolam sambungan, nyatakan hos, port, nama pengguna, kata laluan dan pangkalan data. Gunakan kaedah pertanyaan untuk melaksanakan pertanyaan SQL. Gunakan kaedah tutup untuk menutup kolam sambungan.
Apakah hubungan antara nodejs dan npm?
Apr 21, 2024 am 06:09 AM
Node.js ialah persekitaran masa jalan JavaScript dan npm ialah pengurus pakejnya. Kedua-duanya bekerjasama untuk membolehkan pembangun menulis program sebelah pelayan dalam JavaScript, menggunakan modul pihak ketiga dan mengurus modul dengan mudah.
Projek apa yang sesuai untuk nodejs?
Apr 21, 2024 am 05:45 AM
Node.js sesuai untuk jenis projek berikut: Aplikasi rangkaian dan pelayan Aplikasi dipacu acara Aplikasi masa nyata Aplikasi intensif data Alat dan skrip baris perintah Perkhidmatan mikro ringan
