Firefoxでこのjavascript機能が遅いのはなぜですか？

Question

この機能は、Webサイトから適応されました：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; 
} 

私はwindow.resize上の他の機能の一部として、この機能を実行していますし、それが現在のSafariや上に存在しないのFirefox 3.6でのパフォーマンスの問題を引き起こしていますクロム。 Firefoxのプロファイラは、私がこの機能で最も多くの時間を費やしていると言います。なぜそうなのか不思議です。

この作業をすべて実行せずにjavascriptでemサイズを取得する方法はありますか？私はユーザーがそれを変更したときにサイズを再計算したいと思います。

Answer 1

は、機能だけで言い換える

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

可能性のように、あなただけのことができますようですdivを作成してサイズを変更するのではなく、要素の計算されたフォントサイズを取得します。

Answer 2

は、（それが一度だけ実行されるように、隠し値と同じ機能です）、これを試してみてください：

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); 
    }; 
};