Benchmark: jquery-1.11.0 versus jquery-3.7.1 - bind x on

HTML Preparation code:

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benchmark jQuery 1.11.0 vs 3.7.1</title>
    <style>
        .highlight {
            background-color: yellow;
        }
        .item {
            padding: 5px;
            border: 1px solid #000;
            margin: 2px;
        }
    </style>
</head>
<body>
    <h1>Benchmark jQuery 1.11.0 vs 3.7.1</h1>
    
    <!-- Container para adicionar muitos elementos -->
    <div id="container"></div>
        
    <!-- Resultados do Benchmark -->
    <p id="result-jquery-1"></p>
    <p id="result-jquery-3"></p>
    
    <!-- Inclua a versão 1.11.0 do jQuery -->
    <script id="jquery-1" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- Inclua a versão 3.7.1 do jQuery -->
    <script id="jquery-3" src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script>
</body>
</html>

Script Preparation code:

function setupElements() {
  const container = $('#container');
  container.empty();

  // Cria muitos elementos para manipulação
  for (let i = 0; i < 100000; i++) {
    container.append('<div class="item">Item ' + i + '</div>');
  }
}

// Benchmark com jQuery 1.11.0 usando .bind()
function runBenchmarkWithBind() {
  setupElements();
  const start = performance.now();
  $('.item').bind('click', function() {
    $(this).toggleClass('highlight');
  });
  const end = performance.now();
  const duration = end - start;
  document.getElementById('result-jquery-1').textContent = 
    `Versão 1.11.0 (.bind) levou ${duration.toFixed(2)} ms para vincular eventos a 10.000 elementos.`;
}

// Benchmark com jQuery 3.7.1 usando .on()
function runBenchmarkWithOn() {
  setupElements();
  const start = performance.now();
  $('.item').on('click', function() {
    $(this).toggleClass('highlight');
  });
  const end = performance.now();
  const duration = end - start;
  document.getElementById('result-jquery-3').textContent = 
    `Versão 3.7.1 (.on) levou ${duration.toFixed(2)} ms para vincular eventos a 10.000 elementos.`;
}

Tests:

1.11.0
runBenchmarkWithBind()
3.7.1
runBenchmarkWithOn();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1.11.0
3.7.1

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

Browser/OS: Chrome 127 on Linux

View result in a separate tab

Test name	Executions per second
1.11.0	0.6 Ops/sec
3.7.1	0.7 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 explanation of what's being tested in this benchmark.

**Benchmarked Libraries and Functions**

The benchmark is comparing two versions of jQuery: 1.11.0 and 3.7.1. The focus is on the `.bind()` and `.on()` methods for attaching event listeners to elements.

**`.bind()` vs `.on()`**

In the code, we see that both `runBenchmarkWithBind` and `runBenchmarkWithOn` functions are used to benchmark these two versions of jQuery. Here's a brief explanation of what each method does:

* `.bind()`: This method attaches an event listener to an element and returns a new function that has the original context (i.e., the element being bound) set.
* `.on()`: This method attaches an event listener to an element and returns a function that can be used to remove or modify the event listener.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

* `.bind()`:
	+ Pros: Can be faster for some use cases, as it uses a more efficient internal implementation.
	+ Cons: Can lead to issues with context preservation, especially when dealing with multiple event listeners attached to the same element.
* `.on()`: This method is generally considered better practice than `.bind()` because it's more flexible and easier to remove or modify event listeners later. However, in some cases, it might be slightly slower due to additional overhead.

**Other Considerations**

When using these methods, keep in mind that:

* The browser context (e.g., Chrome 127) can affect the results.
* The device platform (Desktop) and operating system (Linux) may influence performance differences between versions of jQuery.
* The number of executions per second (0.6866559982299805 for `3.7.1` and 0.5554527044296265 for `1.11.0`) indicates the speed at which each version can process events.

**Alternative Methods**

If you're looking for alternative methods to attach event listeners, consider:

* Using arrow functions or methods that preserve context (e.g., `.arrow()`).
* Utilizing more modern JavaScript features like `EventListener` or `addEventListener()` with a closure.
* Leveraging libraries or frameworks that abstract away these details.

Please note that this is not an exhaustive list of alternatives, and the best approach will depend on your specific use case and requirements.

Related benchmarks:

jquery-1.11.0 versus jquery-3.7.1 - bind x on (version: 2)

Comparação entre as versões jquery-1.11.0 e jquery-3.7.1- bind x on

Comparing performance of: 1.11.0 vs 3.7.1

Created: one year ago by: Registered User

Jump to the latest result

1.11.0

3.7.1

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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