The limits of jQuery with large data structures

A couple of days ago a friend of mine asked me for some help with a huge HTML table featuring thousands rows. The jQuery script which he was using crashed while processing the table and its contents. This led me to create a test case to check what is the actual performance limit of jQuery with big data structures.

The following PHP code creates a table with 30,000 rows and 90,000 table cells:

<?php
$total = 30000;


?>
<table>
	<tr>
		<th scope="col">A</th>
		<th scope="col">B</th>
		<th scope="col">C</th>
	</tr>
<?php
for($i = 0; $i < $total; $i++) {
	echo '<tr>' . "\n";
	echo '<td>' . ($i + 1) . '</td>' . "\n";
	echo '<td>' . ($i + 1) . '</td>' . "\n";
	echo '<td>' . ($i + 1) . '</td>' . "\n";
	echo '</tr>' . "\n";

}

?>
</table>

The first test is on the selector engine when it has to deal with large structures:

$('td:nth-child(even)', 'table').text('0'); // works (Chrome)

The second test is a more complex interaction involving a loop and content manipulation:

$('td', 'table').each(function(i) {
   var $td = $(this);
   var n = Number($td.text());
   $td.text(n + i);
});

In Chrome we get the following error, but the browser doesn't crash:

Uncaught RangeError: Maximum call stack size exceeded

Conversely, if you try the same approach with a traditional JavaScript and DOM routine, the browser crashes:

var td = document.getElementsByTagName('td'),
        len = td.length,
        i;
    
    for( i = 0; i < len; ++i) {
    	var cell = td[i];
    	var text = cell.firstChild.nodeValue;
    	var n = Number(text);
    	var sum = n + 1;
    	cell.innerHTML = sum;
    
    } 

The file generated by the PHP script is 1,7 Mb in size. Although it's highly improbable to find such documents on the web, this test clearly shows what are the limits of jQuery with large data structures.