Nodejs は bigpipe 非同期読み込みページを実装します solution

ホームページ

ウェブフロントエンド

jsチュートリアル

Nodejs は bigpipe 非同期読み込みページを実装します solution_node.js

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:18 PM

nodejs 非同期ロード

ビッグパイプの紹介

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>
<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テクノロジーの実装はフロントエンドが独立して完了できる最適化になります。最初の画面の読み込み時間を短縮します。そして、Webページ全体の読み込み時間を改善することは、閲覧数の増加に一定の効果をもたらします。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7396

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1217

Related knowledge

Nodejs はバックエンドフレームワークですか? Apr 21, 2024 am 05:09 AM

Node.js は、高いパフォーマンス、スケーラビリティ、クロスプラットフォームサポート、豊富なエコシステム、開発の容易さなどの機能を備えているため、バックエンドフレームワークとして使用できます。

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.cmd という 2 つの npm 関連ファイルがあります。違いは次のとおりです。拡張子が異なります。npm は実行可能ファイルで、npm.cmd はコマンドウィンドウのショートカットです。 Windows ユーザー: npm.cmd はコマンドプロンプトから使用できますが、npm はコマンドラインからのみ実行できます。互換性: npm.cmd は Windows システムに固有ですが、npm はクロスプラットフォームで使用できます。使用上の推奨事項: Windows ユーザーは npm.cmd を使用し、他のオペレーティングシステムは npm を使用します。

Nodejs はバックエンド開発言語ですか? Apr 21, 2024 am 05:09 AM

はい、Node.js はバックエンド開発言語です。これは、サーバー側のビジネスロジックの処理、データベース接続の管理、API の提供などのバックエンド開発に使用されます。

Nodejsのグローバル変数とは何ですか Apr 21, 2024 am 04:54 AM

Node.js には次のグローバル変数が存在します。グローバルオブジェクト: グローバルコアモジュール: プロセス、コンソール、require ランタイム環境変数: __dirname、__filename、__line、__column 定数: unknown、null、NaN、Infinity、-Infinity

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プロジェクトをサーバーにデプロイする方法 Apr 21, 2024 am 04:40 AM

Node.js プロジェクトのサーバーデプロイメント手順: デプロイメント環境を準備します。サーバーアクセスの取得、Node.js のインストール、Git リポジトリのセットアップ。アプリケーションをビルドする: npm run build を使用して、デプロイ可能なコードと依存関係を生成します。コードをサーバーにアップロードします: Git またはファイル転送プロトコル経由。依存関係をインストールする: サーバーに SSH で接続し、npm install を使用してアプリケーションの依存関係をインストールします。アプリケーションを開始します。node Index.js などのコマンドを使用してアプリケーションを開始するか、pm2 などのプロセスマネージャーを使用します。リバースプロキシの構成 (オプション): Nginx や Apache などのリバースプロキシを使用して、トラフィックをアプリケーションにルーティングします。