Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
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>