Question

我想知道链接jquery函数是否会触发多次重排，或者在语句结束后重排只发生一次。

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

任何意见都表示赞赏。谢谢。

Answer 1

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

这里给出了JSFiddle的例子。 - http://jsfiddle.net/5kkCh/

就像

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;
}

如果你看到for循环，每次调用addClass时它都会更新类名（附加到现有的类）...

如果您参考stubbornella（http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/）撰写的文章，更改className会导致回流..

我希望这可以解释： - ）

Answer 2

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

当CSS样式按顺序更改时，所有现代浏览器都会通过将所有更改合并为一个来优化该过程，然后执行重排。

（这可以被注意到，并且在链接有意义的情况下可能会非常烦人，比如在另一个之前添加no-transition类...在这些情况下你必须依靠不一致的黑客来强制重排/重画）

将chaining jquery添加类方法会触发多次回流吗？

2 个答案: