今天刚好看到bigpipe的文章，写个demo试一下：

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(第一次发送的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-id='dom"+i+"' type='text/template'> XXX </script>

所以bigpipe-test.js里仅需判断页面上的script标签有无改变即可，如有改变，则获取内容并且将内容放置该放置的地方。

Test : http://node-tester-171479.nitrousapp.com:9030/bigpipe   页面和样式很快就加载出来了。

为了展示效果，所以上面的demo中特意做了延时，不过在平时项目中如果内容特别多，刚开始就一股脑把所有内容放在一个页面加载，用户打开网页的时候则可能会盯着白屏看一会才会load出来。bigpipe的好处就在于此，可以将大概模子先加载出来，然后更多的内容再慢慢一点load出来，而且又不需要另开http请求，一个请求就可以完成分段加载。

该方法对于移动端的单页多屏应用的用户体验提升益处很大，用户打开页面的时候可以先将首屏加载出来，然后再load其他屏。

　　新技能 get√

nodejs简易实现一下bigpipe的更多相关文章

  1. nodejs入门篇之linux版的nodejs简易环境安装部署

    第一步:下载二进制安装包 根据linux的不同版本选择32位或64位,因为我的linux的虚拟机是64位的,所以我选择的是64位二进制安装文件(Linux Binariesx64),可以右键选择在新窗 ...

  2. nodejs简易代理服务器

    直接代码: var http = require('http') var proxy = http.createServer(function (request, response) { var op ...

  3. 简易漫画网站搭建-漫画喵Server版

    小喵的唠叨话:寒假的时候写了一个漫画爬虫,爬取了好几个漫画,不过一直没有找到合适的漫画阅读的工具.因此最近就试着自己写一个漫画的网站,放在公网上或者局域网里,这样就能随时随地用手机.Pad看漫画了. ...

  4. Nodejs进阶：express+session实现简易身份认证

    本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 文档概览 本文基于express.express-session ...

  5. 从无到有，用Nodejs+express+mongodb搭建简易登陆系统

    前端处理server表示很蛋疼,初学Node,虽然感觉异常强大,但是学起来还是有些吃力的,Node是工具,它不是万能的,搭建一个系统还是需要借助其他一些工具,对于我这个没怎么接触server的前端来说 ...

  6. Nodejs+MongoDB+Bootstrap+esj搭建的个人简易博客

    github:https://github.com/yehuimmd/myNodeBloy Nodejs+MongoDB+jQuery+Bootstrap-esj搭建的个人简易博客 主要功能 前台 : ...

  7. nodeJS实现简易爬虫

    nodeJS实现简易爬虫 需求:使用nodeJS爬取昵图网某个分类下的图片并存入本地 运用nodeJS自带系统模块http.fs 示例代码: var http =require('http'); va ...

  8. nodejs学习之实现简易路由

    此前实现了个数据转发功能,但是要建本地服务器,还需要一个简易的路由功能.因为只是用于本地服务器用于自己测试用,所以不需要太完善的路由功能,所以也就不去使用express框架,而是自己实现一个简易路由, ...

  9. NodeJS用递归实现异步操作的链式调用，完成一个简易的命令行输入输出REPL交互接口

    REPL —— Read-Eval-Print-Loop. 00.一门好的编程语言的必要条件 REPL并不是什么高大上的东西,简单的说就是一个从命令行程序,读取终端输入,处理,打印结果,如此循环.这是 ...

随机推荐

  1. Spring学习笔记之 Spring IOC容器（一）之 实例化容器，创建JavaBean对象，控制Bean实例化，setter方式注入，依赖属性的注入，自动装配功能实现自动属性注入

    本节主要内容:       1.实例化Spring容器示例    2.利用Spring容器创建JavaBean对象    3.如何控制Bean实例化    4.利用Spring实现bean属性sett ...

  2. STM32启动文件选择说明

    图1. STM32F10xxx标准外设库体系结构先说这个问题,大家都知道,我们在选择使用哪些外围的的时候,是去更改从官方模版中拷贝过来的stm32f10x_conf.h文件的27-48行,把我们要用的 ...

  3. hyper-v无线网络上外网

    这个通过无线网络上外网也是找了很多文章,大部分写的都不详细,没有办法成功,原理就是创建一个虚拟网卡,然后把创建的虚拟网卡和无线网卡桥接,虚拟机中使用创建的虚拟网卡,这里创建的虚拟网卡指的是用hyper ...

  4. nyoj 237 游戏高手的烦恼 二分匹配--最小点覆盖

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=237 二分匹配--最小点覆盖模板题 Tips:用邻接矩阵超时,用数组模拟邻接表WA,暂时只 ...

  5. hdu String Problem(最小表示法入门题)

    hdu 3374 String Problem 最小表示法 view code#include <iostream> #include <cstdio> #include &l ...

  6. LinuxI2C核心、总线驱动与设备驱动

    I2C体系结构分为三个部分:I2C核心.总线驱动.设备驱动 I2C核心: I2C核心提供了一组不依赖硬件的接口函数,I2C总线驱动和设备驱动之间依赖于I2C核心作为纽带 (1)增加/删除i2c_ada ...

  7. 关于字符编码：为什么在ASCII字符集中小写字母比大写字母大32

    今天看字符编码,在ASCII一节,字母'A'用ASCII编码是十进制的65,自然想到了'a'应该和'A'差个26吧,却发现'a'是十进制的97,差了32.突然很想知道为什么. 查了ASCII码表,发现 ...

  8. web工程 所需是jar包总结

    commons-beanutils-1.8.3.jar : BeanUtils主要提供了对于JavaBean进行各种操作,需要Commons -Collections包和Commons -loggin ...

  9. [ZZ]Sign Up for the First-Ever Appium Roadshow on August 20th in New York City

    http://sauceio.com/index.php/2014/07/appium-roadshow-nyc/?utm_source=feedly&utm_reader=feedly&am ...

  10. Codeforces Round 261 Div.2 E Pashmak and Graph --DAG上的DP

    题意:n个点,m条边,每条边有一个权值,找一条边数最多的边权严格递增的路径,输出路径长度. 解法:先将边权从小到大排序,然后从大到小遍历,dp[u]表示从u出发能够构成的严格递增路径的最大长度. dp ...