Run results for: Web templating

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser: Chrome 126

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

lodash template

705/s

Art template

306/s

View exact numbers

Test name	Executions per second
✓ lodash template	705 Ops/sec
Art template	306 Ops/sec

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
// An array, object or any data (eg. from an ajax call)
let users = ['fred', 'barney', 'pebble', 'wilma', 'betty', 'bambam']

let person = {
	name: 'fred',
	occupation: 'quarry worker', 
	hobbies: 'bowling'
}
</script>
<div class="content"></div>

<template class="userlist">
	<ul>
		<% _.forEach(users, function(user) { %>
			<li><%- user %></li> 
		<% }); %> 
	</ul>
</template>
		
<template class="bio">
	<div>
		<h1>My name is <%- name %></h1>
		<p>I like <%- hobbies %> but hate being a <%- occupation %></p>	
	</div>
</template>

Tests:

lodash template
// Set the HTML template let userlist = _.template($('.userlist').html()); let bio = _.template($('.bio').html()); // render the template using hte data $('.content').html(userlist(users)); $('.content').after(bio(person));
Art template
// Set the HTML template let userlist = _.template($('.userlist').html()); let bio = _.template($('.bio').html()); // render the template using hte data $('.content').html(userlist(users)); $('.content').after(bio(person));

Run results for: Web templating

Compare web templating: art template, lodash.template, handlebars...

lodash template

Art template