Benchmark: Web templating - MeasureThat.net

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));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash template
Art template

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Test name	Executions per second
lodash template	705.1 Ops/sec
Art template	306.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll do my best to explain the benchmark and its options.

**Overview**

The MeasureThat.net website provides a platform for JavaScript microbenchmarks, allowing users to compare the performance of different libraries and techniques for web templating. The provided JSON represents a benchmark definition and two individual test cases: "lodash template" and "Art template".

**Test Cases**

The two test cases are designed to measure the performance of web templating using the Lodash library (specifically, its `template()` function) and Art template, respectively.

*   **Lodash Template**: This test case uses the `template()` function from Lodash to render a user list and bio template. The HTML templates are defined in the "Html Preparation Code" section.
*   **Art Template**: This test case also uses the `template()` function from Lodash to render the same user list and bio templates as the previous test case.

**Options Compared**

The benchmark compares two options:

1.  **Lodash Template**: Uses the `template()` function from Lodash to render the HTML templates.
2.  **Art Template**: Another templating engine that is not specified in the provided code, but it's mentioned in the "Html Preparation Code" section.

**Pros and Cons**

Here are some pros and cons of each approach:

*   **Lodash Template**:
    *   Pros:
        *   Well-established library with good performance.
        *   Simple and straightforward API.
    *   Cons:
        *   May have a higher memory footprint due to the use of a separate template function.
*   **Art Template**: (Assuming this is another templating engine, as its exact implementation is not specified)
    *   Pros:
        *   Possibly more efficient in terms of memory usage or execution speed.
    *   Cons:
        *   Unknown performance characteristics and potential issues.

**Library: Lodash**

Lodash is a popular JavaScript library that provides a wide range of utility functions, including templating. Its `template()` function allows users to render HTML templates using a template string syntax.

**Special JS Feature/ Syntax**

None mentioned in this specific benchmark.

**Other Alternatives**

For web templating, some other alternatives include:

*   **Handlebars**: A popular templating engine that is widely used for client-side rendering.
*   **Mustache**: Another templating engine with a similar syntax to Handlebars.
*   **Pug**: A lightweight templating engine that compiles into plain JavaScript.

Note that the performance of these alternatives may vary depending on specific use cases and requirements.

Related benchmarks:

Web templating (version: 0)

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

Comparing performance of: lodash template vs Art template

Created: 2 years ago by: Guest

Jump to the latest result

lodash template

Art template

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):