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

最新推荐文章于 2023-12-03 21:33:44 发布

Clement-Xu

最新推荐文章于 2023-12-03 21:33:44 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发精品文章标签： javascript 模板引擎

本文链接：https://blog.youkuaiyun.com/ClementAD/article/details/49337237

精品同时被 2 个专栏收录

25 篇文章

订阅专栏

前端开发

20 篇文章

订阅专栏

本文通过实际测试，对比了多个流行的JavaScript模板引擎在不同浏览器下的渲染性能，最终推荐了ArtTemplate引擎作为最佳选择，因其在性能和简洁性方面表现出色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">
		<!-- <tr>
			<th>JsRender（铁道部）</th>
			<td><input type="button" value="开始测试" onClick="jsRenderTest();"></td>
			<td><progress id="jsRenderChart" max="100"></progress></td>
			<td><span id="jsRenderResult"></span></td>
		</tr> -->
	</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="{{item.name}}Test();"></td>  -->
		<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>