Benchmark: jQuery .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 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

Latest run results:

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

User agent: Mozilla/5.0 (iPad; CPU OS 15_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/100.0.4896.85 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 100 on iOS 15.4

View result in a separate tab

Test name	Executions per second
jQuery: get html	0.0 Ops/sec
get innerHTML	1508586.0 Ops/sec
jQuery: set html	0.0 Ops/sec
set innerHTML	91572.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case, specifically comparing the performance of jQuery's `.html()` method versus the native `innerHTML` property of HTML elements.

**Options Compared**

Two approaches are compared:

1. **jQuery: get html**: Using jQuery to retrieve the HTML content of an element.
2. **get innerHTML**: Retrieving the HTML content of an element using the native `innerHTML` property.

**Pros and Cons**

* **jQuery: get html**:
	+ Pros: jQuery provides a convenient and consistent way to access HTML content, especially in complex DOM structures.
	+ Cons: jQuery is a library that adds overhead to your application, which can impact performance.
* **get innerHTML**:
	+ Pros: This approach is lightweight and doesn't add any additional overhead. It's also a native JavaScript feature.
	+ Cons: The `innerHTML` property may not always return the exact HTML content, especially in cases where the element has attributes or content that need to be processed.

**Library Usage - jQuery**

jQuery is a popular JavaScript library that simplifies DOM manipulation and provides a consistent way to access HTML content. In this benchmark, jQuery's `.html()` method is used to retrieve the HTML content of an element.

**Special JS Feature - No special features are mentioned in this benchmark.**

**Other Considerations**

* The benchmark uses a fixed HTML structure with 30 elements, which may not represent real-world scenarios.
* The results only consider Chrome Mobile iOS 100 on a tablet, limiting the applicability to other browsers and devices.

**Alternatives**

Other approaches to compare could include:

1. Using document fragment or a div element as a container instead of setting innerHTML
2. Testing with different browsers (e.g., Chrome Desktop, Firefox, Safari)
3. Including more complex HTML structures or attributes in the benchmark

These alternatives can help provide a more comprehensive understanding of performance differences and potential issues specific to different scenarios or libraries.

Related benchmarks:

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

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

Created: 8 years ago by: Registered User

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 2 months ago):