Warum ist diese JavaScript-Funktion bei Firefox so langsam?

Question

Diese Funktion wurde von der Website angepasst: http://eriwen.com/javascript/measure-ems-for-layout/

function getEmSize(el) { 
    var tempDiv = document.createElement("div"); 
    tempDiv.style.height = "1em"; 
    el.appendChild(tempDiv); 
    var emSize = tempDiv.offsetHeight; 
    el.removeChild(tempDiv); 
    return emSize; 
} 

ich diese Funktion als Teil einer anderen Funktion auf window.resize leite, und es verursacht Leistungsprobleme auf Firefox 3.6, die auf aktuelle Safari nicht existieren oder Chrom. Der Profiler von Firefox sagt, dass ich die meiste Zeit in dieser Funktion verbringe, und ich bin neugierig, warum das so ist.

Gibt es eine Möglichkeit, die Größe von em in Javascript zu erhalten, ohne all diese Arbeit zu tun? Ich möchte die Größe auf Größe neu berechnen, wenn der Benutzer es geändert hat.

Answer 1

Scheint, wie die Funktion nur

function getEmSize(el) { 
    return Number(getComputedStyle(el, "").fontSize.match(/(\d+)px/)[1]); 
} 

Mit anderen Worten könnte, können Sie einfach Ermitteln Sie die berechnete Schriftgröße des Elements, anstatt ein div zu erstellen und zu skalieren.

Answer 2

Versuchen Sie dies (es ist die gleiche Funktion mit dem Wert gebunkert, so dass es nur einmal ausgeführt wird):

var getEmSize = function() { 
    var underlyingFunction = function(el) { 
     var tempDiv = document.createElement("div"); 
     tempDiv.style.height = "1em"; 
     el.appendChild(tempDiv); 
     var emSize = tempDiv.offsetHeight; 
     el.removeChild(tempDiv); 
     underlyingFunction = function() { 
     return emSize; 
     }; 
     return emSize; 
    }; 
    return function(el) { 
     return underlyingFunction(el); 
    }; 
};