Benchmark: Get html, innerHTML vs $.html -- _ vs {}

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

<script type="text/template" id="template-underscore">
	Hello <%-obj.name%>
</script>
  
<script id="template-handlebars" type="text/x-handlebars-template">
   Hello {{name}}
</script>

Tests:

Jquery + underscore
_.template($('#template-underscore').html(), {name: 'hello'});
Jquery + handlebars
Handlebars.compile($('#template-handlebars').html())({name: 'hello'});
vanilla + underscore
_.template(document.getElementById('template-underscore').innerHTML, {name: 'hello'});
vanilla + handlebars
Handlebars.compile(document.getElementById('template-handlebars').innerHTML)({name: 'hello'});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Jquery + underscore
Jquery + handlebars
vanilla + underscore
vanilla + handlebars

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Benchmark Definition:**

The benchmark is defined in two parts:

1. **Script Preparation Code:** This section includes script tags that load three JavaScript libraries:
	* jQuery 3.6.0
	* Underscore.js (version 1.4.1)
	* Handlebars.js (latest version)

These libraries are used for templating and other purposes in the benchmark.

2. **Html Preparation Code:** This section includes HTML code that defines two templates:
	* `template-underscore`: A template using Underscore.js with a `text/template` attribute.
	* `template-handlebars`: A template using Handlebars.js with a `text/x-handlebars-template` attribute.

These templates are used in the benchmark to test the templating performance of each library.

**Individual Test Cases:**

The benchmark consists of four test cases, each testing a different combination of libraries and templating approaches:

1. **Jquery + underscore**: This test case uses jQuery's `$.html()` method to render the `template-underscore` template.
2. **Jquery + handlebars**: This test case uses jQuery's `$.html()` method to render the `template-handlebars` template.
3. **vanilla + underscore**: This test case uses JavaScript's built-in `innerHTML` property to render the `template-underscore` template, without using any library.
4. **vanilla + handlebars**: This test case uses JavaScript's built-in `innerHTML` property to render the `template-handlebars` template, without using any library.

**Options Compared:**

The benchmark is comparing the performance of different templating approaches:

* Using jQuery's `$.html()` method versus
* Using Underscore.js's `_.template()` function versus
* Using Handlebars.js's `compile()` function

**Pros and Cons:**

Here are some pros and cons for each approach:

1. **jQuery + underscore**:
	* Pros: Fast, lightweight, and easy to use.
	* Cons: Tightly coupled with jQuery, which may not be desirable for all projects.
2. **Jquery + handlebars**:
	* Pros: Combines the power of jQuery with Handlebars' templating capabilities.
	* Cons: Heavier than using only jQuery or Underscore.js.
3. **vanilla + underscore**:
	* Pros: Lightweight, fast, and easy to use without relying on any library.
	* Cons: May require more manual effort to set up and use correctly.
4. **vanilla + handlebars**:
	* Pros: Combines the power of Handlebars with JavaScript's native `innerHTML` property.
	* Cons: May be slower than using a dedicated templating library.

**Library Purposes:**

The libraries used in this benchmark are:

1. **jQuery:** A popular JavaScript library for DOM manipulation, event handling, and other tasks. In this benchmark, it's used to load the Underscore.js library.
2. **Underscore.js:** A lightweight JavaScript library that provides functional programming utilities and a templating function (`_.template()`). In this benchmark, it's used in two test cases.
3. **Handlebars.js:** A popular JavaScript templating engine that allows you to define templates as strings or arrays of strings. In this benchmark, it's used in two test cases.

**Special JS Feature/Syntax:**

There are no special JS features or syntax mentioned in the provided code.

**Other Alternatives:**

If you're interested in exploring alternative templating libraries or approaches, here are a few options:

1. **Pug.js:** A lightweight JavaScript templating engine that's similar to Handlebars.
2. **Mustache.js:** A popular JavaScript templating engine that's similar to Handlebars.
3. **Lodash template function:** A part of the Lodash library, which provides a similar templating function as Underscore.js.

Keep in mind that each library has its own strengths and weaknesses, and the choice ultimately depends on your specific project requirements and preferences.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0

Browser/OS: Firefox 87 on Windows

View result in a separate tab

Test name	Executions per second
Jquery + underscore	33313.8 Ops/sec
Jquery + handlebars	8307.2 Ops/sec
vanilla + underscore	34261.9 Ops/sec
vanilla + handlebars	8392.2 Ops/sec

Related benchmarks:

Get html, innerHTML vs $.html -- _ vs {} (version: 0)

Comparing performance of: Jquery + underscore vs Jquery + handlebars vs vanilla + underscore vs vanilla + handlebars

Created: 3 years ago by: Guest

Jump to the latest result

Jquery + underscore

Jquery + handlebars

vanilla + underscore

vanilla + handlebars

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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