Autoría | Ultima modificación | Ver Log |
 <!DOCTYPE html PUBLIC><html><head><title>Benchmark JsRender</title><link href="resources/perf-compare.css" rel="stylesheet" type="text/css" /><script src="//code.jquery.com/jquery-3.5.1.js"></script><script src="../jsrender.js" type="text/javascript"></script><script src="resources/jquery.tmpl.js" type="text/javascript"></script><script src="resources/handlebars.js" type="text/javascript"></script><script src="resources/dot.js" type="text/javascript"></script><script src="resources/hogan.js"></script><script src="resources/dust-full.js"></script></head><body><h3>Perf comparison</h3><em>Rendered content:</em><br /><br /><table><tbody><tr><td id="output"></td></tr></tbody></table><br /><em>Times in microseconds:</em><table><tbody id="results"></tbody></table><script type="text/javascript">var times = 250, ret, tmplString, htmlSample,tests = [],movie = { Name: "The <i>Red</i> Violin", ReleaseYear: "1998" },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>",jqueryTmplTemplateEncode = "<div><b>${Name}</b> (${ReleaseYear})<b>${Name}</b> (${ReleaseYear})<b>${Name}</b> (${ReleaseYear})<b>${Name}</b> (${ReleaseYear})</div>",jsRenderTemplate = "<div><b>{{:Name}}</b> ({{:ReleaseYear}})<b>{{:Name}}</b> ({{:ReleaseYear}})<b>{{:Name}}</b> ({{:ReleaseYear}})<b>{{:Name}}</b> ({{:ReleaseYear}})</div>",jsRenderTemplateEncode = "<div><b>{{>Name}}</b> ({{>ReleaseYear}})<b>{{>Name}}</b> ({{>ReleaseYear}})<b>{{>Name}}</b> ({{>ReleaseYear}})<b>{{>Name}}</b> ({{>ReleaseYear}})</div>",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>",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>",handlebarsTemplate = "<div><b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})</div>",handlebarsTemplateEncode = "<div><b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})</div>",hoganTemplate = "<div><b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})<b>{{{Name}}}</b> ({{{ReleaseYear}}})</div>",hoganTemplateEncode = "<div><b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})<b>{{Name}}</b> ({{ReleaseYear}})</div>",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>",dustTemplateEncode = "<div><b>{Name}</b> ({ReleaseYear})<b>{Name}</b> ({ReleaseYear})<b>{Name}</b> ({ReleaseYear})<b>{Name}</b> ({ReleaseYear})</div>",tmpl_doT = doT.template( dotTemplate ),tmpl_doTEncode = doT.template( dotTemplateEncode ),tmpl_jQueryTmpl = $.template( null, jqueryTmplTemplate ),tmpl_JsRender = $.templates( null, jsRenderTemplate ),tmpl_jQueryTmplEncode = $.template( null, jqueryTmplTemplateEncode ),tmpl_JsRenderEncode = $.templates( null, jsRenderTemplateEncode ),tmpl_handlebars = Handlebars.compile( handlebarsTemplate ),tmpl_handlebarsEncode = Handlebars.compile( handlebarsTemplateEncode ),tmpl_hogan = Hogan.compile( hoganTemplate ),tmpl_hoganEncode = Hogan.compile( hoganTemplateEncode ),tmpl_dust = dust.compile( dustTemplate );tmpl_dustEncode = dust.compile( dustTemplateEncode );// For Handlebars, make initial rendering call to do first compilation.htmlSample = tmpl_handlebars( movie );tmpl_handlebarsEncode( movie );$( "#output" ).html( htmlSample );// For dust, load the template firsttmpl_dustLoaded = dust.loadSource(tmpl_dust);tmpl_dustLoadedEncode = dust.loadSource(tmpl_dustEncode);function test( label, times, places, cb, before, after ) {var target = $( "<tr><td>" + label + ": </td></tr>" ).appendTo( "#results" );tests.push( function() {if (before) {before();}var endTime, result,count = times,startTime = new Date().getTime();while (count--) {cb();}endTime = new Date().getTime();if (after) {after();}result = ((( endTime-startTime ) * 1000 ) / times);target.append( "<td class='result'>" + result.toFixed( places ) + "</td>");runNextTest();});}function runNextTest() {var next;if (next = tests.shift()) {setTimeout( next, 0 );} else {$( "#results" ).append( "<tr><td colspan='2'><em>Tests complete...</em></td></tr>" );}}// Test render to string perf$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );$( "#results" ).append( "<tr><td colspan='2'><b>Render to string</b></td></tr>");test( "jQuery Templates", times * 100, 1, function() {ret = tmpl_jQueryTmpl($, { data: movie }).join("");});test( "doT", times * 500, 1, function() {ret = tmpl_doT(movie);});test( "Handlebars", times * 500, 1, function() {ret = tmpl_handlebars(movie);});test( "Hogan", times * 500, 1, function() {ret = tmpl_hogan.render(movie);});test( "Dustjs", times * 500, 1, function() {dust.render(tmpl_dustLoaded, movie, function(err, out) {ret = out;});});test( "JsRender", times * 500, 1, function() {ret = tmpl_JsRender.render( movie );});// Test html encoding perf$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );$( "#results" ).append( "<tr><td colspan='2'><b>Render to string, with HTML encoding</b></td></tr>");test( "jQuery Templates", times * 50, 1, function() {ret = tmpl_jQueryTmplEncode($, { data: movie }).join("");});test( "doT", times * 50, 1, function() {ret = tmpl_doTEncode( movie );});test( "Handlebars", times * 50, 1, function() {ret = tmpl_handlebarsEncode( movie );});test( "Hogan", times * 50, 1, function() {ret = tmpl_hoganEncode.render( movie );});test( "Dustjs", times * 50, 1, function() {dust.render(tmpl_dustLoadedEncode, movie, function(err, out) {ret = out;});});test( "JsRender", times * 50, 1, function() {ret = tmpl_JsRenderEncode.render( movie );});// Test full features perf$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );$( "#results" ).append( "<tr><td colspan='2'><b>Render and insert in DOM</b></td></tr>");test( "jQuery Templates - inserted in DOM", times * 5, 0, function() {$( "#output" ).empty();$.tmpl( tmpl_jQueryTmpl, movie ).appendTo( "#output" );});test( "JsRender - inserted in DOM", times * 5, 0, function() {$( "#output" ).html(tmpl_JsRender.render( movie ));});// Test compile perf$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );$( "#results" ).append( "<tr><td colspan='2'><b>Compile</b></td></tr>");test( "jQuery Templates compile", times * 5, 0, function() {tmpl_jQueryTmpl = $.template( jqueryTmplTemplate );});test( "doT compile", times * 5, 0, function() {tmpl_doT = doT.template( dotTemplate );});test( "Handlebars compile", times * 5, 0, function() {var tmpl = Handlebars.compile( handlebarsTemplateEncode );// For Handlebars, make initial rendering call to do first compilation.tmpl( movie );});test( "Hogan compile", times * 5, 0, function() {Hogan.cache = {}; // Clear cached compiled templatetmpl_hogan = Hogan.compile( hoganTemplate );});test( "Dustjs compile", times * 5, 0, function() {tmpl_dust = dust.compile( dustTemplate );tmpl_dustLoaded = dust.loadSource(tmpl_dust);});test( "JsRender compile", times * 5, 0, function() {tmpl_JsRender = $.templates( "test", jsRenderTemplate );});$( "#results" ).append( "<tr><td colspan='2'>________________________________________________________</td></tr>" );runNextTest();</script></body></html>