Benchmark: Test JQuery create new nodes vs reuse nodes

HTML Preparation code:

<!--script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script-->
<script src="https://slot1-images.wikia.nocookie.net/__load/-/debug%3Dfalse%26lang%3Den%26only%3Dscripts%26skin%3Doasis%26version%3D1512666205-20171207T164500Z/jquery"></script>
<div id="bob"></div>
<!-- Main issue was properly timing reflow to fix a few size and offset test bugs, and shortening the code. And there was a curiously about any real world performance issues.

The final position code for left, top depends on the proper final css classes placed on the tooltip first and reflowed first before the offset calculations. The user is allowed a custom place a custom css class and it was being added after reflow caused the position to bug. These tests validate near real performance of the various approaches.-->

Script Preparation code:

var html = '<div class="tipsie" role="tooltip">' +
        '<div class="tipsie-arrow"></div>' + 
        '<div class="tipsie-inner"></div></div>';
var title = 'A short tip title';
var gravity = 'sw';
var left = 0, top = 0;
var opacity = '100';
var customClass = 'map-tipsie-text';

var $template = null;
var $tooltip = null;
var gravityClassOld = null;
var customClassOld = null;
var $bob = $('#bob');

Tests:

Reuse
var $this = $tooltip if (!$this) $this = $tooltip = $(html); $this .remove() .appendTo($bob);
Recreate
var $this = $(html); if ($tooltip) $tooltip.remove(); $tooltip = $this; $this .appendTo($bob);
Resuse real work
var $this = $tooltip if (!$this) $this = $tooltip = $(html); $this.find('.tipsie-inner').text(title); $this.remove() .css({top: 0, left: 0, visibility: 'hidden', display: 'block'}) .attr( 'aria-hidden', 'true' ) .appendTo($bob); if (customClassOld) $this.removeClass(customClassOld); customClassOld = customClass; $this.addClass(customClassOld); if (gravityClassOld) $this.removeClass(gravityClassOld); gravityClassOld = 'tipsie-' + gravity; $this.addClass('tipsie-' + gravity); $this.css({top: top, left: left}); $this.css({visibility: 'visible', opacity: 100}) .attr( 'aria-hidden', 'false' );
Recreate real work
var html2 = '<div class="tipsie tipsie-' + gravity + ' ' + customClass + '" ' + 'role="tooltip" aria-hidden="false" ' + 'style="top: ' + top + '; left: ' + left + '; visibility: visible; display: block; opacity: ' + opacity + ';">' + '<div class="tipsie-arrow"></div>' + '<div class="tipsie-inner">' + title + '</div></div>'; var $this = $(html2); if ($tooltip) $tooltip.remove(); $tooltip = $this; $this.appendTo($bob);
Recreate opti
if (!$template) { var html2 = '<div class="tipsie" role="tooltip" aria-hidden="false" style="">' + '<div class="tipsie-arrow"></div>' + '<div class="tipsie-inner"></div></div>'; $template = $(html2); } var $this = $template.clone(); $this.addClass('tipsie-' + gravity + ' ' + customClass); $this.find('.tipsie-inner').text(title); $this.appendTo($bob); $this.css({ top: top, left: left, opacity: opacity }); if ($tooltip) $tooltip.remove(); $tooltip = $this;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Reuse
Recreate
Resuse real work
Recreate real work
Recreate opti

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark measures the performance of creating new jQuery tooltips versus reusing existing ones. The tests are designed to simulate the creation of tooltips with different properties, such as position, visibility, and custom CSS classes.

**Test Cases**

There are four test cases:

1. **Reuse**: Creates a new tooltip by removing an existing one and appending it to a container.
2. **Recreate**: Creates a new tooltip from scratch using HTML and appends it to the same container.
3. **Resuse real work**: Creates a new tooltip by reusing an existing one (by cloning) and appends it to the same container.
4. **Recreate opti**: Similar to Reuse, but creates a new tooltip with optimized HTML and CSS.

**Library Used**

The benchmark uses jQuery as the library for creating and manipulating DOM elements.

**Device and Browser**

The benchmark is run on Chrome 52, a Windows 10 device, using the Edge browser. The raw UA string indicates that this is an Edge browser running in Chromium mode (aka ChrimEdge).

**Performance Metrics**

The benchmark measures the number of executions per second (ExecutionsPerSecond) for each test case.

**What's Being Tested**

Here's what's being tested:

* Creating new tooltips vs reusing existing ones: Which approach is faster and more efficient?
* Optimizations in Reuse, Recreate opti, and Resuse real work: Are these optimizations providing a performance boost?

**Interpretation of Results**

The results show that the **Reuse** and **Recreate opti** test cases are significantly faster than the others. This suggests that creating new tooltips from scratch or reusing existing ones with optimized HTML and CSS is faster than appending an existing tooltip to a container.

In contrast, the **Recreate** test case is slower than the Reuse test case, which might indicate that the overhead of creating a new HTML document is significant.

The **Resuse real work** test case is slower than all other test cases, which might be due to the overhead of cloning an existing element or the fact that it's not optimized like Recreate opti.

Overall, the benchmark suggests that Reusing existing tooltips or creating them with optimized HTML and CSS can provide a significant performance boost compared to appending an existing tooltip to a container.

Related benchmarks:

Test JQuery create new nodes vs reuse nodes (version: 15)

Comparing performance of: Reuse vs Recreate vs Resuse real work vs Recreate real work vs Recreate opti

Created: 8 years ago by: Registered User

Jump to the latest result

Reuse

Recreate

Resuse real work

Recreate real work

Recreate opti

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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