Javascript 使用$（this）获取实际宽度。scrollWidth非常慢

我在做休耕

$('.Row .Cell .Text').each(function (index, item) {
                if (this.scrollWidth > $(this).parent().width())
                    $(this).next().show();

                else $(this).next().hide();
});

当我没有分配$（'.Row.Cell.Text'）时，一切都很好。但是如果我有行和单元格的分配，上面的代码，特别是

this.scrollWidth

需要一定的时间

你知道我怎样才能得到同样的东西但更快吗

---

添加了一个提琴

似乎大部分的性能冲击实际上来自以下方面：

$（this.next（）.hide（）

起初，我认为您可能会受到性能的影响，因为jquery可能会处理由元素之间的空格创建的额外文本节点，因此我尝试：

this.nextSibling.nextSibling.style.display='none'

这并没有真正起到帮助作用，因此似乎简单地在这么多元素上设置样式是极其缓慢的。为了解决这个问题，您可以考虑将默认样式设置为您所期望的最常见的情况，然后只对另一种情况作出反应。对于您发布的小提琴示例，这将导致：

CSS:

新JS:

$('.Row .Cell .Text').each(function (index, item) {
                if (this.scrollWidth > $(this).parent().width())
                    $(this).next().show();
});

增编： 事实证明，向所有这些元素添加类的速度要快一点，因此您可以执行以下操作：

CSS:

JS:

---

使用此比较器，您可以将Brandon的答案加速大约6倍

if (this.scrollWidth > this.parentNode.scrollWidth)

---

希望有帮助

我猜您正试图隐藏if

.Text

width>

.Cell

的

.Icon

。参见下面的方法

我试图通过使用

过滤器

将jQuery代码移出侧循环

CSS

/*set overflow for .Text - This lets you calculate the actual width of .Text*/
.Text { overflow: hidden; } 

/* Hide .Icon by default and show only if .Text width < .Cell width*/
.Cell .Icon { display: none; }

$('.Row .Cell .Text').filter(function (i, el) {    
    return el.scrollWidth <= this.parentNode.scrollWidth; //Thanks @nicoabie
}).next().show();

/*为.Text设置溢出-这允许您计算.Text的实际宽度*/
.Text{溢出：隐藏；}
/*默认情况下隐藏.Icon，仅当.Text width<.Cell width时显示*/
.Cell.Icon{显示：无；}

JS

/*set overflow for .Text - This lets you calculate the actual width of .Text*/
.Text { overflow: hidden; } 

/* Hide .Icon by default and show only if .Text width < .Cell width*/
.Cell .Icon { display: none; }

$('.Row .Cell .Text').filter(function (i, el) {    
    return el.scrollWidth <= this.parentNode.scrollWidth; //Thanks @nicoabie
}).next().show();

$（'.Row.Cell.Text'）.filter（函数（i，el）{
return el.scrollWidth你的HTML是什么样子的？你能发布它吗？请创建一个演示jsfiddle@Ovi我看不出有什么问题，这是一把小提琴，它对我来说运行大约150毫秒…@Vermanus我创建了一个JSFIDLE。这是我的html的外观。它需要2143毫秒，但对我来说需要更长的时间，不确定y。那里的代码有什么问题吗？@Ovi你的同事是什么de真的应该这样做吗？谢谢！你的解决方案帮助我们提高了性能。你还有什么想法可以让它变得更好吗？如果我没有得到更好的答案，我会接受你的。你可以将jquery升级到1.9.1。那里有一些优化，可以稍微提高性能。谢谢，它让它变得更快了。我在jsFilddle它的分配速度更快，但在我的应用程序中它只快了一点。欢迎@Ovi，你有没有尝试过或者可能不是一次完成所有的处理，而是每次用户滚动？我也认为这是一个利用web workers的好机会，你见过paralleljs吗？每次用户滚动时我都是怎么做的听起来是个好主意。什么是网络工作者？哇！非常感谢！你勇敢地赢得了奖品！你回答了这个问题。
$('.Row .Cell .Text').filter(function (i, el) {    
    return el.scrollWidth <= this.parentNode.scrollWidth; //Thanks @nicoabie
}).next().show();