javascript - jQuery 脚本效率

Question

我在数百个 div 上使用了以下名为 textfill 的 jQuery 函数。基本上它会调整内部文本的大小以适应封闭的 div，使文本的字体大小最大，因此较长的文本比较短的文本小，但处于最大字体大小，它们可以在不从 div 溢出的情况下使用。

; (function($) {
    /**
    * Resizes an inner element's font so that the inner element completely fills the outer element.
    * @version 0.1
    * @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
    * @return All outer elements processed
    * @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
    */
    $.fn.textfill = function(options) {
        var defaults = {
            maxFontPixels: 40,
            innerTag: 'span'
        };
        var Opts = jQuery.extend(defaults, options);
        return this.each(function() {
            var fontSize = Opts.maxFontPixels;
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var maxHeight = $(this).height();
            var maxWidth = $(this).width();
            var textHeight;
            var textWidth;
            do {
                ourText.css('font-size', fontSize);

                textHeight = ourText.height();
                textWidth = ourText.width();
                fontSize = fontSize - 1;
            } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
            var pos = (maxHeight-textHeight)/2;
            ourText.css('top', pos +'px');
        });
    };
})(jQuery);

因为我在数百个看起来像这样的 div 上运行这个脚本:

<div class="textDiv"><span>text appears here</span></div>

同时使用:

$('.textDiv').each(function() { $(this).textfill({ maxFontPixels: 28 })});  

这需要 40 到 70 秒，具体取决于 div 的数量。我迫切需要调整代码以使其运行得更快。我已经尝试了最后两个小时，但似乎无法让它运行得更快。有人可以帮忙吗？

编辑:

从评论中获取了一些输入并将代码更改为:

var items = document.getElementsByClassName("textDiv");
for (var i = items.length; i--;) {
    $(items[i]).textfill({ maxFontPixels: 28 });
}

它似乎快了一点，但仍然很慢。

Answer 1

$('.textDiv').each(function() { $(this).textfill({ maxFontPixels: 28 })});

您使用的函数有误。每个(适当的)插件确实已经在 jQuery 集合上工作，并且内置了 each，因此您不需要将它放在调用周围。就这样

$('.textDiv').textfill({ maxFontPixels: 28 });

但我认为这不是您的实际问题；循环非常快，即使是一百个项目也不会花费几秒钟。问题是

            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();

在循环中(实际上是在两个嵌套循环中)，因为它需要浏览器进行完全重排。您需要尽量减少对这部分的调用，例如通过使用某种二进制搜索 ( bisection ) 和/或应用 interpolation近似字体大小的度量(例如，字符数除以面积？)以获得良好的起始值。

除此之外，可能还有其他小的优化:

• 缓存 $(this)
• $(Opts.innerTag + ':visible:first', this); 看起来像一个相当复杂的选择器。这真的有必要吗，你期待隐藏的元素吗？将这些额外内容移动到选项中，并默认使用 $(this).children().first()。
• 我不确定您的 CSS，但是您如何设置 div 的尺寸(您检索为 maxHeight/maxWidth)？为了减少更改内部字体大小时的回流成本，额外的 overflow:hidden 可以提供帮助。