Question

如果要显示在屏幕上，我需要能够找到字符串变量的宽度。我发现这样做的技术需要使用span，用有问题的字符串填充它，然后测量span的宽度。不幸的是，我需要在加载页面时计算字符串的宽度几百次，以确定屏幕上各种元素的尺寸。对此函数的现有版本的调用大约占我执行时间的95％，我想知道是否有更快的方法来计算字符串的宽度，这可能不使用DOM，我假设是为什么这功能是我的页面瓶颈。我用来计算字符串宽度的代码现在看起来像这样：

<script>
String.prototype.strWidth = function(){
    $("#ruler").html(this);
    return $("#ruler").width();
};
</script>
<span id="ruler" style="visibility:hidden;white-space:nowrap"></span>

Answer 1

你正在寻找画布＆＃39; measureText方法。

我知道w3并不是最好的，但是这个链接解释了它：http://www.w3schools.com/tags/canvas_measuretext.asp

在你的DOM中有一个隐藏的画布：

<canvas id="secret-canvas"></canvas>

var stringBounds = function(string, style) {
    var canvas = document.getElementById("secret-canvas");
    var context = canvas.getContext("2d");
    // Specify the styling
    context.font = style;
    return context.measureText(string);
}

console.log(stringBounds("hello???", "12px sans-serif").width);

为了提高性能，您可以在全局范围内一次创建对context的引用，然后在stringBounds中使用该引用，而不是每次都计算context。

Answer 2

为了提高效率，您可以简单地更改jQuery选择器的使用频率：

<script>
String.prototype.strWidth = (function() {
    // Keep variable in closed-over function (don't pollute global scope)
    var $ruler = $('<span>');
    return function() {
        $ruler.html(this);
        return $ruler.width();
    };
})();
</script>

编辑：使用虚拟span

如何使用JS有效地找到字符串的宽度

2 个答案: