您的位置：首页 > Web前端 > JavaScript

对几种流行的Javascript模板引擎的测试对比

2015-10-22 19:32 666 查看

Javascript模板引擎是数据与界面分离工作中最重要的一环，已经出现在各大型网站中：Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博、12306等。为了在项目中使用模板引擎，考虑从这些网站使用的引擎中选一种最好的出来。

网上有些测试结果，但尽信网不如无网，还是自己测试一下放心点，顺便也可以使用一下不同的语法，找出一种语法简便而且性能高的引擎。

先上测试结果。后面再上测试代码。

选了4家比较典型的来做测试（计算每个引擎渲染一万次的总时间），顺便可以测试一下各个浏览器的性能：

一、搜狗浏览器的结果：

二、谷歌浏览器的结果（由于浏览器引擎相同，结果也差不多）：

三、360浏览器（第一种明显超标了啊啊啊。。。）：

四、win10自带的Edge浏览器（处理速度明显不如谷歌啊啊啊。。。）：

五、最后，臭名昭著的IE（11）来了！（全部爆表啊啊啊！！！）：

从上面5个图中，结果不言自明了啊，artTemplate引擎在所有浏览器中，都是最快的，所以，选它应该没错。而且，这个引擎还支持简写，可以节省很多代码量和开发时间，可谓两全其美。

下面是测试用到的详细代码，注释比较详尽，应该可以一目了然：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Template Engine test</title>
<script src="../resources/js/jquery-2.1.4.js"></script>
<script src="jsrender.min.js"></script>
<script src="baiduTemplate.js"></script>
<script src="template.js"></script>
<script src="juicer.js"></script>
<link href="../resources/css/common.css" rel="stylesheet" />

<style type="text/css">
progress {width:300px; background-color:#e6e6e6 ;}
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value { background: #0064B4; }
</style>

</head>
<body>
<h1>JS模板引擎测试对比</h1>
<input type="button" value="全部测试" onClick="testAll();">
<table id="testTable">

</table>
<br/>
<div>
<div id="hint"></div>
<div>渲染结果：</div>
<div><pre id="result"></pre></div>
</div>
</body>

<script id="testTrTmpl" type="text/html">
{{each list as item i}}
<tr>
<th>{{i}}、{{item.name}}（{{item.mainUser}}）</th>

<td><input type="button" value="测试" onClick="testList.list[{{i}}].tester();"></td>
<td><progress id="{{item.name}}Chart" max="100"></progress></td>
<td><span id="{{item.name}}Result"></span></td>
</tr>
{{/each}}
</script>


<script id="jsRenderTmpl" type="text/x-jsrender">
第{{:index}}个，Name: {{:name}}   Number: {{:number}}
</script>

<script id="baiduTemplateTmpl" type="text/html">
<%for(var i=0;i<list.length;i++){%>
第<%=list[i].index%>个，Name: <%=list[i].name%>   Number: <%=list[i].number%>
<%}%>
</script>

<script id="artTemplateTmpl" type="text/html">
{{each list as item i}}
第{{item.index}}个，Name: {{item.name}}   Number: {{item.number}}
{{/each}}
</script>

<script id="juicerTmpl" type="text/template">
{@each list as item}
第${item.index}个，Name: ${item.name}   Number: ${item.number}
{@/each}
</script>

<script>
// 需要测试的模板引擎名字和测试函数
var testList ={
dataLength: 100, // 数据量
times: 10000, // 渲染次数

// 引擎名称
// 主要用户
// 渲染函数
list:[
{ name: "jsRender",
mainUser: "铁道部",
render: function(){
var template = $.templates("#jsRenderTmpl");
var html = template.render(data.list);
$("#result").html(html);
},
tester: function(){
var startTime = new Date();
for(i=0;i<testList.times;i++){
this.render();
}
var costTime = new Date() - startTime;
$("#"+this.name+"Result").html(costTime + "ms");
$("#"+this.name+"Chart").val(costTime/factor);
}
},
{ name: "baiduTemplate",
mainUser: "百度",
render: function(){
var html = baidu.template('baiduTemplateTmpl', data);
$("#result").html(html);
},
tester: function(){
var startTime = new Date();
for(i=0;i<testList.times;i++){
this.render();
}
var costTime = new Date() - startTime;
$("#"+this.name+"Result").html(costTime + "ms");
$("#"+this.name+"Chart").val(costTime/factor);
}
},
{ name: "artTemplate",
mainUser: "腾讯",
render: function(){
var html = template('artTemplateTmpl', data);
$("#result").html(html);
},
tester: function(){
var startTime = new Date();
for(i=0;i<testList.times;i++){
this.render();
}
var costTime = new Date() - startTime;
$("#"+this.name+"Result").html(costTime + "ms");
$("#"+this.name+"Chart").val(costTime/factor);
}
},
{ name: "juicer",
mainUser: "淘宝",
render: function(){
var tpl = document.getElementById('juicerTmpl').innerHTML;
var html = juicer(tpl, data);
$("#result").html(html);
},
tester: function(){
var startTime = new Date();
for(i=0;i<testList.times;i++){
this.render();
}
var costTime = new Date() - startTime;
$("#"+this.name+"Result").html(costTime + "ms");
$("#"+this.name+"Chart").val(costTime/factor);
}
}
]
};

//图形调整系数
var factor = testList.times/80;

var data = {
title: "测试数据",
list: []
};

//初始化测试数据
for (var i = 0; i < testList.dataLength; i ++) {
data.list.push({
index: i,
name: '<strong style="color:red">张三</strong>',
number: 100+i
});
};

$(function(){
var html = template('testTrTmpl', testList);
$("#testTable").html(html);
});

function testAll(){
for(var i = 0; i < testList.dataLength; i ++){
testList.list[i].tester();
}
}

</script>

</html>
完整代码：https://github.com/xujijun/MyJavaStudio/blob/master/src/main/webapp/jste/test.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 模板引擎

相关文章推荐

新的分享

章节导航