Почему эта функция javascript такая медленная в Firefox?

Question

Эта функция была адаптирована с сайта: 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, и это вызывает проблемы с производительностью в Firefox 3.6, которых нет в текущих Safari или Chrome. Профилировщик Firefox говорит, что я провожу большую часть времени в этой функции, и мне интересно, почему это так.

Есть ли способ получить размер em в javascript, не выполняя всю эту работу? Я хотел бы пересчитать размер при изменении размера, если пользователь изменил его.

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