6056 |
efrain |
1 |
 <!DOCTYPE html PUBLIC>
|
|
|
2 |
<html>
|
|
|
3 |
<head>
|
|
|
4 |
<title>Benchmark JsRender</title>
|
|
|
5 |
<link href="resources/perf-compare.css" rel="stylesheet" type="text/css" />
|
|
|
6 |
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
|
|
|
7 |
<script src="../jsrender.js" type="text/javascript"></script>
|
|
|
8 |
<script src="resources/jquery.tmpl.js" type="text/javascript"></script>
|
|
|
9 |
|
|
|
10 |
<script src="resources/handlebars.js" type="text/javascript"></script>
|
|
|
11 |
<script src="resources/dot.js" type="text/javascript"></script>
|
|
|
12 |
<script src="resources/hogan.js"></script>
|
|
|
13 |
<script src="resources/dust-full.js"></script>
|
|
|
14 |
</head>
|
|
|
15 |
<body>
|
|
|
16 |
|
|
|
17 |
<h3>Perf comparison</h3>
|
|
|
18 |
|
|
|
19 |
<em>Rendered content:</em><br /><br />
|
|
|
20 |
<table><tbody><tr><td id="output"></td></tr></tbody></table>
|
|
|
21 |
|
|
|
22 |
<br /><em>Times in microseconds:</em>
|
|
|
23 |
<table><tbody id="results"></tbody></table>
|
|
|
24 |
|
|
|
25 |
<script type="text/javascript">
|
|
|
26 |
var times = 250, ret, tmplString, htmlSample,
|
|
|
27 |
tests = [],
|
|
|
28 |
|
|
|
29 |
movie = { Name: "The <i>Red</i> Violin", ReleaseYear: "1998" },
|
|
|
30 |
|
|
|
31 |
jqueryTmplTemplate = "<div><b>{{html Name}}</b> ({{html ReleaseYear}})<b>{{html Name}}</b> ({{html ReleaseYear}})<b>{{html Name}}</b> ({{html ReleaseYear}})<b>{{html Name}}</b> ({{html ReleaseYear}})</div>",
|
|
|
32 |
jqueryTmplTemplateEncode = "<div><b>${Name}</b> (${ReleaseYear})<b>${Name}</b> (${ReleaseYear})<b>${Name}</b> (${ReleaseYear})<b>${Name}</b> (${ReleaseYear})</div>",
|
|
|
33 |
jsRenderTemplate = "<div><b>{{:Name}}</b> ({{:ReleaseYear}})<b>{{:Name}}</b> ({{:ReleaseYear}})<b>{{:Name}}</b> ({{:ReleaseYear}})<b>{{:Name}}</b> ({{:ReleaseYear}})</div>",
|
|
|
34 |
jsRenderTemplateEncode = "<div><b>{{>Name}}</b> ({{>ReleaseYear}})<b>{{>Name}}</b> ({{>ReleaseYear}})<b>{{>Name}}</b> ({{>ReleaseYear}})<b>{{>Name}}</b> ({{>ReleaseYear}})</div>",
|
|
|
35 |
dotTemplate = "<div><b>{{=it.Name}}</b> ({{=it.ReleaseYear}})<b>{{=it.Name}}</b> ({{=it.ReleaseYear}})<b>{{=it.Name}}</b> ({{=it.ReleaseYear}})<b>{{=it.Name}}</b> ({{=it.ReleaseYear}})</div>",
|
|
|
36 |
dotTemplateEncode = "<div><b>{{!it.Name}}</b> ({{!it.ReleaseYear}})<b>{{!it.Name}}</b> ({{!it.ReleaseYear}})<b>{{!it.Name}}</b> ({{!it.ReleaseYear}})<b>{{!it.Name}}</b> ({{!it.ReleaseYear}})</div>",
|
|
|
37 |
handlebarsTemplate = "<div><b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})</div>",
|
|
|
38 |
handlebarsTemplateEncode = "<div><b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})</div>",
|
|
|
39 |
hoganTemplate = "<div><b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})</div>",
|
|
|
40 |
hoganTemplateEncode = "<div><b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})</div>",
|
|
|
41 |
dustTemplate = "<div><b>{Name|s}</b> ({ReleaseYear|s})<b>{Name|s}</b> ({ReleaseYear|s})<b>{Name|s}</b> ({ReleaseYear|s})<b>{Name|s}</b> ({ReleaseYear|s})</div>",
|
|
|
42 |
dustTemplateEncode = "<div><b>{Name}</b> ({ReleaseYear})<b>{Name}</b> ({ReleaseYear})<b>{Name}</b> ({ReleaseYear})<b>{Name}</b> ({ReleaseYear})</div>",
|
|
|
43 |
|
|
|
44 |
tmpl_doT = doT.template( dotTemplate ),
|
|
|
45 |
tmpl_doTEncode = doT.template( dotTemplateEncode ),
|
|
|
46 |
tmpl_jQueryTmpl = $.template( null, jqueryTmplTemplate ),
|
|
|
47 |
tmpl_JsRender = $.templates( null, jsRenderTemplate ),
|
|
|
48 |
tmpl_jQueryTmplEncode = $.template( null, jqueryTmplTemplateEncode ),
|
|
|
49 |
tmpl_JsRenderEncode = $.templates( null, jsRenderTemplateEncode ),
|
|
|
50 |
tmpl_handlebars = Handlebars.compile( handlebarsTemplate ),
|
|
|
51 |
tmpl_handlebarsEncode = Handlebars.compile( handlebarsTemplateEncode ),
|
|
|
52 |
tmpl_hogan = Hogan.compile( hoganTemplate ),
|
|
|
53 |
tmpl_hoganEncode = Hogan.compile( hoganTemplateEncode ),
|
|
|
54 |
tmpl_dust = dust.compile( dustTemplate );
|
|
|
55 |
tmpl_dustEncode = dust.compile( dustTemplateEncode );
|
|
|
56 |
|
|
|
57 |
// For Handlebars, make initial rendering call to do first compilation.
|
|
|
58 |
htmlSample = tmpl_handlebars( movie );
|
|
|
59 |
tmpl_handlebarsEncode( movie );
|
|
|
60 |
$( "#output" ).html( htmlSample );
|
|
|
61 |
|
|
|
62 |
// For dust, load the template first
|
|
|
63 |
tmpl_dustLoaded = dust.loadSource(tmpl_dust);
|
|
|
64 |
tmpl_dustLoadedEncode = dust.loadSource(tmpl_dustEncode);
|
|
|
65 |
|
|
|
66 |
function test( label, times, places, cb, before, after ) {
|
|
|
67 |
var target = $( "<tr><td>" + label + ": </td></tr>" ).appendTo( "#results" );
|
|
|
68 |
tests.push( function() {
|
|
|
69 |
if (before) {
|
|
|
70 |
before();
|
|
|
71 |
}
|
|
|
72 |
var endTime, result,
|
|
|
73 |
count = times,
|
|
|
74 |
startTime = new Date().getTime();
|
|
|
75 |
|
|
|
76 |
while (count--) {
|
|
|
77 |
cb();
|
|
|
78 |
}
|
|
|
79 |
endTime = new Date().getTime();
|
|
|
80 |
if (after) {
|
|
|
81 |
after();
|
|
|
82 |
}
|
|
|
83 |
result = ((( endTime-startTime ) * 1000 ) / times);
|
|
|
84 |
target.append( "<td class='result'>" + result.toFixed( places ) + "</td>");
|
|
|
85 |
runNextTest();
|
|
|
86 |
});
|
|
|
87 |
}
|
|
|
88 |
|
|
|
89 |
function runNextTest() {
|
|
|
90 |
var next;
|
|
|
91 |
if (next = tests.shift()) {
|
|
|
92 |
setTimeout( next, 0 );
|
|
|
93 |
} else {
|
|
|
94 |
$( "#results" ).append( "<tr><td colspan='2'><em>Tests complete...</em></td></tr>" );
|
|
|
95 |
}
|
|
|
96 |
}
|
|
|
97 |
|
|
|
98 |
// Test render to string perf
|
|
|
99 |
$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );
|
|
|
100 |
$( "#results" ).append( "<tr><td colspan='2'><b>Render to string</b></td></tr>");
|
|
|
101 |
|
|
|
102 |
test( "jQuery Templates", times * 100, 1, function() {
|
|
|
103 |
ret = tmpl_jQueryTmpl($, { data: movie }).join("");
|
|
|
104 |
});
|
|
|
105 |
test( "doT", times * 500, 1, function() {
|
|
|
106 |
ret = tmpl_doT(movie);
|
|
|
107 |
});
|
|
|
108 |
test( "Handlebars", times * 500, 1, function() {
|
|
|
109 |
ret = tmpl_handlebars(movie);
|
|
|
110 |
});
|
|
|
111 |
test( "Hogan", times * 500, 1, function() {
|
|
|
112 |
ret = tmpl_hogan.render(movie);
|
|
|
113 |
});
|
|
|
114 |
test( "Dustjs", times * 500, 1, function() {
|
|
|
115 |
dust.render(tmpl_dustLoaded, movie, function(err, out) {
|
|
|
116 |
ret = out;
|
|
|
117 |
});
|
|
|
118 |
});
|
|
|
119 |
test( "JsRender", times * 500, 1, function() {
|
|
|
120 |
ret = tmpl_JsRender.render( movie );
|
|
|
121 |
});
|
|
|
122 |
|
|
|
123 |
// Test html encoding perf
|
|
|
124 |
$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );
|
|
|
125 |
$( "#results" ).append( "<tr><td colspan='2'><b>Render to string, with HTML encoding</b></td></tr>");
|
|
|
126 |
|
|
|
127 |
test( "jQuery Templates", times * 50, 1, function() {
|
|
|
128 |
ret = tmpl_jQueryTmplEncode($, { data: movie }).join("");
|
|
|
129 |
});
|
|
|
130 |
test( "doT", times * 50, 1, function() {
|
|
|
131 |
ret = tmpl_doTEncode( movie );
|
|
|
132 |
});
|
|
|
133 |
test( "Handlebars", times * 50, 1, function() {
|
|
|
134 |
ret = tmpl_handlebarsEncode( movie );
|
|
|
135 |
});
|
|
|
136 |
test( "Hogan", times * 50, 1, function() {
|
|
|
137 |
ret = tmpl_hoganEncode.render( movie );
|
|
|
138 |
});
|
|
|
139 |
test( "Dustjs", times * 50, 1, function() {
|
|
|
140 |
dust.render(tmpl_dustLoadedEncode, movie, function(err, out) {
|
|
|
141 |
ret = out;
|
|
|
142 |
});
|
|
|
143 |
});
|
|
|
144 |
test( "JsRender", times * 50, 1, function() {
|
|
|
145 |
ret = tmpl_JsRenderEncode.render( movie );
|
|
|
146 |
});
|
|
|
147 |
|
|
|
148 |
// Test full features perf
|
|
|
149 |
$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );
|
|
|
150 |
$( "#results" ).append( "<tr><td colspan='2'><b>Render and insert in DOM</b></td></tr>");
|
|
|
151 |
|
|
|
152 |
test( "jQuery Templates - inserted in DOM", times * 5, 0, function() {
|
|
|
153 |
$( "#output" ).empty();
|
|
|
154 |
$.tmpl( tmpl_jQueryTmpl, movie ).appendTo( "#output" );
|
|
|
155 |
});
|
|
|
156 |
test( "JsRender - inserted in DOM", times * 5, 0, function() {
|
|
|
157 |
$( "#output" ).html(tmpl_JsRender.render( movie ));
|
|
|
158 |
});
|
|
|
159 |
|
|
|
160 |
// Test compile perf
|
|
|
161 |
$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );
|
|
|
162 |
$( "#results" ).append( "<tr><td colspan='2'><b>Compile</b></td></tr>");
|
|
|
163 |
|
|
|
164 |
test( "jQuery Templates compile", times * 5, 0, function() {
|
|
|
165 |
tmpl_jQueryTmpl = $.template( jqueryTmplTemplate );
|
|
|
166 |
});
|
|
|
167 |
test( "doT compile", times * 5, 0, function() {
|
|
|
168 |
tmpl_doT = doT.template( dotTemplate );
|
|
|
169 |
});
|
|
|
170 |
test( "Handlebars compile", times * 5, 0, function() {
|
|
|
171 |
var tmpl = Handlebars.compile( handlebarsTemplateEncode );
|
|
|
172 |
// For Handlebars, make initial rendering call to do first compilation.
|
|
|
173 |
tmpl( movie );
|
|
|
174 |
});
|
|
|
175 |
test( "Hogan compile", times * 5, 0, function() {
|
|
|
176 |
Hogan.cache = {}; // Clear cached compiled template
|
|
|
177 |
tmpl_hogan = Hogan.compile( hoganTemplate );
|
|
|
178 |
});
|
|
|
179 |
test( "Dustjs compile", times * 5, 0, function() {
|
|
|
180 |
tmpl_dust = dust.compile( dustTemplate );
|
|
|
181 |
tmpl_dustLoaded = dust.loadSource(tmpl_dust);
|
|
|
182 |
});
|
|
|
183 |
test( "JsRender compile", times * 5, 0, function() {
|
|
|
184 |
tmpl_JsRender = $.templates( "test", jsRenderTemplate );
|
|
|
185 |
});
|
|
|
186 |
|
|
|
187 |
$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );
|
|
|
188 |
|
|
|
189 |
runNextTest();
|
|
|
190 |
</script>
|
|
|
191 |
|
|
|
192 |
</body>
|
|
|
193 |
</html>
|