Run results for: jquery-1.11.0 versus jquery-3.7.1 - bind x on

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser: Chrome 127

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

1.11.0

507/s

3.7.1

495/s

View exact numbers

Test name	Executions per second
✓ 1.11.0	507 Ops/sec
3.7.1	495 Ops/sec

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

Run results for: jquery-1.11.0 versus jquery-3.7.1 - bind x on

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

1.11.0

3.7.1