优化 jquery 循环以设置宽度答案

【问题标题】：optimize jquery loop to set widths优化 jquery 循环以设置宽度
【发布时间】：2011-03-07 22:43:40
【问题描述】：

我正在尝试使用设置溢出和固定宽度的策略来阻止 div 中的字符串超出其可变大小的父 div 的大小。我在页面上有大约 4400 个 dom 元素（不能减少，通常可以更多），但只需要更改大约 100-300 个。当然，在 FF/Webkit 中可以在不到一秒的时间内完成，但 IE 非常慢，超过 7 秒。

我已经通过使用一组预先确定的 id 元素来处理有问题的标签，从而消除了任何 dom 遍历。是否有一些我遗漏的东西或一些替代技巧可以在更短的时间内为 IE 做到这一点？

for (id in ids) {
    jq("#" + ids[id] + "_name").css({"overflow": "hidden",
        'width': jq("#" + ids[id]).innerWidth() - 1
    });
}

【问题讨论】：

标签： javascript jquery optimization width overflow

【解决方案1】：

好吧，在直接到 DOM 的金属并且仍然没有消除任何速度的点上，我已经选择了减轻问题的替代方案，因此它对用户来说不是一个问题（也许是 IE9将使MS免于这种尴尬！）。我查看了this blog entry by Nick Fitzgerald，它展示了一种克服该问题的技术。所以在这里，使用尼克的模式，是我最终的解决方案（只是处理IE的部分，我保留了非IE版本）：

yieldingEach(ids, function(namebox) {
    var elemName = document.getElementById(namebox + '_name');
    if (elemName) {
        var elem = document.getElementById(namebox);
        elemName.style.width = (elem.scrollWidth - 4) + 'px';
    }
});

【讨论】：

【解决方案2】：

这是一个非 jQuery 版本...验证它在 IE 中是否有效，但它会稍微快一些，因为您没有 jQuery 为您做这件事。

for (id in ids) {
    var elemName = document.getElementById(ids[id] + '_name'),
        elem = document.getElementById(ids[id]);

    elemName.setAttribute('overflow', 'hidden');
    elemName.setAttribute('width', elem.innerWidth - 1);
}

【讨论】：

谢谢。不得不稍微改变，因为它们不是属性而是样式。但我只是从innerWidth（和宽度）中得到未定义。如果我切换回 jq(elem).innerWidth() 它可以工作，但什么也没有保存（jquery docs 支持 id 元素选择器是 getElementById() 的直接包装器）。我将 overflow:hidden 移到了一个样式表中，该样式表已经减少了 2 秒，但它仍然是一个很好的 7 秒。
挖了一下，发现 elemName.style.width = (elem.scrollWidth - 1) + 'px';作品。唉，它最多只能节省几毫秒，仍然是 7 秒。 FF 以 160 毫秒的速度输出！