<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div id="target">Hello World</div>
for(let i = 0; i < 10000; i++) {
$('#target').append($('<div />').addClass('test-div'));
}
for(let i = 0; i < 10000; i++) {
const e = document.createElement('div');
e.className = 'test-div';
document.getElementById('target').appendChild(e);
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
jQuery | |
VanillaJS |
Test name | Executions per second |
---|---|
jQuery | 5.3 Ops/sec |
VanillaJS | 37.4 Ops/sec |
Let's break down the provided benchmark and its components.
Benchmark Definition
The benchmark definition is a JSON object that contains two test cases: jQuery vs Vanilla JS Speed Test - CNC. Each test case has a unique name, description, script preparation code, and HTML preparation code.
Script Preparation Code and HTML Preparation Code
The script preparation code is empty for both test cases, which means that the script will be loaded from an external source (as seen in the HTML preparation code).
For jQuery, the HTML preparation code includes a reference to jQuery's CDN (Content Delivery Network), which loads the jQuery library.
For Vanilla JS, there is no additional library loaded, as it relies on the browser's native DOM API.
Options Compared
The two test cases compare the performance of using jQuery versus Vanilla JS for a specific task: appending 10,000 HTML elements to an element with the id "target".
Pros and Cons of Different Approaches
Using jQuery:
Pros:
Cons:
Using Vanilla JS:
Pros:
Cons:
Library and Purpose
In this benchmark, jQuery is used as a library to simplify DOM manipulation. Its primary purpose is to provide a convenient interface for working with the Document Object Model (DOM).
Special JS Feature or Syntax
Neither of the test cases uses any special JavaScript features or syntax that would be unique to these two approaches.
Other Alternatives
If you wanted to add more test cases, some alternatives could include:
These additional tests would provide a more comprehensive view of the performance characteristics of JavaScript libraries and approaches in different contexts.