ホームページ > 記事 > ウェブフロントエンド > nodejs がページを非同期的にロードする bigpipe を実装する方法
この記事では、nodejs と bigpipe を組み合わせてページの非同期読み込みを実装するソリューションを紹介します。これは非常に実用的であり、将来のフロントエンドのパフォーマンス最適化の方向性にもなります。
Bigpipe のご紹介
Facebook 初の非同期ページ読み込みソリューションで、HTTP リクエストを減らし、最初の画面を素早く読み込みます。これはフロントエンドのパフォーマンス最適化の方向性です。
BigPipe と AJAX の比較
AJAX は主に XMLHttpRequest で、フロントエンドはサーバーに非同期で動的データを取得し、それを Web ページに追加します。このような往復リクエストには時間がかかりますが、BigPipe テクノロジーでは XMLHttpRequest リクエストを送信する必要がないため、時間を節約できます。リクエストを減らすことのもう 1 つの利点は、サーバーの負荷が直接軽減されることです。もう 1 つの違いは、サーバーが AJAX リクエストの前に待機することです。ページはリクエスト後待機中です。 BIGPIPE はフロントエンドとバックエンドで並行して動作できるため、効率も向上します。
Bigpipeの欠点
SEOの問題。 Facebook の動的表示コンテンツは主に顧客指向のパーソナライズされたページです。 SEOの要件はそれほど高くありません。そして、BIGPIPE テクノロジーが Taobao で使用される場合、Baidu がこの種の動的ページの検索をどの程度サポートしているかはわかりません。したがって、実際には、ANGULARJS を使用してデータを動的にバインドする場合にもこの問題が発生します。 、SEO ニーズのあるページでは、BIGPIPE テクノロジーを使用するかどうかを慎重に検討する必要があります。 (GOOGLE検索はANGULARのSEOに最適化されていることが知られています。) Baiduについては――。 - 下の図を見てください
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テクノロジーの実装はフロントエンドが独立して完了できる最適化になります。最初の画面の読み込み時間を短縮します。そして、Webページ全体の読み込み時間を改善することは、閲覧数の増加に一定の効果をもたらします。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
node.js が fs モジュールに基づいてシステム ファイルとディレクトリを読み書きする方法について
postgreSQL に接続してデータ操作を実行する Node.js の概要
nodejs Ztree が実装する2 つの div 間を移動
以上がnodejs がページを非同期的にロードする bigpipe を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。