nodejs實現(xiàn)bigpipe異步加載頁面方案
Bigpipe介紹
Facebook首創(chuàng)的一種減少HTTP請求的，首屏快速加載的的異步加載頁面方案。是前端性能優(yōu)化的一個方向。
BigPipe與AJAX的比較
AJAX主要是XMLHttpRequest，前端異步的向服務器請求，獲取動態(tài)數(shù)據(jù)添加到網(wǎng)頁上。這樣的往返請求需要耗費時間，而BigPipe技術并不需要發(fā)送XMLHttpRequest請求，這樣就節(jié)省時間損耗。減少請求帶來的另一個好處就是直接減少服務器負載。還有一個不同點就是AJAX請求前服務器在等待。請求后頁面在等待。BIGPIPE可以前后端并行工作也帶來了效率上的提升。
Bigpipe缺點
SEO問題。Facebook的動態(tài)展現(xiàn)內(nèi)容主要是面向客戶的個性頁面。對于SEO的要求并不高。而如果把BIGPIPE技術用到淘寶上的話SEO的問題就會明顯了，現(xiàn)在不確定百度對于這種動態(tài)頁面的搜索支持度如何，其實在使用ANGULARJS動態(tài)綁定數(shù)據(jù)的時候也會有這方面的問題所以對于SEO有需求的頁面需要慎重考慮是否使用BIGPIPE技術。（已知GOOGLE搜索對于ANGULAR的SEO有優(yōu)化。）至于百度么-。-看下圖就知道了
NODEJS實現(xiàn)
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 rel="stylesheet">
</head>
<body>
<div id="test1">loading......</div>
<div id="test2">loading......</div>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://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技術其實具體實現(xiàn)需要服務器的代碼配合，在開發(fā)中我感覺功能占20%，優(yōu)化占80%的工作量，優(yōu)化的難度很多時候比開發(fā)還高。還需可能對全棧的了解。所以現(xiàn)在nodejs作為前后端分離的中間層是一個我個人認為比較合理的一個解決方案。如果前后端完成nodejs的中間層分離，Bigpipe技術的實現(xiàn)將會是前端可以獨立完成的一個優(yōu)化。提高首屏加載時間。并且提高整個網(wǎng)頁的加載時間，對于瀏覽量的提升會帶來一定效果的。
相關文章
這篇文章主要介紹了node app 打包工具pkg的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了輕松創(chuàng)建nodejs服務器（6）：作出響應,我們接著改造服務器,讓請求處理程序能夠返回一些有意義的信息,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了如何使用nexus3搭建npm私有倉庫,包括安裝并運行私服的相關知識,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
Node.js中Express生成Token的實現(xiàn)方法
本文介紹了在Express中生成和使用Token進行用戶認證的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-12-12
這篇文章主要為大家展現(xiàn)了express結合nodejs開啟服務的代碼示例模版，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
本文給大家分享的是一款nodejs高擴展性的模板引擎functmpl的簡單介紹以及用法詳解，有需要的小伙伴可以參考下2017-02-02
下面小編就為大家?guī)硪黄狽ode.js讀寫文件之批量替換圖片的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
本篇文章主要介紹了nodejs集成sqlite使用示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
使用 NodeJS+Express 開發(fā)服務端的簡單介紹
這篇文章主要介紹了使用 NodeJS+Express 開發(fā)服務端的簡單介紹，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
使用?Node-RED對?MQTT?數(shù)據(jù)流處理
本文將介紹使用 Node-RED 連接到 MQTT 服務器，并對 MQTT 數(shù)據(jù)進行過濾和處理后再將其發(fā)送至 MQTT 服務器的完整操作流程。讀者可以快速了解如何使用 Node-RED 對 MQTT 數(shù)據(jù)進行簡單的流處理2022-05-05