Benchmark: lodash merge vs jquery extend

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js" integrity="sha256-3kEfn+8v7t7DmcwargHKPeQZ7tz2jn5OCS4gVNtyMJo=" crossorigin="anonymous"></script>
<script>
window._1 = _.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.2/lodash.min.js" integrity="sha256-rKk2QnJsnOCsuS8oSzkedgInNJbYmA09J0w26nVBpss=" crossorigin="anonymous"></script>
<script>
window._2 = _.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js" integrity="sha256-v2PESRFA3ocCdVenwVx0H2XIPZgnQ0exBaBqIOBc540=" crossorigin="anonymous"></script>
<script>
window._3 = _.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js" integrity="sha256-8E6QUcFg1KTnpEU8TFGhpTGHw5fJqB9vCms3OhAYLqw=" crossorigin="anonymous"></script>
<script>
window._4 = _.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
window.jQuery1 = window.$1 = $.noConflict(true);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
window.jQuery2 = window.$2 = $.noConflict(true);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
window.jQuery3 = window.$3 = $.noConflict(true);
</script>

Script Preparation code:

var obj1 = {
  a: {
    a1: 12,
    a2: 32
  },
  b: {
    b1: 123
  },
  c: 13
};
var obj2 = {
  a: {
    a1: 22,
    a2: 42,
    a3: 200
  },
  b: {
    b2: 13
  },
  c: 15
};

Tests:

jQuery 1: extend
$1.extend(true, {}, obj1, obj2);
jQuery 2: extend
$2.extend(true, {}, obj1, obj2);
jQuery 3: extend
$3.extend(true, {}, obj1, obj2);
Lodash 1: merge
_1.merge({}, obj1, obj2);
Lodash 2: merge
_2.merge({}, obj1, obj2);
Lodash 3: merge
_3.merge({}, obj1, obj2);
Lodash 4: merge
_4.merge({}, obj1, obj2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery 1: extend
jQuery 2: extend
jQuery 3: extend
Lodash 1: merge
Lodash 2: merge
Lodash 3: merge
Lodash 4: merge

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
jQuery 1: extend	402187.2 Ops/sec
jQuery 2: extend	400768.9 Ops/sec
jQuery 3: extend	278686.1 Ops/sec
Lodash 1: merge	329278.6 Ops/sec
Lodash 2: merge	193775.4 Ops/sec
Lodash 3: merge	241140.2 Ops/sec
Lodash 4: merge	222762.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is tested in the provided JSON and explain the options compared, their differences, and why Lodash might be faster than jQuery.

**Overview**

The test suite consists of six tests:

1. `jQuery 1: extend`
2. `jQuery 2: extend`
3. `jQuery 3: extend`
4. `Lodash 1: merge`
5. `Lodash 2: merge`
6. `Lodash 3: merge`
7. `Lodash 4: merge`

These tests are executed on a Chrome browser with different versions (106, 107) and platforms (Desktop).

**jQuery vs. Lodash**

The main difference between jQuery's `.extend()` method and Lodash's `merge()` function is the approach they take to merging objects.

* jQuery's `.extend()` method:
	+ Creates a new object that inherits properties from the source objects.
	+ Overwrites existing properties with the same name in the destination object.
	+ Returns the resulting object.
* Lodash's `merge()` function:
	+ Creates a shallow copy of the source object and returns it.
	+ Does not overwrite existing properties with the same name (unless specified).

**Performance**

Based on the benchmark results, Lodash appears to be faster than jQuery in most cases. This might be due to several reasons:

* **Less overhead**: Lodash's `merge()` function has less overhead compared to jQuery's `.extend()` method, which involves more complex logic and additional checks.
* **More efficient data structure**: Lodash uses a shallow copy of the source object, whereas jQuery creates a new object that inherits properties from the source objects. This can result in more memory allocation and deallocation, leading to performance overhead.
* **Fewer property lookups**: When merging objects using `.extend()`, jQuery needs to perform additional property lookups to check for existing keys. Lodash's `merge()` function avoids these lookups by using a shallow copy of the source object.

**jQuery 1: extend vs. Lodash**

In this test, `jQuery 1` is likely a reference to an older version of jQuery (e.g., v1.x) that still uses the `.extend()` method with overwriting behavior. In contrast, `Lodash 1` is a newer version of Lodash that uses the optimized `merge()` function.

This test demonstrates that the latest versions of both libraries have improved performance.

**Lodash's optimization**

The fact that Lodash provides multiple versions (1-4) of the `merge()` function suggests that the library has undergone significant optimization and refinement over time. The latest versions are likely to be faster and more efficient, as demonstrated by the benchmark results.

Overall, Lodash appears to have an edge in terms of performance due to its optimized implementation and reduced overhead compared to jQuery's `.extend()` method.

Related benchmarks:

lodash merge vs jquery extend (version: 0)

lodash merge vs jquery extend

Comparing performance of: jQuery 1: extend vs jQuery 2: extend vs jQuery 3: extend vs Lodash 1: merge vs Lodash 2: merge vs Lodash 3: merge vs Lodash 4: merge

Created: 7 years ago by: Registered User

Jump to the latest result

jQuery 1: extend

jQuery 2: extend

jQuery 3: extend

Lodash 1: merge

Lodash 2: merge

Lodash 3: merge

Lodash 4: merge

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