新版卖家中心已经上线 3 个多月，乔福老师的 Midway 之旅不只是前后端分离，还是工程化的大作坊。我们很清楚前端不再只是地平线上的人类，现在我们可以深入到 View 层和 Controller 层做更多的有趣事。
关于 View 层，有张图可能还活在大家的本地缓存里， UI Layer 已不是单纯在服务端或者在客户端。 Midway 做的就是将 View 层彻底授权给前端。然后我们的岁月里就剩下选择，是选择服务端渲染，还是客户端渲染，还是双管齐下。
掌控了 View 层，除了提高效率，还可以考虑针对不同的场景采用不同的页面加载方式。加载方式的演变可以追溯到上个世纪，而当下能做的就是因地制宜，选择合适的方式到合适场景中。
服务端渲染，一次加载到客户端
一般场景：页面首屏内容基本就是页面所有内容
服务端渲染首屏内容，次屏内容放在 textarea 或者注释中，先将内容加载到客户端，滚动时再渲染次屏内容
一般场景：页面内容长度高出首屏内容较多
服务端渲染主 layout ，加载到客户端，通过 AJAX 获取其他页面内容，然后在客户端渲染
一般场景：目前淘宝无线 H5 的方案类似，通过接口获取数据然后在客户端渲染
服务端渲染首屏内容，加载到客户端，滚动时再通过 AJAX 获取次屏内容
一般场景：页面内容长度高于首屏内容长度较多
服务端支持 chunk 输出，分块将内容传输到客户端，客户端渲染
一般场景：适合首屏输出
采用什么样的加载方式除了考虑业务逻辑、页面元素、交互形式，第三方内容等诸多因素，最重要的应该还是用户的感受。就像冯小刚说的“电影要观众说好才是好”，就像 XXX 说的“页面要用户说快才是快”。
总的来说，首屏模块相对固定，模块较多，页面确实长。
我们先选择滚动异步加载的方案实施，我们假设页面中 A/B 为首屏模块 C 为滚动异步加载的模块
白屏太久，用户感知的内容太晚，这个对于整个网页体验是致命的。那我们就减少首屏内容，让首屏轻一点，这样用户就可以更快地感知到内容的输出。
用这种方式，进入页面主框架内容很快加载到客户端，首屏模块也在 loading 之后 很快展现，作为用户确实“感觉快”了。
同步加载的方式
异步加载首屏模块的方式
了解分块加载之前，可以先了解下分块传输编码，分块传输编码允许 HTTP 由应用服务器发送给客户端应用（ 通常是网页浏览器）的数据可以分成多个块传输。
对于 Node.js 应用来说，可以很轻松实现分块传输编码， Stream 可以很好地在服务端和客户端建立管道，通过对 Response 的 body 分块 push ，达到内容的逐个展现，而这个过程我们只需要一个请求，没错你没听错，现在只要一个请求。
同步加载首屏的方式
分块加载首屏的方式
现在我们可以不按顺序来输出内容，第 1 块内容我们可以优先输出主体的 layout ，而第 2 块到第 4 块我们可以有 3! 种排列方式，也就是说模块内容什么时候 push 都可以的。
我们还是假设页面中 A/B 为首屏模块 C 为滚动异步加载的模块
这次 loading 很快就没了，基本没看到，感觉确实“快了”。
对比下滚动异步加载的效果：
其实分块加载的原理，其实就是 Bigpipe 的原理，大伙儿可以看看这篇文章了解下。因为逐步推导的需要用分块加载可能会通俗一点。
新版卖家中心是个很好的场景，@乔福 计划做 Bigpipe 优化的决定是个华丽的开始。
熟悉了原理，现在通过 Node.js 实现 Bigpipe ，我们可以发现前人已经积累了很多经验。不管是 Koa 还是 express 都有代码可寻。但是如何在现有的 Midway 体系里面，做一个适用于业务快速采用 Bigpipe 加载方式的东西，还需要在业务实践中慢慢提炼出来。下次可以从代码实现上来详细介绍 Bigpipe 的 Node.js 实现以及那些不为人知的坑。
