提高jQuery函数的效率

Question

此函数中的while语句在IE/firefox中运行太慢(阻止页面加载4-5秒)，但在safari中运行得很快...

它测量页面上文本的像素宽度并截断，直到文本达到理想宽度：

function constrain(text, ideal_width){

    $('.temp_item').html(text);
    var item_width = $('span.temp_item').width();
    var ideal = parseInt(ideal_width);
    var smaller_text = text;
    var original = text.length;

    while (item_width > ideal) {
        smaller_text = smaller_text.substr(0, (smaller_text.length-1));
        $('.temp_item').html(smaller_text);
        item_width = $('span.temp_item').width();
    }

    var final_length = smaller_text.length;
    if (final_length != original) {
        return (smaller_text + '…');
    } else {
       return text;
    }
}

有什么方法可以提高性能吗？如何将其转换为冒泡排序函数？

谢谢!

Answer 1

将对$()的调用移到循环之外，并将其结果存储在一个临时变量中。除了调用.html()之外，运行该函数将是代码中最慢的事情。

他们非常非常努力地使库中的选择器引擎变得更快，但与正常的javascript操作(比如在本地作用域中查找变量)相比，它仍然很慢，因为它必须与dom交互。特别是在使用这样的类选择器时，jquery基本上必须遍历文档中的每个元素，查看每个类属性并在其上运行regex。每一次循环！尽可能多地从你的紧凑循环中获得更多的东西。Webkit运行速度很快，因为它有.getElementsByClassName，而其他浏览器没有。(目前还没有)。

Answer 2

您可以使用binary search，而不是一次删除一个字符，直到找到理想的宽度。

Answer 3

我发现问题在于您不断地修改循环中的DOM，通过设置temp_item的html，然后重新读取宽度。

我不知道您的问题的背景，但从我的角度来看，试图通过测量呈现的元素来调整布局不是一个好的做法。

也许你可以从不同的角度来处理这个问题。截断到固定宽度是很常见的。

其他可能性(hack?)如果没有选择，可以使用容器元素的overflow css属性并将…在文本旁边的其他元素中。不过，我建议你重新考虑用你想要的方式解决问题的必要性。

雨果