montlebalm/test.html

## test.html
<!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>
	<!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>