const template = document.createElement('template');
template.innerHtml = '<tr><td class="col-md-1" /><td class="col-md-4"><a /></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true" /></a></td><td class="col-md-6" /></tr>';
const template = document.createElement('template');
template.innerHtml = '<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>';
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Self Closing Tags | |
Closed Tags |
Test name | Executions per second |
---|---|
Self Closing Tags | 1984544.6 Ops/sec |
Closed Tags | 1897406.0 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.
Benchmark Definition
The provided benchmark definition is quite straightforward. It tests two different approaches for creating HTML elements using template literals in JavaScript.
The "Script Preparation Code" and "Html Preparation Code" are empty, which means that these values are not relevant to the benchmark itself. The script preparation code refers to any code that might be executed before running the test, while the html preparation code refers to any HTML code generated by the script. In this case, both are blank, indicating that they do not affect the outcome of the benchmark.
Individual Test Cases
The two individual test cases represent the "Self Closing Tags" and "Closed Tags" scenarios.
<tr><td class="col-md-1" /><td class="col-md-4"><a /></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true" /></a></td><td class="col-md-6" /></tr>
. The self-closing
tags are used, which means that the HTML element is closed immediately after its opening tag. In this case, the <a>
and <span>
elements do not have explicit closing tags.<tr><td class="col-md-1" ></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6" ></td></tr>
. Here, the HTML elements are closed using explicit closing tags (</td>
).Options Compared
The two test cases compare the performance of self-closing and explicitly closed HTML elements.
Pros and Cons
Library
None of the test cases use any specific JavaScript library. The benchmark focuses solely on the inherent differences between self-closing and explicitly closed HTML elements in JavaScript template literals.
Special JS Feature or Syntax
There is no special JavaScript feature or syntax being tested in this benchmark. It's purely focused on comparing two different approaches to creating HTML elements using template literals.
Other Alternatives
If you're interested in exploring more benchmarks, MeasureThat.net offers a wide range of tests covering various aspects of JavaScript performance and optimization. Some examples include:
Feel free to explore these and other benchmarks on MeasureThat.net to gain a deeper understanding of JavaScript performance and optimization.