Last active
March 6, 2016 20:29
-
-
Save montlebalm/6c73d946cadba046a64c to your computer and use it in GitHub Desktop.
Handlebars perf comparison of partials vs templates
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Handlebars: Helper vs Partial</title> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> | |
| <script id="template" type="x-template/handlebars"> | |
| <p>Hey there my name is {{name}}</p> | |
| </script> | |
| <script id="template_partial" type="text/x-handlebars-template"> | |
| {{> temp name}} | |
| </script> | |
| <script id="template_helper" type="text/x-handlebars-template"> | |
| {{temp name}} | |
| </script> | |
| <script> | |
| function runTest(name, compiled, iterations) { | |
| console.time(name); | |
| for (var i = 0; i < iterations; i++) { | |
| compiled({ name: "Francis" }); | |
| } | |
| console.timeEnd(name); | |
| } | |
| window.onload = function() { | |
| var template = document.querySelector('#template').innerHTML; | |
| var compiledTemplate = Handlebars.compile(template); | |
| // Set up partial | |
| Handlebars.registerPartial('temp', template); | |
| var compiledPartial = Handlebars.compile(document.querySelector('#template_partial').innerHTML); | |
| // Set up helper | |
| Handlebars.registerHelper('temp', function(name) { | |
| var html = compiledTemplate({ name: name }); | |
| return new Handlebars.SafeString(html); | |
| }); | |
| var compiledHelper = Handlebars.compile(document.querySelector('#template_helper').innerHTML); | |
| // Warm up | |
| compiledHelper({ name: '' }); | |
| compiledPartial({ name: '' }); | |
| // Run actual tests | |
| runTest('helper', compiledHelper, 10000); | |
| runTest('partial', compiledPartial, 10000); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment