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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

不言

Jun 30, 2018 pm 02:17 PM

nodejs非同期ロード

この記事では、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 サイトをご覧ください。

postgreSQL に接続してデータ操作を実行する Node.js の概要

nodejs Ztree が実装する2 つの div 間を移動

以上がnodejs がページを非同期的にロードする bigpipe を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles