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>

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

Tests:

jQuery
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++; });
jQuery DIV
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++; });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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: 2 years 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 one year ago):

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: 9 years ago by: Registered User

Jump to the latest result

jQuery

pure JS

jQuery DIV

pure JS DIV

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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