链接jquery添加类方法会触发多次回流吗？

我想知道链接jquery函数是否会触发多个回流，还是在语句结束后只发生一次回流

$('label[hierarchyName="' + toolbarStatus.Years[i] + '"]').addClass('active').addClass('btn-success');

---

欢迎您的任何意见。谢谢。

它会触发多次回流。链接就像在单个选择器上应用多个方法一样。每次添加类时，它都会重新生成DOM并呈现它

示例在JSFIDLE上给出

就像

var obj = {
    first: function() { alert('first'); return obj; },
    second: function() { alert('second'); return obj; },
    third: function() { alert('third'); return obj; }
}

obj.first().second().third();

下面是jQuery的addClass函数

addClass: function( value ) {
    var classes, elem, cur, clazz, j, finalValue,
        i = 0,
        len = this.length,
        proceed = typeof value === "string" && value;

    if ( jQuery.isFunction( value ) ) {
        return this.each(function( j ) {
            jQuery( this ).addClass( value.call( this, j, this.className ) );
        });
    }

    if ( proceed ) {
        // The disjunction here is for better compressibility (see removeClass)
        classes = ( value || "" ).match( rnotwhite ) || [];

        for ( ; i < len; i++ ) {
            elem = this[ i ];
            cur = elem.nodeType === 1 && ( elem.className ?
                ( " " + elem.className + " " ).replace( rclass, " " ) :
                " "
            );

            if ( cur ) {
                j = 0;
                while ( (clazz = classes[j++]) ) {
                    if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
                        cur += clazz + " ";
                    }
                }

                // only assign if different to avoid unneeded rendering.
                finalValue = jQuery.trim( cur );
                if ( elem.className !== finalValue ) {
                    elem.className = finalValue;
                }
            }
        }
    }

    return this;
}

addClass:函数（值）{
风险值类别、要素、cur、clazz、j、最终价值、，
i=0，
len=这个长度，
继续=值的类型==“字符串”&&value；
if（jQuery.isFunction（value））{
返回此。每个函数（j）{
jQuery（this.addClass）（value.call（this，j，this.className））；
});
}
如果（继续）{
//这里的析取是为了更好的压缩性（参见removeClass）
类=（值| |“”）.match（rnotwhite）| |[]；
对于（；i

如果您看到for循环，它会在每次调用addClass时更新类名（附加到现有类中）

如果您参考了由（）编写的文章，更改类名可能会导致回流

---

我希望这能解释：-）

它会触发多次回流。链接就像在单个选择器上应用多个方法一样。每次添加类时，它都会重新生成DOM并呈现它

示例在JSFIDLE上给出

就像

var obj = {
    first: function() { alert('first'); return obj; },
    second: function() { alert('second'); return obj; },
    third: function() { alert('third'); return obj; }
}

obj.first().second().third();

下面是jQuery的addClass函数

addClass: function( value ) {
    var classes, elem, cur, clazz, j, finalValue,
        i = 0,
        len = this.length,
        proceed = typeof value === "string" && value;

    if ( jQuery.isFunction( value ) ) {
        return this.each(function( j ) {
            jQuery( this ).addClass( value.call( this, j, this.className ) );
        });
    }

    if ( proceed ) {
        // The disjunction here is for better compressibility (see removeClass)
        classes = ( value || "" ).match( rnotwhite ) || [];

        for ( ; i < len; i++ ) {
            elem = this[ i ];
            cur = elem.nodeType === 1 && ( elem.className ?
                ( " " + elem.className + " " ).replace( rclass, " " ) :
                " "
            );

            if ( cur ) {
                j = 0;
                while ( (clazz = classes[j++]) ) {
                    if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
                        cur += clazz + " ";
                    }
                }

                // only assign if different to avoid unneeded rendering.
                finalValue = jQuery.trim( cur );
                if ( elem.className !== finalValue ) {
                    elem.className = finalValue;
                }
            }
        }
    }

    return this;
}

addClass:函数（值）{
风险值类别、要素、cur、clazz、j、最终价值、，
i=0，
len=这个长度，
继续=值的类型==“字符串”&&value；
if（jQuery.isFunction（value））{
返回此。每个函数（j）{
jQuery（this.addClass）（value.call（this，j，this.className））；
});
}
如果（继续）{
//这里的析取是为了更好的压缩性（参见removeClass）
类=（值| |“”）.match（rnotwhite）| |[]；
对于（；i

如果您看到for循环，它会在每次调用addClass时更新类名（附加到现有类中）

如果您参考了由（）编写的文章，更改类名可能会导致回流

我希望这可以解释：-）

它可能会触发多次回流，但实际上不会

当CSS样式按顺序更改时，所有现代浏览器都会通过将所有更改合并到一个浏览器中，然后执行回流来优化流程

（这是可以注意到的，在链接有意义的情况下，这可能非常恼人，比如在另一个类之前添加

无转换

类……在这些情况下，您必须依靠不一致的黑客来强制回流/重新绘制）

它可能会触发多个回流，但实际上不会

当CSS样式按顺序更改时，所有现代浏览器都会通过将所有更改合并到一个浏览器中，然后执行回流来优化流程

---

（这是可以注意到的，在链接有意义的情况下，这可能会非常恼人，比如在另一个类之前添加

无转换

类……在这种情况下，您必须依靠不一致的黑客来强制回流/重新绘制）

不是回流专家。不过，我只想指出，您可以执行

.addClass（'active btn success'）

来同时添加这两个类。我认为在链中的每个函数上都会发生回流，因为它们是按链接顺序执行的。尝试

.addClass（'activebtn success'）是的，在你的案例中，你可以通过链接访问所有这些元素，你可以通过做一个简单的测试自己找到答案…我认为这可能取决于浏览器。。由于浏览器可能会将回流延迟几毫秒以进行性能优化，因此在这种情况下，可能只会导致一次回流。.请参阅《非回流专家》中的
浏览器是智能的。不过，我只想指出，您可以执行
.addClass（'active btn success'）
来同时添加这两个类。我认为在链中的每个函数上都会发生回流，因为它们是按链接顺序执行的。尝试
.addClass（'activebtn successfuccess'）是的，在你的案例中，你可以通过链接访问所有这些元素，你可以通过做一个简单的测试自己找到答案…我认为这可能取决于浏览器。。因为浏览器可能会延迟t