JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
		Please open your console to view status messages.
	</h3>
	<p>
		Use Chrome's "Profile" tool to take a snapshot of the heap BEFORE pressing button 1.
		Then take another snapshot after each of the 2 tests (for clarity, don't run them both at the same time).
	</p>
	
	<hr />
	
	<p>
		In a loop iterating 100,000 times, create a temporary, unattached element with 10 children (one child will have a data-name attribute).
	</p>
	<p>
		Once created, .find() all child elements and loop over them with .each().
	</p>
	<p>
		In the each loop, get .data( "name" ) (no need to store it or do anything with it).
	</p>
	<p>
		Memory usage will be substantially higher once the test completes. The size of the leak seems to depend on the size of the element you creating.
	</p>

	<p>
		<button type="button" class="start_test_1">Run test #1</button>
	</p>

	<hr />

	<p>
		Identical to test #1, except don't get .data( "name" );
	</p>
	<p>
		There should be no memory leak.
	</p>

	<p>
		<button type="button" class="start_test_2">Run test #2</button>
	</p>

JavaScript

function leak()
{
	console.log( "Running test 1 now..." );

	for ( var counter = 0; counter < 100000; counter++ )
	{
		var j_html = jQuery( "<div><p data-name='0'></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>" );

		j_html.find( "*" ).each( function ( i ) { jQuery( this ).data( "name" ); } );
	}

	console.log( "Test 1 completed" );
}

jQuery( "button.start_test_1" ).on( "click", leak );

function no_leak()
{
	console.log( "Running test 2 now..." );

	for ( var counter = 0; counter < 100000; counter++ )
	{
		var j_html = jQuery( "<div><p data-name='0'></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div>" );

		j_html.find( "*" ).each( function ( i ) { jQuery( this ); } );
	}

	console.log( "Test 2 completed" );
}

jQuery( "button.start_test_2" ).on( "click", no_leak );