javascript - 提高 jQuery 函数的效率

Question

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

它测量页面上文本的像素宽度并 chop 直到文本达到理想宽度:

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 必须循环遍历文档中的每个元素，查看每个类属性并在其上运行正则表达式。每次都绕一圈!尽可能多地从你的紧密循环中取出这些东西。 Webkit 运行速度很快，因为它有 .getElementsByClassName，而其他浏览器没有。 (还)。