JavaScript: usare la tecnica memoizer per aumentare la performance della creazione di elementi del DOM

La tecnica chiamata memoizer in JavaScript è un modo per ottimizzare la performance di alcune routine. In sostanza questa tecnica prevede la creazione di un oggetto che funga da cache a cui si può accedere per reperire i dati. Possiamo applicare questa tecnica alla creazione di elementi del DOM. Vediamone insieme i dettagli.

Ecco un'implementazione pratica:

var create = function(tagName) {

	this.memory = this.memory || {}; // oggetto cache 
    if (tagName in this.memory) { 
       return this.memory[tagName].cloneNode(true); 
    } else { 
        this.memory[tagName] = document.createElement(tagName); 
        return this.memory[tagName].cloneNode(true); 
    } 



};

In pratica se l'elemento è già presente in cache viene clonato, altrimenti viene creato ex-novo ed aggiunto alla cache. Esempio:

var newH2Tag = create('h2'); 
var newPTag =  create('p');
var anotherH2Tag = create('h2'); // Usa il duplicato