nodejsが簡単にbigpipeを実現します.

10213 ワード

nodejs

今日はちょうどbigpipeの文章を見ました.デモを書いてみます.
nodejsの実現:

var fs = require('fs');
module.exports = function(req , res){
    //bigpipe  
    res.writeHead(200 , {'Content-Type': 'text/html;charset=utf-8'});

    var html = fs.readFileSync(__dirname + "/head.html").toString();

    var i = 0;
    res.write(html);

    setTimeout(function(){
        //   js  
        res.write(fs.readFileSync(__dirname + "/script.html").toString());

        //        page   
        flush();
    },200);

    function flush(){
        if(i >= 4){
            res.end("</body></html>");
            return;
        }

        setTimeout(function(){
            res.write("<script class='element' data-id='dom"+i+"' type='text/template'>" + fs.readFileSync(__dirname + "/manyValue.html").toString()+"</script>");
            i++;
            flush();
        },1000)
    }
}

上のコードの中で、最初にhead. htmlを出力します.(最初に送った)ヘッダは、できるだけ早くロードし終わるため、中には様式表が一つしかありません.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/public/bigpipe/bigpipe-test.css"/>
</head>
<body>
<div class="view">
    <div class="page" id="dom0"><div class="value">Loading...</div></div>
    <div class="page" id="dom1"><div class="value">Loading...</div></div>
    <div class="page" id="dom2"><div class="value">Loading...</div></div>
    <div class="page" id="dom3"><div class="value">Loading...</div></div>
</div>

head.htmlの内容が少ないので、すぐにユーザーの前に展示できます.ロードが速いような感じがします.jsロジックを再出力します.

<script src="/public/jquery-2.1.1.min.js"></script>
<script src="/public/bigpipe/bigpipe-test.js"></script>

bigpipe-test.jsの各pageに対するデータ処理は以下の通りである.

var now = 0;
var loop = setInterval(function(){
    var $els = $(".element");
    $els.each(function(){
        if($(this).html()){
            var $eim = $("#" + $(this).attr("data-id"));
            $eim.find(".value").html($(this).html());
            document.body.removeChild(this);
            now++;
        }
    })

    if(now == $(".page").length){
        clearInterval(loop);
    }
},200);

後から伝わってくる本当のデータフォーマットは＜script class='element'data-i='dom'＋i+''type='text/template'>XXXです.
したがって、bigpipe-test.jsでは、ページ上のスクリプトタグが変更されているかどうかを判断するだけで、変更があれば、コンテンツを取得し、その場所にコンテンツを置くことができます.
Test: http://wanghx.cn:9030/bigpipe ページとスタイルはすぐに読み込まれます.
効果を示すために、上記のデモは特に遅延されましたが、通常のプロジェクトの中で特に多くの内容がある場合、最初からすべての内容を一つのページに入れてロードします.ユーザーがページを開けたら、白スクリーンを見てからロードするかもしれません.bigpipeのメリットはここにあります.大体のモデルを先にロードして、それからもっと多い内容をゆっくりロードしてください.またhttpを別に要求しなくてもいいです.一つの要求は段階的にロードできます.
この方法は、モバイル端末の1ページのマルチスクリーンアプリケーションのユーザー体験を向上させる効果が大きいので、ユーザーがページを開く時は、まず最初のスクリーンをロードして、他のスクリーンをロードすることができます.
新スキルget√

npm cnpm webpackをインストールします.