[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","evagy","page",1,"limit",50,"total","id","38413","avatar_url","https://avatars2.githubusercontent.com/u/17293236?v=4","githubUsername","create_at","2019-10-14 08:33:46.415","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":33,"_47":33,"_31":48,"_49":50,"_25":51,"_52":53},"22820","author_id","13952","tab","share","content","# nodejs-bigpipe-demo\r\n\r\n`分块加载技术`\r\n\r\n## 什么是bigpipe\r\n\r\n+ 存在很久的一种技术\r\n+ Facebook首创\r\n+ 首屏快速加载的的异步加载页面方案\r\n+ 前端性能优化的一个方向\r\n+ 适合比较大型的，需要大量服务器运算的站点\r\n+ 有效减少HTTP请求\r\n+ 兼容多浏览器\r\n\r\n与传统Ajax比较\r\n\r\n- 减少HTTP请求数：多个模块更新合成一个请求\r\n- 请求数减少：多个chunk合成一个请求\r\n- 减少开发成本：前端无需多写JavaScript代码\r\n- 降低管理成本：模块更新由后端程序控制\r\n- URL优雅降级：页面链接使用真实地址\r\n- 代码一致性：页面加载不劢态刷新模块代码相同\r\n\r\n\r\n## 能解决的问题\r\n\r\n+ 下载阻塞\r\n+ 服务器与浏览器算力浪费\r\n\r\n一句话：`分块加载技术`\r\n\r\n## 缺点\r\n\r\n不利于SEO搜索引擎(这个说的不太对，可以采用其他手动弥补的)\r\n\r\n## 实现方式\r\n\r\n> 一个重新设计的基础动态网页服务体系。\r\n\r\n> 大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。\r\n\r\n> 不需要改变现有的网络浏览器或服务器，它完全使用PHP和JavaScript来实现。(此处是错误的，任何语言都可以实现)\r\n\r\n## 关键技术点\r\n\r\nHTTP 1.1引入分块传输编码\r\n\r\n> ### 注：HTTP分块传输编码允许服务器为动态生成的内容维持HTTP持久链接。\r\n\r\nHTTP分块传输编码格式\r\n> Transfer-Encoding: chunked\r\n如果一个HTTP消息（请求消息或应答消息）的Transfer-Encoding消息头的值为chunked，那么，消息体由数量未定的块组成，并以最后一个大小为0的块为结束。\r\n\r\nNodejs自动开启 chunked encoding\r\n>除非通过sendHeader()设置Content-Length头。\r\n\r\n## Node.js bigpipe实现\r\n\r\n### 使用内置的http模块\r\n\r\n```js\r\n'use strict'\r\n\r\nvar http = require('http')\r\n\r\nconst sleep = ms => new Promise(r => setTimeout(r, ms))\r\n\r\nvar app = http.createServer((req, res) => {\r\n res.writeHead(200, { 'Content-Type': 'text/html', 'charset': 'utf-8' })\r\n \r\n res.write('loading...
')\r\n \r\n return sleep(2000).then(function() {\r\n res.write(`timer: 2000ms
`)\r\n return sleep(5000)\r\n })\r\n .then(function() {\r\n res.write(`timer: 5000ms
`)\r\n }).then(function() {\r\n res.end()\r\n })\r\n})\r\n\r\napp.listen(3000)\r\n\r\n``` \r\n\r\n\r\n#### 关键字\r\n\r\n res.write('xxxx');\r\n res.write('xxxx');\r\n res.write('xxxx');\r\n res.end('xxxx');\r\n\r\n### Express写法\r\n\r\n```js\r\n'use strict'\r\n\r\nconst sleep = ms => new Promise(r => setTimeout(r, ms))\r\n\r\nvar express = require('express')\r\nvar app = express()\r\n\r\napp.get('/', function (req, res) {\r\n res.type('html'); \r\n res.write('loading...
')\r\n \r\n return sleep(2000).then(function() {\r\n res.write(`timer: 2000ms
`)\r\n return sleep(5000)\r\n })\r\n .then(function() {\r\n res.write(`timer: 5000ms
`)\r\n }).then(function() {\r\n res.end()\r\n })\r\n})\r\n\r\napp.listen(3000)\r\n```\r\n\r\n#### 关键字\r\n\r\n> 为什么不用res.send?\r\n\r\n因为res.send包括了res.write()和res.end()\r\n\r\n### Koa写法\r\n\r\nKoa里没有提供对bigpipe的支持，ctx.body赋值做了很多约定。可以说是不太容易控制。\r\n\r\n- http模块是基于stream的，所以方案1是通过require('stream').Readable来处理，这种是非常容易理解，但要求大家对stream有一个比较好的理解。\r\n- 方案2，反正Koa和express都是基于http模块的，那么为什么不用http模块的方法呢？\r\n\r\n在Koa里有2个概念非常容易混，req和request，res和response，我们经常在express里用req和res，但在Koa里它们指的是http启动server时传入的req和res参数\r\n\r\n```\r\nvar http = require(\"http\");\r\n\r\nhttp.createServer((req, res) => {\r\n res.writeHead(200, {\r\n \"Content-Type\": \"text/plain\"\r\n });\r\n res.write(\"Hello World\");\r\n res.end();\r\n}).listen(8888);\r\n```\r\n\r\n那么是不是可以不用Koa的东西，改用http的接口呢？res.write和express里的res.write是一样的。\r\n\r\n#### Koa 1.x\r\n\r\n```js\r\nvar koa = require('koa')\r\nvar app = koa()\r\nvar co = require('co')\r\nconst Readable = require('stream').Readable\r\n\r\nconst sleep = ms => new Promise(r => setTimeout(r, ms))\r\n\r\napp.use(function* () {\r\n const view = new Readable()\r\n view._read = () => { }\r\n\r\n this.body = view\r\n this.type = 'html'\r\n this.status = 200\r\n\r\n view.push('loading...
')\r\n\r\n co(function* () {\r\n yield sleep(2000)\r\n view.push(`timer: 2000ms
`)\r\n yield sleep(5000)\r\n view.push(`timer: 5000ms
`)\r\n\r\n /** 结束传送 */\r\n view.push(null)\r\n }).catch(e => { })\r\n})\r\n\r\napp.listen(9092)\r\n```\r\n\r\n#### Koa 2.x\r\n\r\n```js\r\nconst Koa = require('koa')\r\nconst app = new Koa()\r\n\r\nconst sleep = ms => new Promise(r => setTimeout(r, ms))\r\n\r\napp.use(require('koa-bigpipe'))\r\n\r\n// response\r\napp.use(ctx => {\r\n // ctx.body = 'Hello Koa'\r\n ctx.write('loading...
')\r\n \r\n return sleep(2000).then(function(){\r\n ctx.write(`timer: 2000ms
`)\r\n return sleep(5000)\r\n }).then(function(){\r\n ctx.write(`timer: 5000ms
`)\r\n }).then(function(){\r\n ctx.end()\r\n })\r\n})\r\n\r\napp.listen(3000)\r\n```\r\n\r\n### 问题\r\n\r\n> 为什么是按照顺序加载的,怎么能并发加载呢?\r\n\r\n+ 这就需要用到promise了 `自行领悟`\r\n\r\n[@上面三种情况的项目地址](https://github.com/lduoduo/bigpipe_demo)\r\n```js\r\n 注意!\r\n 分块加载的样式和脚本的加载顺序问题：\r\n 1. 第一次同步给浏览器的内容里如果包含样式和脚本，浏览器会立即请求\r\n 2. 后续的块状内容异步给浏览器后，对应的模块渲染完成，会立即请求模块里的样式文件\r\n 3. 上面第二种情况对js不起作用，浏览器只会渲染，不会做请求!!why??\r\n```\r\n[@上面特殊情况的论证项目地址](https://github.com/lduoduo/mykoa/tree/bigpipe)\r\n\r\n\r\n## 更多\r\n\r\n- 模块解耦\r\n- 前端优化，参考微博的方式\r\n- 性能改进\r\n - req.js，有http改成rpc\r\n - 缓存模板\r\n - 缓存编译结果\r\n- BigPipe的三种模式：\r\n - 一次渲染模式：即普通模式，支持搜索引擎，用来支持那些不支持JS的客户端。\r\n - 管线模式：即并行模式，并行请求，并即时渲染。(已实现)\r\n - 并行模式：并行请求，但在获得所有请求的结果后再渲染。\r\n\r\n请看下一篇《深入浅出bigview》\r\n\r\n## 参考 \r\n\r\n> http://velocity.oreilly.com.cn/2011/ppts/WK_velocity.pdf\r\n\r\n> [BigPipe：高性能的“流水线技术”网页](https://isux.tencent.com/bigpipe-pipelining-web-pages-for-high-performance.html)\r\n\r\n> [nodejs实现bigpipe](https://yuguo.us/weblog/bigpipe-in-nodejs/)\r\n\r\n> [nodejs 创建http server](http://blog.csdn.net/swingboard/article/details/43229895)\r\n\r\n> [koa 和 bigpipe](http://tech.dianwoda.com/2016/10/26/big-pipe-web-page-rendering-acceleration/)","title","科普Node.js Bigpipe","last_reply_at","2019-10-15 01:42:15.104","good","top",12,"visit_count",13534,"2017-01-20 17:38:40.371","author",{"_13":54,"_22":55},"i5ting","https://avatars.githubusercontent.com/u/3118295?v=4"]