当首屏看到的内容较多时候,如果等待服务器查询结束后,渲染页面输出,用户会看到白屏时间较长,这是相当影响体验的。
注意这里说的是首屏,那么好的办法考虑至少有2种,后端渲染最重要的一部分直出,然后用ajax加载其他小部分,但是缺点是ajax有请求和相应的时间,那么各小部分loading的时间会比较长,同时浏览器对于同一域名并发连接数是有限制的,(所以说尽量将资源分不到多个域名服务器,比如静态资源,cdn啥的,或者合并请求)那么当你的ajax请求较多的时候,势必会出现排队情况。那么这样还是等的比较久。
好,有没有办法让基本页面先出来,又不用ajax请求增加时间成本?有,那就是服务器端用流的形式输出。BigPipe:
注意,服务器拿到请求,开始输出啦:
html
header
必须的css js
/header
body
div#1
div#2
...
注意,几个部分必须要输出全过去,因为接下来的异步查询不知道哪个会先返回哦。而且这样用户已经看到了部分页面了哦。
好,这里开始异步去查数据,好几个方法可以异步去拿,不好意思,2好像快一点,拿到2的数据了,好,拼接成script的形式,继续输出给前端,
script render('#2',data)......这里就把拿到的数据搞进去了
1的数据又拿到了
script render('#1',data) 对了 这个render方法,在前端必须的js里已经定义好了,就是把数据处理进对应的dom块。
/body 闭合下啊
/html 继续闭合
好了结束了。。。
在Node.js中,只要使用res.write()方法,响应头就会自动带上 Transfer-Encoding: chunked 这个header。
-> 接收HTTP请求
<- 返回header,开始分块传输
|- 异步调用1
<- 返回分块数据1
|- 异步调用2
<- 返回分块数据2
|- 所有异步调用都已完成
<- 返回空块,完成分块传输
可以看下 http://ju.outofmemory.cn/entry/193593 简单介绍。