nodejs實作bigpipe非同步載入頁面方案_node.js
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>
<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>
總結
Bigpipe技術其實具體實現需要伺服器的程式碼配合，在開發中我覺得功能佔20%，優化佔80%的工作量，優化的難度很多時候比開發還高。還需可能對全端的了解。所以現在nodejs作為前後端分離的中間層是一個我個人認為比較合理的一個解。如果前後端完成nodejs的中間層分離，Bigpipe技術的實作將會是前端可以獨立完成的一個最佳化。提高首屏載入時間。並且提高整個網頁的載入時間，對於瀏覽量的提升會帶來一定效果的。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
nodejs怎麼連接mysql資料庫
Apr 21, 2024 am 06:13 AM
要連接 MySQL 資料庫，需要遵循以下步驟：安裝 mysql2 驅動程式。使用 mysql2.createConnection() 建立連接對象，其中包含主機位址、連接埠、使用者名稱、密碼和資料庫名稱。使用 connection.query() 執行查詢。最後使用 connection.end() 結束連線。
nodejs安裝目錄裡的npm與npm.cmd檔有什麼差別
Apr 21, 2024 am 05:18 AM
Node.js 安裝目錄中有兩個與 npm 相關的文件：npm 和 npm.cmd，區別如下：擴展名不同：npm 是可執行文件，npm.cmd 是命令視窗快捷方式。 Windows 使用者：npm.cmd 可以在命令提示字元中使用，npm 只能從命令列執行。相容性：npm.cmd 特定於 Windows 系統，npm 跨平台可用。使用建議：Windows 使用者使用 npm.cmd，其他作業系統使用 npm。
nodejs和java的差別大嗎
Apr 21, 2024 am 06:12 AM
Node.js 和 Java 的主要差異在於設計和特性：事件驅動與執行緒驅動：Node.js 基於事件驅動，Java 基於執行緒驅動。單執行緒與多執行緒：Node.js 使用單執行緒事件循環，Java 使用多執行緒架構。執行時間環境：Node.js 在 V8 JavaScript 引擎上運行，而 Java 在 JVM 上運行。語法：Node.js 使用 JavaScript 語法，而 Java 使用 Java 語法。用途：Node.js 適用於 I/O 密集型任務，而 Java 適用於大型企業應用程式。
nodejs怎麼連接mycat
Apr 21, 2024 am 06:16 AM
在 Node.js 中連接 MyCAT 的步驟：安裝 mycat-ts 依賴。建立連線池，指定主機、連接埠、使用者名稱、密碼和資料庫。使用 query 方法執行 SQL 查詢。使用 close 方法關閉連線池。
nodejs和npm什麼關係
Apr 21, 2024 am 06:09 AM
Node.js是JavaScript執行環境，npm是其套件管理器。兩者協同工作，使開發者能利用JavaScript編寫伺服器端程序，使用第三方模組，以及輕鬆管理模組。
nodejs適合什麼項目
Apr 21, 2024 am 05:45 AM
Node.js 適用於以下專案類型：網頁和伺服器應用程式事件驅動應用程式即時應用程式資料密集型應用程式命令列工具和腳本輕量級微服務
