【AlloyTeam优化系列】Node直出让你的网页秒开

function ( req , res , next ) {

var hander = function ( error , response , body ) {

var data = JSON . parse ( body ) ;

res . body = body ;

next ( ) ;

} ;

ajax . request ( opt , hander ) ;

}

function * ( req , res ) {

var opt = {

url : 'xxxxxxxxx' ,

method : 'POST' ,

form : {

bkn : getBkn ( skey ) ,

gc : gc ,

} ,

headers : {

'host' : 'web.qun.qq.com' ,

'Referer' : 'web.qun.qq.com'

}

} ;

function requestSync ( opt ) {

return function ( callback ) {

ajax . request ( opt , function ( error , response , body ) {

callback ( error , response ) ;

} ) ;

}

}

var content = yield requestSync ( opt ) ;

}

<script>

{ { 'xw-data' } }

</script>

< html >

< head >

< ! -- 全局 onPageletArrive function -- >

<script>

window . onPageletArrive = function ( obj ) {

// load css

// load js

// load html

} ;

</script>

< / head >

< body >

< ! -- Pagelet 占位 -- >

< div id = "pagelet1" > < / div >

< div id = "pagelet2" > < / div >

… .

< div id = "pageletN" > < / div >

< ! -- 后台返回的 js 代码，用于直接吐出执行全局 onPageletArrive -- >

<script>

onPageletArrive ( {

"id" : "pagelet1" ,

"css" : [ ] ,

"js" : [ ] "content" : < html >

"onload" : [ JavaScript init code ]

} ) ;

</script>

…

<script>

// onPageletArrive for pageletN

</script>

< / body >

< / html >

< section >

< ! -- 活跃群成员 -- >

< div id = "active" > < / div >

< ! -- 男女比例 -- >

< div id = "gender" > < / div >

< ! -- 成员省份 -- >

< div id = "area" > < / div >

< ! -- age -- >

< div id = "age" > < /div>

</s ection >

function componentRender ( target , tplString ) {

// targetObj.innerHTML = tplString

}

而后台的代码，则在拼好模板字符串之后，分步吐出内容，代码大体如下：

this . push ( " <script> componentRender ( / " # active / , " + tplString ) </script> " ) ;

this . push ( " <script> componentRender ( / " # gender / , " + tplString ) </script> " ) ;

this . push ( " <script> componentRender ( / " # area / , " + tplString ) </script> " ) ;

this . push ( " <script> componentRender ( / " # age / , " + tplString ) </script> " ) ;

// BigPipe需要的模块，用于flush内容到页面

var Readable = require ( 'stream' ) . Readable ;

// 生成分片段页面内容函数

var createChunkedView = function ( end ) {

function noop ( ) { } ;

typeof end === 'function' || ( end = noop ) ;

util . inherits ( View , Readable ) ;

function View ( ctx ) {

Readable . call ( this ) ;

ctx . type = 'text/html; charset=utf-8' ;

ctx . body = this ;

this . app = ctx ;

}

View . prototype . _read = noop ;

View . prototype . end = end ;

return View ;

} ;

function * end ( ) {

// 页面主逻辑，这里也要以用各种yeild

// this.push(xxx)

// this.push(xxx)

// this.push(null) 最末尾请push空内容，通知框架内容flush结束

}

module . exports = function * ( ) {

// 原本的koa view函数

const View = createChunkedView ( end ) ;

yield * new View ( this ) . end ( ) ;

}

function * ( req , res ) {

var opt = {

url : 'xxxxxxxxx' ,

method : 'POST' ,

form : {

bkn : getBkn ( skey ) ,

gc : gc ,

} ,

headers : {

'host' : 'web.qun.qq.com' ,

'Referer' : 'web.qun.qq.com'

}

} ;

function requestSync ( opt ) {

return function ( callback ) {

ajax . request ( opt , function ( error , response , body ) {

callback ( error , response ) ;

} ) ;

}

}

var content = yield requestSync ( opt ) ;

}

function * Hello ( ) {

yield 1 ;

yield 2 ;

}

var hello = Hello ( ) // hello 是一个generator

var a = hello . next ( ) // a: Object {value: 1, done: false}

var b = hello . next ( ) // b: Object {value: 2, done: false}

var c = hello . next ( ) // c: Object {value: undefined, done: true}

function * gen ( ) {

while ( true ) {

var value = yield null ;

console . log ( value ) ;

}

}

var g = gen ( ) ;

g . next ( 1 ) ;

// "{ value: null, done: false }"

g . next ( 2 ) ;

// "{ value: null, done: false }"

// 2

funciton delay ( time , cb ) {

setTimeout ( function ( ) {

cb && cb ( )

} , time )

}

delay ( 200 , function ( ) {

delay ( 1000 , function ( ) {

delay ( 500 , function ( ) {

console . log ( 'finish' )

} )

} )

} )

function delay ( time ) {

return function ( fn ) {

setTimeout ( function ( ) {

fn ( )

} , time )

}

}

co ( function * ( ) {

yield delay ( 200 ) ;

yield delay ( 1000 ) ;

yield delay ( 500 ) ;

} ) ( function ( ) {

console . timeEnd ( 1 ) // print 1: 1702.000ms

} )

function co ( GenFunc ) { // GenFunc → function*() { yield ……….}

return function ( cb ) { // function() { console.log.timeEnd(1); }

var gen = GenFunc ( )

next ( )

function next ( ) {

if ( gen . next ) {

var ret = gen . next ( ) ;

// {done: true/false, value=delay 返回的function}

if ( ret . done ) { // 如果结束就执行cb

cb && cb ( )

} else { // 继续next

ret . value ( next )

}

}

}

}

}

function delay ( time ) {

return function ( fn ) {

setTimeout ( function ( ) {

fn ( time ) // time为回调参数

} , time )

}

}

co ( function * ( ) {

var a ;

a = yield delay ( 200 ) ; // a: 200

a = yield delay ( a + 100 ) ; // a: 300

a = yield delay ( a + 100 ) ; // a: 400

return a ;

} ) ( function ( data ) {

console . log ( data ) // print 400, 最后的值被回调出来

} ) ;

function co ( GenFunc ) {

return function ( cb ) {

var gen = GenFunc ( ) ;

next ( ) ;

function next ( args ) { // 传入args

if ( gen . next ) {

var ret = gen . next ( args ) // 给next传入args

if ( ret . done ) {

cb && cb ( args )

} else {

ret . value ( next ) ;

}

}

}

}

module . exports = function * ( req , res ) {

}

co ( function * ( req , res ) {

// some code

function requestSync ( opt ) {

return function ( callback ) {

ajax . request ( opt , function ( error , response , body ) {

callback ( error , response ) ;

} ) ;

}

}

var content = yield requestSync ( opt ) ;

// 在gen.next()之后，yield会返回值给content

// other code

} ) ;