Diy页面服务端渲染解决方案

1. 问题由来

在移动互联网电商领域，运营天天须要搭建多个促销页面来吸引用户去点击去购买，一开始程序员临时写个新页面去实现，可这些页面能够用几回就不用了，每次建立新页面去实现费时费力，并且，电商的运营需求是快速迭代的，每次去页面代码里去改，而后上线也太不方便了。因此产品提出了Diy 页面----配置web组件去搭建页面，事先定好页面可能到用到哪些的组件，而后运营在后台选好页面由哪些组件组成，而后分别去配置对应的组件数据，这样运营能够快速地去建立他们所须要的页面，快速响应需求变化。因此Diy 页面能很好地解决电商运营的复杂而快速的需求变更。

2. Diy 页面初期解决方案

           每一个组件由模板文件（tpl），JS文件和css文件组成，在页面经过Ajax获取页面数据，经过Require JS按需加载页面所须要的组件内容，而后面前端渲染生成对应的组件html并执行相应JS方法，这种解决方案虽然知足了运营的需求，但页面性能不是很高，用户访问时等待时间有点长，因此必须提升页面响应速度。

           这种解决方案下页面响应慢产生的缘由：

1. 经过Require JS按需加载页面所须要的组件内容，虽然请求的内容是压缩过的，但会产生过多的Http请求，每生成一个http请求是比较消耗资源的，但又不能把全部组件合并到一个文件中，由于组件会不少，合并会生成一个很大很大文件，理想的状态是请求一个按需加载合并后的文件，使用combo方式。
2. 页面数据接口，返回数据很大，此Ajax请求在页面全部请求中是最耗时的，虽然服务端对接口作了缓存，但仍是以为返回数据很大，能够试着优化下接口数据结构。
3. 前端经过JS模板引擎生成html，这须要消耗点资源，并且这种diy页面基本上都是内容展现型页面，也就是生成完以后页面内容不会再变更了，因此在前端经过JS模板引擎生成html能够换成在服务端生成html来提升页面响应速度。

基于上述缘由的分析，改进后的方案最好是能够在服务端渲染web组件。

3. Diy页面服务端渲染解决方案

对于前端工程师来讲要服务端去渲染页面，在不熟悉服务端语言的状况下是一个很大挑战，幸好技术发展很快，出现了Node能够用Javascript去写服务端，本身动手丰衣足食。

NodeJs如今发展已经很成熟了，因此使用node不用担忧出现什么问题。

实现方式以下 :

1. Web服务器根据请求页面pageId，在内部经过http代理从数据接口层获取到页面配置源数据;
2. 而后根据获取到的数据，找到对应组件模板（tpl）,使用服务端模板引擎生成对应的组件实例化的html，同时生成此页面的JS和CSS访问url，动态拼接整个页面html，并返回给用户
3. 用户获取到页面后，只发一个组件css请求和一个组件js请求，浏览器就能够直接渲染展示了。

总体过程以下：

 

此方案优势：

1． 大量减小组件相关的http请求，把js，或css合并为一个请求。

2． 在服务端代理请求数据接口层比用户端去访问数据接口层要快不少；

3． 服务端渲染生成页面html，方便SEO，更方便后期作页面静态化，进一步提高页面性能。

 

我的写了一个demo放在github上，有兴趣的人能够看下，代码还在继续完善中，地址 https://github.com/hskww/Ncomponents/

源码说明：

代码基于node的thinkjs框架，我的认为thinkjs真的不错，你们比较熟悉的MVC模式，thinksjs送给前端开发人员大大的福利，访问thinkjs https://thinkjs.org/。

源码使用步骤：

　　1. 安装node；

　　2. 安装thinkjs ,npm install thinkjs@2 -g --verbose,若是慢可使用 npm install thinkjs@2 -g --registry=https://registry.npm.taobao.org --verbose；

　　3. 安装依赖 npm install；

　　4. 运行程序 npm start；

源码中的combo接口是我的本身实现的，固然这个combo你们也能够用外面成熟combo的方案；模板选择了Nunjunks,功能强大的模板引擎（http://mozilla.github.io/nunjucks/），固然也能够选择ejs，ejs能够在模板中直接使用全局函数，而Nunjunks须要事先注册，有兴趣的朋友能够根据业务本身来选择。

Css使用sass开发，使用gulp来编译和压缩js和css文件，combo接口只来合并相关文件，在node层，对js和css的文件作了一个缓存，而后加Expires头，尽可能利用浏览器缓存。

对于node层的缓存，在生产环境中，上线时能够手动更新这些js和css缓存，让用户每次访问都是从缓存中取数据。