I metodi del DOM sono più veloci di quelli jQuery nel creare elementi

Circolano falsi miti riguardo alla performance del DOM rispetto ai metodi di jQuery. In realtà questi miti sono privi di fondamento, in quanto a ben vedere i metodi del DOM sono implementati nel linguaggio nativo del browser e quindi più veloci di qualsiasi implementazione JavaScript.

Ecco un esempio che lo dimostra:

$(function() {
	var time = document.querySelector('#time'),
		output = document.querySelector('#output'),
		max = 1000;
	$('#dom').one('click', function() {
		$('#output').empty();
		var startTime = +new Date;
		for(var i = 0; i < max; ++i) {
			if(i == (max - 1)) {
				var endTime = +new Date;
				$(time).text((endTime - startTime) + ' ms');
			}
			var e = document.createElement('div');
			var t = document.createTextNode('Test');
			e.appendChild(t);
			output.appendChild(e);
		}
	});
	$('#jquery').one('click', function() {
		$('#output').empty();
		var startTime = +new Date;
		for(var i = 0; i < max; ++i) {
			if(i == (max - 1)) {
				var endTime = +new Date;
				$(time).text((endTime - startTime) + ' ms');
			}
			var e = $('<div/>');
			e.text('Test').appendTo('#output');
		}
	});
});