Run results for: Test JQuery create new nodes vs reuse nodes

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063

Browser: Chrome 52

Operating system: Windows

Device Platform: Other

Date tested: 6 years ago

Test name	Executions per second
Reuse	8169.0 Ops/sec
Recreate	2939.4 Ops/sec
Resuse real work	1589.3 Ops/sec
Recreate real work	2552.0 Ops/sec
Recreate opti	2829.4 Ops/sec

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;

Run results for: Test JQuery create new nodes vs reuse nodes

Reuse

Recreate

Resuse real work

Recreate real work

Recreate opti