<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
let element = $(`<div><a id="tr_1" data-target="tr_5" aria-controls="tr_6">
<svg id="tr_2"></svg>
<span id="tr_3"></span>
<div id="tr_4" data-target="tr_7">
</div>
</div>`);
let element = $($.parseHTML(`<div><a id="tr_1" data-target="tr_5" aria-controls="tr_6">
<svg id="tr_2"></svg>
<span id="tr_3"></span>
<div id="tr_4" data-target="tr_7">
</div>
</div>`)[0]);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
without parse | |
with parseHTML |
Test name | Executions per second |
---|---|
without parse | 16509.3 Ops/sec |
with parseHTML | 1652.1 Ops/sec |
I'll explain the benchmark in detail.
What is being tested?
MeasureThat.net is testing the speed of creating jQuery objects from strings, specifically with and without using the $.parseHTML()
method.
The tests are comparing the execution time of two approaches:
$()
function.$.parseHTML()
method, followed by accessing the parsed HTML using [0]
.Options compared:
$()
to create a jQuery object directly from a string (without parsing).$.parseHTML()
to parse an HTML string first and then creating a jQuery object from it, followed by accessing the parsed HTML using [0]
.Pros and cons of each approach:
Library used:
The library being tested is jQuery, a popular JavaScript library for DOM manipulation and event handling.
Special JS feature or syntax:
There is no special JavaScript feature or syntax being tested in this benchmark. The focus is on comparing the performance of two approaches to creating jQuery objects from strings.
Other alternatives:
If you're interested in exploring alternative ways to create jQuery objects, you could consider using other libraries like:
document.createElement()
and manipulating the DOM manually)However, these alternatives are not being tested on MeasureThat.net.
I hope this explanation helps!