446 lines
11 KiB
HTML
446 lines
11 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
<title>template test</title>
|
||
<script src="js/jquery-1.7.2.min.js"></script>
|
||
<script src="js/highcharts.js"></script>
|
||
|
||
|
||
<script src="../dist/template-native.js"></script>
|
||
<script src="js/tmpl.js"></script>
|
||
<script src="js/doT.js"></script>
|
||
<script src="js/juicer.js"></script>
|
||
<script src="js/kissy.js"></script>
|
||
<script src="js/template.js"></script>
|
||
<script src="js/mustache.js"></script>
|
||
<script src="js/handlebars.js"></script>
|
||
<script src="js/baiduTemplate.js"></script>
|
||
<script src="js/jquery.tmpl.js"></script>
|
||
<script src="js/easytemplate.js"></script>
|
||
<script src="js/underscore.js"></script>
|
||
<script src="js/etpl.js"></script>
|
||
|
||
|
||
<script>
|
||
// 数据量
|
||
var length = 100;
|
||
// 渲染次数
|
||
var number = 10000;
|
||
|
||
var data = {
|
||
list: []
|
||
};
|
||
|
||
for (var i = 0; i < length; i ++) {
|
||
data.list.push({
|
||
index: i,
|
||
user: '<strong style="color:red">糖饼</strong>',
|
||
site: 'http://www.planeart.cn',
|
||
weibo: 'http://weibo.com/planeart',
|
||
QQweibo: 'http://t.qq.com/tangbin'
|
||
});
|
||
};
|
||
|
||
|
||
// 待测试的引擎列表
|
||
var testList = [
|
||
|
||
{
|
||
name: 'artTemplate',
|
||
tester: function () {
|
||
//template.config('escape', false);
|
||
var source = document.getElementById('template').innerHTML;
|
||
var fn = template.compile(source);
|
||
for (var i = 0; i < number; i ++) {
|
||
fn(data);
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'juicer',
|
||
tester: function () {
|
||
var config = {cache:true};
|
||
|
||
var source = document.getElementById('juicer').innerHTML;
|
||
for (var i = 0; i < number; i ++) {
|
||
juicer.to_html(source, data, config);
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'doT',
|
||
tester: function () {
|
||
var source = document.getElementById('doT').innerHTML;
|
||
var doTtmpl = doT.template(source);
|
||
for (var i = 0; i < number; i ++) {
|
||
doTtmpl(data);
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'Handlebars',
|
||
tester: function () {
|
||
var source = document.getElementById('Handlebars').innerHTML;
|
||
var fn = Handlebars.compile(source);
|
||
for (var i = 0; i < number; i ++) {
|
||
fn(data);
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'etpl',
|
||
tester: function () {
|
||
// dont escape html
|
||
etpl.config({
|
||
defaultFilter: ''
|
||
});
|
||
var source = document.getElementById('etpl').innerHTML;
|
||
var fn = etpl.compile(source);
|
||
for (var i = 0; i < number; i ++) {
|
||
fn(data);
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'tmpl',
|
||
tester: function () {
|
||
var source = document.getElementById('tmpl').innerHTML;
|
||
var fn = tmpl(source);
|
||
for (var i = 0; i < number; i ++) {
|
||
fn(data);
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'easyTemplate',
|
||
tester: function () {
|
||
var source = document.getElementById('easyTemplate').innerHTML;
|
||
var fn = easyTemplate(source);
|
||
for (var i = 0; i < number; i ++) {
|
||
// easyTemplate 渲染方法被重写到 toString(), 需要取值操作才会运行
|
||
fn(data) + '';
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'underscoreTemplate',
|
||
tester: function () {
|
||
var source = document.getElementById('underscoreTemplate').innerHTML;
|
||
var fn = _.template(source);
|
||
for (var i = 0; i < number; i ++) {
|
||
fn(data);
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: 'baiduTemplate',
|
||
tester: function () {
|
||
var bt=baidu.template;
|
||
bt.ESCAPE = false;
|
||
for (var i = 0; i < number; i ++) {
|
||
bt('baidu-template', data);
|
||
}
|
||
}
|
||
},
|
||
|
||
// jqueryTmpl 太慢，可能导致浏览器停止响应
|
||
/*{
|
||
name: 'jqueryTmpl',
|
||
tester: function () {
|
||
var source = document.getElementById("jqueryTmpl").innerHTML;
|
||
for (var i = 0; i < number; i ++) {
|
||
$.tmpl(source, data);
|
||
}
|
||
}
|
||
},*/
|
||
|
||
{
|
||
name: 'Mustache',
|
||
tester: function () {
|
||
var source = document.getElementById('Mustache').innerHTML;
|
||
for (var i = 0; i < number; i ++) {
|
||
Mustache.to_html(source, data);
|
||
}
|
||
}
|
||
}
|
||
|
||
];
|
||
|
||
KISSY.use('template',function(S,T) {
|
||
testList.push({
|
||
name: 'kissyTemplate',
|
||
tester: function () {
|
||
var source= document.getElementById('kissy').innerHTML;
|
||
|
||
for (var i = 0; i < number; i ++) {
|
||
T(source).render(data);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
var startTest = function () {
|
||
|
||
var Timer = function (){
|
||
this.startTime = + new Date;
|
||
};
|
||
|
||
Timer.prototype.stop = function(){
|
||
return + new Date - this.startTime;
|
||
};
|
||
|
||
var colors = Highcharts.getOptions().colors;
|
||
var categories = [];
|
||
|
||
for (var i = 0; i < testList.length; i ++) {
|
||
categories.push(testList[i].name);
|
||
}
|
||
|
||
var chart = new Highcharts.Chart({
|
||
chart: {
|
||
renderTo: 'container',
|
||
height: categories.length * 40,
|
||
type: 'bar'
|
||
},
|
||
|
||
title: {
|
||
text: 'JavaScript 模板引擎负荷测试'
|
||
},
|
||
|
||
subtitle: {
|
||
text: length + ' 条数据 × ' + number + ' 次渲染'
|
||
},
|
||
|
||
xAxis: {
|
||
categories: categories,
|
||
labels: {
|
||
align: 'right',
|
||
style: {
|
||
fontSize: '12px',
|
||
fontFamily: 'Verdana, sans-serif'
|
||
}
|
||
}
|
||
},
|
||
|
||
yAxis: {
|
||
min: 0,
|
||
title: {
|
||
text: '耗时(毫秒)'
|
||
}
|
||
},
|
||
|
||
legend: {
|
||
enabled: false
|
||
},
|
||
|
||
tooltip: {
|
||
formatter: function() {
|
||
return '<b>'+ this.x +'</b><br/>'+
|
||
this.y + '毫秒';
|
||
}
|
||
|
||
},
|
||
|
||
credits: {
|
||
enabled: false
|
||
},
|
||
plotOptions: {
|
||
bar: {
|
||
dataLabels: {
|
||
enabled: true,
|
||
formatter: function () {
|
||
return this.y + 'ms';
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
data : []
|
||
}]
|
||
|
||
});
|
||
|
||
var log = function (message) {
|
||
document.getElementById('log').innerHTML = message;
|
||
};
|
||
|
||
var tester = function (target) {
|
||
|
||
|
||
var time = new Timer;
|
||
target.tester();
|
||
var endTime = time.stop();
|
||
|
||
chart.series[0].addPoint({
|
||
color: colors.shift(),
|
||
y: endTime
|
||
});
|
||
|
||
|
||
if (!testList.length) {
|
||
log('测试已完成，请不要迷恋速度');
|
||
return;
|
||
}
|
||
|
||
target = testList.shift();
|
||
|
||
log('正在测试: ' + target.name + '..');
|
||
|
||
setTimeout(function () {
|
||
tester(target);
|
||
}, 500);
|
||
|
||
};
|
||
|
||
var target = testList.shift();
|
||
log('正在测试: ' + target.name + '..');
|
||
tester(target);
|
||
|
||
};
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- artTemplate 的模板 -->
|
||
<script id="template" type="text/tmpl">
|
||
<ul>
|
||
<% for (i = 0, l = list.length; i < l; i ++) { %>
|
||
<li>用户: <%=#list[i].user%>/ 网站：<%=#list[i].site%></li>
|
||
<% } %>
|
||
</ul>
|
||
</script>
|
||
|
||
<!-- baidu-template 的模板 -->
|
||
<script id="baidu-template" type="text/tmpl">
|
||
<ul>
|
||
<% for (var val, i = 0, l = list.length; i < l; i ++) { %>
|
||
<% val = list[i]; %>
|
||
<li>用户: <%:=val.user%>/ 网站：<%:=val.site%></li>
|
||
<% } %>
|
||
</ul>
|
||
</script>
|
||
|
||
<!-- easyTemplate 的模板 -->
|
||
<script id="easyTemplate" type="text/tmpl">
|
||
<ul>
|
||
<#list data.list as item>
|
||
<li>用户: ${item.user}/ 网站：${item.site}</li>
|
||
</#list>
|
||
</ul>
|
||
</script>
|
||
|
||
<!-- tmpl 的模板 -->
|
||
<script id="tmpl" type="text/tmpl">
|
||
<ul>
|
||
<% for (var val, i = 0, l = list.length; i < l; i ++) { %>
|
||
<% val = list[i]; %>
|
||
<li>用户: <%=val.user%>/ 网站：<%=val.site%></li>
|
||
<% } %>
|
||
</ul>
|
||
</script>
|
||
|
||
<!-- jqueryTmpl 的模板 -->
|
||
<script id="jqueryTmpl" type="text/tmpl">
|
||
<ul>
|
||
{{each list}}
|
||
<li>用户: ${$value.user}/ 网站：${$value.site}</li>
|
||
{{/each}}
|
||
</ul>
|
||
</script>
|
||
|
||
<!--juicer 的模板 -->
|
||
<script id="juicer" type="text/tmpl">
|
||
<ul>
|
||
{@each list as val}
|
||
<li>用户: $${val.user}/ 网站：$${val.site}</li>
|
||
{@/each}
|
||
</ul>
|
||
</script>
|
||
|
||
<!--etpl 的模板 -->
|
||
<script id="etpl" type="text/tmpl">
|
||
<ul>
|
||
<!--for: ${list} as ${val} -->
|
||
<li>用户: ${val.user}/ 网站：${val.site}</li>
|
||
<!--/for-->
|
||
</ul>
|
||
</script>
|
||
|
||
<!-- doT 的模板 -->
|
||
<script id="doT" type="text/tmpl">
|
||
<ul>
|
||
{{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
|
||
{{ val = it.list; }}
|
||
<li>用户: {{=val[i].user}}/ 网站：{{=val[i].site}}</li>
|
||
{{ } }}
|
||
</ul>
|
||
</script>
|
||
|
||
<!--Mustache 的模板 -->
|
||
<script id="Mustache" type="text/tmpl">
|
||
<ul>
|
||
{{#list}}
|
||
<li>用户: {{{user}}}/ 网站：{{{site}}}</li>
|
||
{{/list}}
|
||
</ul>
|
||
</script>
|
||
|
||
<!--Handlebars 的模板 -->
|
||
<script id="Handlebars" type="text/tmpl">
|
||
<ul>
|
||
{{#list}}
|
||
<li>用户: {{{user}}}/ 网站：{{{site}}}</li>
|
||
{{/list}}
|
||
</ul>
|
||
</script>
|
||
|
||
<!--kissy 的模板 -->
|
||
<script id="kissy" type="text/tmpl">
|
||
<ul>
|
||
{{#each list as val}}
|
||
<li>用户: {{val.user}}/ 网站：{{val.site}}</li>
|
||
{{/each}}
|
||
</ul>
|
||
</script>
|
||
|
||
|
||
<!-- ejs 的模板 -->
|
||
<script id="ejs" type="text/tmpl">
|
||
<ul>
|
||
<& for (var val, i = 0, l = @list.length; i < l; i ++) { &>
|
||
<& val = @list[i]; &>
|
||
<li>用户: <&= val.user &>； 网站：<&= val.site &></li>
|
||
<& } &>
|
||
</ul>
|
||
</script>
|
||
|
||
<!-- underscore 的模板 -->
|
||
<script id="underscoreTemplate" type="text/tmpl">
|
||
<ul>
|
||
<% for (var i = 0, l = list.length; i < l; i ++) { %>
|
||
<li>用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
|
||
<% } %>
|
||
</ul>
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<h1>引擎渲染速度测试</h1>
|
||
<p><strong><script>document.write(length)</script></strong> 条数据 × <strong><script>document.write(number)</script></strong> 次渲染测试 [escape:false, cache:true]</p>
|
||
<p><em>建议在拥有 v8 javascript 引擎的 chrome 浏览器上进行测试，避免浏览器停止响应</em></p>
|
||
<p><button id="button-test" onclick="this.disabled=true;startTest()" style="padding: 5px;">开始测试»</button> <span id="log" style="font-size:12px"><script>for (var i = 0; i < testList.length; i ++) {document.write(testList[i].name + '; ')}</script></span></p>
|
||
<div id="container" style="min-width: 400px; margin: 0 auto"></div>
|
||
</body>
|
||
</html> |