Benchmark: jQuery3 .html() vs Element.innerHTML

HTML Preparation code:

<ul id="theList">
  <li class="odd">Item 1</li>    
  <li class="even">Item 2</li>    
  <li class="odd">Item 3</li>    
  <li class="even">Item 4</li>    
  <li class="odd">Item 5</li>    
  <li class="even">Item 6</li>    
  <li class="odd">Item 7</li>    
  <li class="even">Item 8</li>    
  <li class="odd">Item 9</li>    
  <li class="even">Item 10</li>    
  <li class="odd">Item 11</li>    
  <li class="even">Item 12</li>    
  <li class="odd">Item 13</li>    
  <li class="even">Item 14</li>    
  <li class="odd">Item 15</li>    
  <li class="even">Item 16</li>    
  <li class="odd">Item 17</li>    
  <li class="even">Item 18</li>    
  <li class="odd">Item 19</li>    
  <li class="even">Item 20</li>    
  <li class="odd">Item 21</li>    
  <li class="even">Item 22</li>    
  <li class="odd">Item 23</li>    
  <li class="even">Item 24</li>    
  <li class="odd">Item 25</li>    
  <li class="even">Item 26</li>    
  <li class="odd">Item 27</li>    
  <li class="even">Item 28</li>    
  <li class="odd">Item 29</li>    
  <li class="even">Item 30</li>    
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Script Preparation code:

var el = document.getElementById('theList');

Tests:

jQuery: get html
var html = $(el).html();
get innerHTML
var html = el.innerHTML;
jQuery: set html
$(el).html('<li>Item A</li><li>Item B</li>');
set innerHTML
el.innerHTML = '<li>Item A</li><li>Item B</li>';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery: get html
get innerHTML
jQuery: set html
set innerHTML

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark.

**Benchmark Overview**

This benchmark compares the performance of two approaches to set or get HTML content on an HTML element: jQuery's `.html()` method versus the `innerHTML` property directly on the DOM element.

**Options Compared**

Two options are compared:

1. **jQuery's `.html()` method**: This is a wrapper around the `innerHTML` property, but with additional functionality and features that come with using a library like jQuery.
2. **Directly accessing `innerHTML`**: This option simply uses the `innerHTML` property of the DOM element to set or get HTML content.

**Pros and Cons**

### jQuery's `.html()` method

Pros:

* Provides a more convenient API for setting or getting HTML content, with features like automatic string normalization and support for multiple HTML documents.
* Often used in conjunction with other jQuery methods, making it a common pattern in web development.

Cons:

* May introduce additional overhead due to the wrapper around `innerHTML`, which can lead to slower performance compared to direct access.
* Requires including the jQuery library, which can add size and complexity to the project.

### Directly accessing `innerHTML`

Pros:

* Faster performance since it directly accesses the underlying DOM property without any wrappers or additional functionality.
* Does not require including an external library, making it a more lightweight option.

Cons:

* May require more boilerplate code to set or get HTML content, as it does not provide a convenient API like jQuery's `.html()` method.

**Other Considerations**

* **Library**: jQuery is a popular JavaScript library that provides a lot of functionality for DOM manipulation and event handling. Its `.html()` method wraps around the `innerHTML` property, but also adds additional features like automatic string normalization.
* **Browser Consistency**: Both options may behave differently in older browsers that do not support `innerHTML`. In this benchmark, all tests are run on Chrome 125, which supports modern web standards.

**Alternative Approaches**

Other approaches to set or get HTML content include:

* Using the `textContent` property instead of `innerHTML`, which can be more efficient for large blocks of text.
* Utilizing templating engines like Handlebars or Mustache, which provide a more concise way to render complex templates.
* Leveraging modern web technologies like Web Components or Shadow DOM, which offer new ways to manage HTML content and structure.

In summary, this benchmark compares the performance of two approaches to set or get HTML content on an HTML element: jQuery's `.html()` method versus directly accessing `innerHTML`. While jQuery's approach provides a more convenient API, it may introduce additional overhead due to its wrapper around `innerHTML`. The direct approach is faster but requires more boilerplate code.

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 Edg/125.0.0.0

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
jQuery: get html	257114.6 Ops/sec
get innerHTML	274826.3 Ops/sec
jQuery: set html	482848.1 Ops/sec
set innerHTML	1001927.7 Ops/sec

Related benchmarks:

jQuery3 .html() vs Element.innerHTML (version: 0)

Comparing performance of: jQuery: get html vs get innerHTML vs jQuery: set html vs set innerHTML

Created: 5 months ago by: Guest

Jump to the latest result

jQuery: get html

get innerHTML

jQuery: set html

set innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 25 days ago):