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>