Benchmark: jQuery each vs pure JS

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

AخA
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Script Preparation code:

//Add 100,000 elements
var frag = document.createDocumentFragment();
for (var i=0; i<10; i++){
  var outSection = document.createElement('section');
  outSection.id="secid_"+i;
  for (var j=0; j<100; j++){
    var midDiv = document.createElement('div');
    midDiv.id="mdivid_"+j;
    for (var k=0; k<100; k++){
      var inDiv = document.createElement('div');
      inDiv.id="divid_"+k;
      midDiv.appendChild(inDiv);
    }
    outSection.appendChild(midDiv)
  }
  frag.appendChild(outSection);
}
document.body.appendChild(frag);

 
//Add 100,000 elementsvar frag = document.createDocumentFragment();for (var i=0; i<10; i++){  var outSection = document.createElement('section');  outSection.id="secid_"+i;  for (var j=0; j<100; j++){    var midDiv = document.createElement('div');    midDiv.id="mdivid_"+j;    for (var k=0; k<100; k++){      var inDiv = document.createElement('div');      inDiv.id="divid_"+k;      midDiv.appendChild(inDiv);    }    outSection.appendChild(midDiv)  }  frag.appendChild(outSection);}document.body.appendChild(frag);

Tests:

jQuery
var a = 0; $('section').each(function () { a++; });
var a = 0;
$('section').each(function () {
a++;
});

pure JS

function forEachElement(selector, fn) {
  var elements = document.getElementsByTagName(selector);
  for (var i = 0; i < elements.length; i++) fn(elements[i]);
}

var a = 0;
forEachElement('section', function (el){
  a++;
});

​x
 
function forEachElement(selector, fn) {  var elements = document.getElementsByTagName(selector);  for (var i = 0; i < elements.length; i++) fn(elements[i]);}​var a = 0;forEachElement('section', function (el){  a++;});

jQuery DIV
var a = 0; $('section').each(function () { a++; });
var a = 0;
$('section').each(function () {
a++;
});

pure JS DIV

function forEachElement(selector, fn) {
  var elements = document.getElementsByTagName(selector);
  for (var i = 0; i < elements.length; i++) fn(elements[i]);
}

var a = 0;
forEachElement('div', function (el){
  a++;
});

 
function forEachElement(selector, fn) {  var elements = document.getElementsByTagName(selector);  for (var i = 0; i < elements.length; i++) fn(elements[i]);}​var a = 0;forEachElement('div', function (el){  a++;});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
jQuery
pure JS
jQuery DIV
pure JS DIV

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
jQuery	698267.9 Ops/sec
pure JS	1376254.8 Ops/sec
jQuery DIV	705550.1 Ops/sec
pure JS DIV	175.9 Ops/sec

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

Let's dive into the provided benchmark data.

Benchmark Overview

The benchmark compares two approaches for iterating over HTML elements:

jQuery's each method
A pure JavaScript implementation using the forEachElement function

Options Compared

The options being compared are:

Using jQuery's each method to iterate over elements with a specific tag name (section)
Using a pure JavaScript implementation with a custom forEachElement function to iterate over elements with a specific tag name (section)

Pros and Cons of Each Approach

jQuery's each Method:

Pros:

Easier to write and maintain, as it's a well-known and widely used library
Provides a convenient way to iterate over elements without manually looping

Cons:

Adds extra overhead due to the library, which can impact performance
May not be suitable for all use cases or scenarios where raw speed is critical

Pure JavaScript Implementation

Pros:

Customizable and flexible, as it allows developers to implement their own iteration logic
Avoids additional library dependencies, which can improve performance in certain scenarios

Cons:

More verbose and error-prone, requiring manual loop management and potential edge cases
May not be as readable or maintainable for complex iterations

Library: jQuery

jQuery is a popular JavaScript library that provides a set of pre-built functions for DOM manipulation and event handling. The each method is part of this library and is used to iterate over elements with a specific tag name.

