Nodejs melaksanakan bigpipe memuatkan halaman tak segerak solution

Nodejs melaksanakan bigpipe memuatkan halaman tak segerak solution_node.js

WBOY

Lepaskan： 2016-05-16 15:18:11

asal

1194 orang telah melayarinya

Pengenalan kepada Bigpipe

Penyelesaian halaman pemuatan tak segerak pertama Facebook yang mengurangkan permintaan HTTP dan memuatkan skrin pertama dengan cepat. Ia adalah hala tuju untuk pengoptimuman prestasi bahagian hadapan.

Perbandingan BigPipe dan AJAX

AJAX terutamanya XMLHttpRequest Bahagian hadapan meminta pelayan untuk mendapatkan data dinamik dan menambahkannya ke halaman web. Permintaan pergi balik sedemikian mengambil masa, dan teknologi BigPipe tidak perlu menghantar permintaan XMLHttpRequest, sekali gus menjimatkan masa. Manfaat lain untuk mengurangkan permintaan ialah pengurangan langsung dalam beban pelayan. Perbezaan lain ialah pelayan menunggu sebelum permintaan AJAX. Halaman menunggu selepas permintaan. BIGPIPE boleh berfungsi secara selari pada hujung hadapan dan belakang, yang turut membawa peningkatan kecekapan.

Kelemahan Bigpipe

Isu SEO. Kandungan paparan dinamik Facebook terutamanya adalah halaman peribadi berorientasikan pelanggan. Keperluan untuk SEO tidak tinggi. Dan jika teknologi BIGPIPE digunakan pada Taobao, masalah SEO akan menjadi jelas saya tidak pasti sejauh mana Baidu menyokong carian untuk halaman dinamik ini, sebenarnya, masalah ini juga akan berlaku apabila menggunakan ANGULARJS secara dinamik , halaman dengan SEO perlu mempertimbangkan dengan teliti sama ada untuk menggunakan teknologi BIGPIPE. (Adalah diketahui bahawa carian GOOGLE dioptimumkan untuk SEO ANGULAR.) Bagi Baidu -. -Lihat gambar di bawah untuk mengetahui

Pelaksanaan NODEJS

js diimport dari halaman bigpipe.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);
  }
}

Salin selepas log masuk

kod pelayan 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);

Salin selepas log masuk

kod bahagian hadapan 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>

Salin selepas log masuk

Ringkasan

Malah, pelaksanaan khusus teknologi Bigpipe memerlukan kerjasama kod pelayan Semasa pembangunan, saya merasakan bahawa fungsi menyumbang 20% dan pengoptimuman menyumbang 80% daripada beban kerja selalunya lebih sukar daripada pembangunan. Pemahaman yang mungkin tentang timbunan penuh juga diperlukan. Jadi sekarang nodejs sebagai lapisan tengah yang memisahkan hujung depan dan belakang adalah penyelesaian yang saya fikir secara peribadi lebih munasabah. Jika bahagian hadapan dan bahagian belakang melengkapkan pemisahan lapisan tengah nodej, pelaksanaan teknologi Bigpipe akan menjadi pengoptimuman yang boleh disiapkan oleh bahagian hadapan secara bebas. Tingkatkan masa pemuatan skrin pertama. Dan menambah baik masa pemuatan keseluruhan halaman web akan memberi kesan tertentu pada peningkatan bilangan paparan.