Node直出方案的实现及性能测试（node技术）

今天刊登我们团队肌肉男施瓦辛宏的最新力作--Node直出方案。这年头你再说秒开就土了，直出方案，如下。

模式介绍

模式0: 前后端不分离

前后端代码都放在Tomcat里

模式1: 前后端分离，Node转发

WebServer 为 Node，DataServer为Tomcat

模式2: Node数据直出

Node负责数据请求，前端渲染（首页）

模式3: Node模板直出

Node请求数据，通过ejs模板引擎直接渲染模板，前端直接展示（首页）

代码实现

模式0: 传统方式，也是当前MatrixData 在用的方式。

模式1: 项目组常用方式

js 里通过ajax拉数据，返回后渲染页面，代码如下：

//获取数据
 var getData = function(arg) {
 $.get('/MatrixData/project/get-data.json',
 {time: arg}, function(result) {
 if (result && result.respCode == 1000) {
 result.data = processData(result.data);
 var $tbody = $('#imsp-table tbody');
 $tbody.empty();

 for (var key in result.data) {
 var tr = '<tr> ' +
 '<td>' + key + '</td> ' +
 '<td>'+result.data[key].bind
 +'</td> ' +
 '<td>'+result.data[key].follow
 +'</td> ' +
 '<td>'+result.data[key].totalBind
 +'</td> ' +
 '<td>'+result.data[key].totalFollow
 +'</td> ' +
 '</tr>';
 $tbody.append(tr);
 }
 } else {
 console.log('ajax err!');
 console.dir(result);
 }
 }
 )
 };

node 作为转发层 代码 如下：

app.get('/MatrixData/project/get-data.json',
 function(req, res) {
 console.log('in get data')
 var options = {
 url: 'http://127.0.0.1:8089/MatrixData/project/
 get-data.json' + req._parsedOriginalUrl.search
 };
 console.log(options);
 request.get(options, function(error, response, body) {
 if (!error) {
 res.json(JSON.parse(body));
 } else {
 console.log('request err')
 }
 })
});

模式2: 数据直出

第一步：在html中的script标签中，利用ejs模板引擎获取node端传过来的数据，并保存在全局变量里面。

<script type="text/javascript">
 window.appData = <%- JSON.stringify(appData) %>;
 window.serverData = 
 <%- JSON.stringify(serverData) %>;
</script>

第二步：配置express 如图，让html模板使用ejs模板引擎先渲染（这样可以在原来的html文件里直接用ejs语法插入代码，不用整个文件都用ejs语法重写）

// view engine setup

第三步：node 请求数据，数据直出（两个接口现在是嵌套请求，可以使用asyc，promise等组件实现多请求的同步）。

//Routes
app.get('/', function(req, res) {
 request.get({
 url: 'http://127.0.0.1:8089/MatrixData/project/
 get-data.json?time=2016-11-19'
 }, function(error, response, body) {
 if (!error) {

 var data = JSON.parse(body);
 request.get({
 url: 'http://127.0.0.1:8089/MatrixData/
 call-center/get-server-data.json?time=2016-11-13&site=0'
 }, function(err, re, bo) {
 if (!err) {
 var data1 = JSON.parse(bo);
 console.log(JSON.stringify(data.data))

 console.log(data1.data)
 res.render('b.html',
 {appData: JSON.stringify(data.data),
 serverData: JSON.stringify(data1.data)
 });
 } else {
 console.log('request call err')
 }
 });
 } else {
 console.log('request err')
 }
 });

});

第四步：前端js实现数据解析和渲染

if (window.appData) {

模式3：Node直接渲染

利用ejs，node请求到数据后直接渲染模板 返回html。代码如下：

<section class="am-panel am-panel-secondary" id="imsp">
 <header class="am-panel-hd">
 <h3 class="am-panel-title">项目名称</h3>
 </header>
 <div class="am-g">
 <div class="am-u-sm-12">
 <button type="button" class="am-btn
 am-btn-primary am-margin-right am-btn-xs"
 id="app-start">统计时间</button>
 <span id="app-startDate"></span>
 </div>
 </div>
 <table class="am-table am-table-striped
 am-table-compact" id="app-table">
 <thead>
 <tr>
 <th>渠道</th>
 <th>绑定</th>
 <th>关注</th>
 <th>总绑定</th>
 <th>总关注</th>
 </tr>
 </thead>
 <tbody>
 <% var appData = JSON.parse(appData) %>
 <% for (var key in appData) { %>
 <tr>
 <td> <%= key %></td>
 <td><%= appData[key].bind %></td>
 <td><%= appData[key].follow %></td>
 <td><%= appData[key].totalBind %></td>
 <td><%= appData[key].totalFollow %></td>
 </tr>
 <% } %>
 </tbody>
 </table>
</section>

性能小试

模式0:

模式1

模式2

模式3

总结：

前后端不分离性能优于纯转发的前后端分离。

模式2和模式3增加了html请求的时间，省去了请求接口的时间。

模式2的渲染时间长于模式3。

node直出确实提高了首页性能。

测试局限性：都在内网进行测试，没能完全反应性能差异。

首页css 还可采用inline的方式提高直出性能。

前端菜鸡，欢迎指正。

参考文献 https://github.com/joeyguo/blog/issues/8