In the context of this benchmark, jQuery's each method is used to iterate over section elements, while the pure JavaScript implementation uses its own custom function (forEachElement) for similar purposes.

Special JS Feature: forEachElement

The forEachElement function is a custom implementation introduced in the benchmark. It takes two arguments: selector and fn. The function iterates over all elements with the specified selector (in this case, section) and applies the provided fn callback to each element.

This feature allows developers to write more flexible iteration logic without relying on jQuery's each method. However, it also adds an extra layer of complexity and requires manual management of loops.

Other Considerations

When choosing between these two approaches, consider the following factors:

Performance: If raw speed is critical, a pure JavaScript implementation might be preferred.
Readability and maintainability: jQuery's each method can be easier to write and understand for simple iterations.
Customizability: The pure JavaScript implementation offers more flexibility and control over iteration logic.

Alternatives

Other alternatives for iterating over elements in JavaScript include:

Using the forEach method on the NodeList interface (available in modern browsers)
Utilizing Web APIs like requestAnimationFrame or Web Workers for optimized performance
Leveraging third-party libraries like Lodash or Ramda for functional programming utilities

Keep in mind that each approach has its strengths and weaknesses, and the best choice depends on the specific use case and requirements.

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark data.

**Benchmark Overview**

The benchmark compares two approaches for iterating over HTML elements:

1. jQuery's `each` method
2. A pure JavaScript implementation using the `forEachElement` function

**Options Compared**

The options being compared are:

* Using jQuery's `each` method to iterate over elements with a specific tag name (`section`)
* Using a pure JavaScript implementation with a custom `forEachElement` function to iterate over elements with a specific tag name (`section`)

**Pros and Cons of Each Approach**

**jQuery's `each` Method:**

Pros:

* Easier to write and maintain, as it's a well-known and widely used library
* Provides a convenient way to iterate over elements without manually looping

Cons:

* Adds extra overhead due to the library, which can impact performance
* May not be suitable for all use cases or scenarios where raw speed is critical

**Pure JavaScript Implementation**

Pros:

* Customizable and flexible, as it allows developers to implement their own iteration logic
* Avoids additional library dependencies, which can improve performance in certain scenarios

Cons:

* More verbose and error-prone, requiring manual loop management and potential edge cases
* May not be as readable or maintainable for complex iterations

**Library: jQuery**

jQuery is a popular JavaScript library that provides a set of pre-built functions for DOM manipulation and event handling. The `each` method is part of this library and is used to iterate over elements with a specific tag name.

In the context of this benchmark, jQuery's `each` method is used to iterate over `section` elements, while the pure JavaScript implementation uses its own custom function (`forEachElement`) for similar purposes.

**Special JS Feature: `forEachElement`**

The `forEachElement` function is a custom implementation introduced in the benchmark. It takes two arguments: `selector` and `fn`. The function iterates over all elements with the specified `selector` (in this case, `section`) and applies the provided `fn` callback to each element.

This feature allows developers to write more flexible iteration logic without relying on jQuery's `each` method. However, it also adds an extra layer of complexity and requires manual management of loops.

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* Performance: If raw speed is critical, a pure JavaScript implementation might be preferred.
* Readability and maintainability: jQuery's `each` method can be easier to write and understand for simple iterations.
* Customizability: The pure JavaScript implementation offers more flexibility and control over iteration logic.

**Alternatives**

Other alternatives for iterating over elements in JavaScript include:

* Using the `forEach` method on the `NodeList` interface (available in modern browsers)
* Utilizing Web APIs like `requestAnimationFrame` or `Web Workers` for optimized performance
* Leveraging third-party libraries like Lodash or Ramda for functional programming utilities

Keep in mind that each approach has its strengths and weaknesses, and the best choice depends on the specific use case and requirements.

Related benchmarks:

jQuery each vs pure JS (version: 3)

Searching for tagName

Comparing performance of: jQuery vs pure JS vs jQuery DIV vs pure JS DIV

Created: 8 years ago by: Registered User

Jump to the latest result

jQuery

pure JS

jQuery DIV

pure JS DIV

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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