Javascript 提高jQuery函数的效率

此函数中的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;
    }
}

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

---

谢谢

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

---

他们非常努力地使库中的选择器引擎快速运行，但与常规javascript操作（如在局部范围内查找变量）相比，仍然慢得多，因为它必须与dom交互。特别是如果使用这样的类选择器，jquery必须循环遍历文档中的每个元素，查看每个类属性并在其上运行正则表达式。每走一圈！尽可能多地从你的紧环中取出这些东西。Webkit运行得很快，因为它有.getElementsByClassName，而其他浏览器没有。但是。

在找到理想宽度之前，您可以使用一个字符，而不是一次删除一个字符

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

我不知道问题的背景，但在我看来，通过测量渲染元素来调整布局并不是一个好的做法

也许你可以从另一个角度来处理这个问题。截断为固定宽度是常见的

其他可能的黑客？如果没有选择，可以使用container元素的overflow css属性，并将…放在文本旁边的其他元素中。尽管我建议你重新思考一下，按照你的意愿解决问题的必要性

---

Hugo

除了Breton的建议之外，另一种加速算法的方法是对文本长度进行二进制搜索。当前，一次将长度减少一个字符-这在字符串长度中是启用的。取而代之的是，使用一个将是OlogN的搜索

粗略地说，是这样的：

function constrain(text, ideal_width){

。。。

---

}

需要注意的一点是，每次向DOM添加内容或更改节点中的html时，页面都必须重新绘制自身，这是一项昂贵的操作。将任何HTML更新移到循环之外可能有助于大大加快速度

正如其他人所提到的，您可以将调用移到$to循环之外。您可以创建对元素的引用，然后在循环中调用元素上的方法，如前面所述

---

如果您将Firefox与Firebug插件一起使用，那么有一种很好的方法可以分析代码，以了解最长的时间是什么。只需单击第一个选项卡下的profile，执行操作，然后再次单击profile。它将显示一个表，其中列出代码每个部分所用的时间。您很可能会在js框架库的列表中看到很多东西；但是，您也可以通过一点尝试和错误来分离它。

这不是一个真正的排序问题，冒泡排序也是您可以做的最慢的排序。这似乎是合理的，因为我自己没有尝试过。不知道在DOM中插入较短字符串的html调用是否也有牵连，也就是说，它们是否触发了呈现？是的，应该可以。它将使您的代码更快，但也许更重要的是，更易于维护，符合DRY原则。例如，如果您意识到temp_item实际上应该是一个id而不是一个类，那么您必须在四个地方更改代码。错过一个，你可能会有一段时间脱发。如果你听从布雷顿的建议，你只需要做一个改变。

    var temp_item = $('.temp_item');
    var span_temp_item = $('span.temp_item');

    var text_len_lower = 0;
    var text_len_higher = smaller_text.length;

    while (true) {
          if (item_width > ideal)
          {
            // make smaller to the mean of "lower" and this
            text_len_higher = smaller_text.length;
            smaller_text = text.substr(0, 
                ((smaller_text.length + text_len_lower)/2));
          }
          else
          {
            if (smaller_text.length>=text_len_higher) break;

            // make larger to the mean of "higher" and this
            text_len_lower = smaller_text.length;
            smaller_text = text.substr(0, 
                ((smaller_text.length + text_len_higher)/2));
          }
          temp_item.html(smaller_text);
          item_width = span_temp_item.width();
    }