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的分析师说我花了最多的时间在这个功能上，我很好奇为什么会这样。

有没有办法在不完成所有这些工作的情况下在javascript中获取em大小？我想重新计算调整大小，以便用户更改它。

Answer 1

似乎该功能可能只是

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

换句话说，您只需获取元素的计算字体大小，而不是创建div并调整大小。

Answer 2

试试这个（它的值与stashed相同，所以它只运行一次）：

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

为什么这个javascript函数在Firefox上这么慢？

2 个答案: