Benchmark: jQuery .html() vs Element.innerHTML fixed

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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

set innerHTML

367K/s

jQuery set html

259K/s

get innerHTML

160K/s

jQuery get html

157K/s

Fastest: set innerHTML (2.3x faster)

View exact numbers

✓ set innerHTML: 366,903 ops/sec
• jQuery set html: 258,900 ops/sec
• get innerHTML: 160,365 ops/sec
• jQuery get html: 157,440 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

set innerHTML

321K/s

jQuery set html

160K/s

get innerHTML

81K/s

jQuery get html

72K/s

View exact numbers

Test name	Executions per second
✓ set innerHTML	320,825 Ops/sec
jQuery set html	160,253 Ops/sec
get innerHTML	81,271 Ops/sec
jQuery get html	72,060 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches for setting and getting HTML content in an HTML element: using jQuery's `.html()` method versus the `innerHTML` property directly on the DOM element (`el.innerHTML = '<li>Item A</li><li>Item B</li>';`).

**Library Used: jQuery**

The benchmark uses jQuery, a popular JavaScript library for DOM manipulation and event handling. The jQuery library provides convenient methods like `.html()` to set or get the HTML content of an element.

**Options Compared**

Two options are compared:

1. **jQuery's `.html()` method**: This approach uses the `$(el).html()` method to set or get the HTML content of an element.
2. **`innerHTML` property**: This approach directly sets or gets the HTML content of an element using the `el.innerHTML` property.

**Pros and Cons**

**jQuery's `.html()` method:**

Pros:

* Provides a convenient and familiar API for setting and getting HTML content.
* May be more readable and maintainable code, as it abstracts away low-level DOM manipulation.

Cons:

* Adds overhead due to jQuery's functionality, which may not be necessary for this specific task.
* May introduce additional dependencies (e.g., jQuery's polyfills) that can affect performance.

**`innerHTML` property:**

Pros:

* Fast and lightweight, as it directly accesses the DOM element without any unnecessary abstractions.
* Does not add additional dependencies beyond the standard JavaScript library.

Cons:

* Requires more manual management of HTML content, which can lead to errors or security vulnerabilities if not done correctly.

**Other Considerations**

The benchmark only measures the performance difference between these two approaches and does not consider other factors that might impact performance, such as:

* Browser support: The benchmark uses Chrome 127, but performance may vary across different browsers.
* Hardware: The benchmark runs on a desktop platform, but performance can differ on mobile or other platforms.
* Code organization and complexity: The benchmark code is simple and focused on the specific task, which is beneficial for performance.

**Alternatives**

Other alternatives for setting and getting HTML content include:

* Using the `textContent` property instead of `innerHTML`, as it may be faster and more secure.
* Employing a template engine or a library like Mustache to render HTML templates, which can provide better performance and security than manual string concatenation.
* Leveraging web workers or worker threads to offload computationally expensive tasks, such as parsing or processing large amounts of HTML content.

jQuery .html() vs Element.innerHTML fixed (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

jQuery get html

get innerHTML

jQuery set html

set innerHTML

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

jQuery .html() vs Element.innerHTML fixed (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

jQuery get html

get innerHTML

jQuery set html

set innerHTML

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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