nodejs がページを非同期的にロードする bigpipe を実装する方法-jsチュートリアル-php.cn

nodejs がページを非同期的にロードする bigpipe を実装する方法

不言

リリース： 2018-06-30 14:17:22

オリジナル

1603 人が閲覧しました

この記事では、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(&#39;express&#39;);
var path = require(&#39;path&#39;);
var http = require(&#39;http&#39;);
var ejs = require(&#39;ejs&#39;);
var app = express();

app.set(&#39;port&#39;, process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, &#39;public&#39;)));
app.engine(&#39;.html&#39;, ejs.__express);
app.set(&#39;view engine&#39;, &#39;html&#39;);
app.get(&#39;/index.html&#39;, function (req, res) {
  res.render(&#39;index&#39;, { 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(&#39;<script>bigpipe.set("&#39; + Pagelets + &#39;",&#39; + JSON.stringify(data) + &#39;);</script>&#39;);
    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(&#39;pagelet1&#39;,function(data){
    $("#test1").html("test1 ready");
  })
  bigpipe.ready(&#39;pagelet2&#39;,function(data){
    $("#test2").html("test2 ready");
  })
</script>
</body>
</html>

ログイン後にコピー

概要

実際、Bigpipe テクノロジーの具体的な実装には、開発中に機能が 20%、最適化が 80% を占めることが多いと感じます。開発より難しい。フルスタックについての理解も必要です。したがって、フロントエンドとバックエンドを分離する中間層としてnodejsを使用するのが、個人的にはより合理的であると考えるソリューションです。フロントエンドとバックエンドがnodejsの中間層の分離を完了すると、Bigpipeテクノロジーの実装はフロントエンドが独立して完了できる最適化になります。最初の画面の読み込み時間を短縮します。そして、Webページ全体の読み込み時間を改善することは、閲覧数の増加に一定の効果をもたらします。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。