1

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

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

任何输入表示赞赏。谢谢你。

4

2 回答 2

3

它会触发多次回流。链接就像在单个选择器上应用多个方法一样。每次添加一个类时，它都会重新生成 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 可能会导致回流。 .

我希望能解释:-)

于 2014-05-21T11:19:53.223 回答
1

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

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

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

于 2015-10-02T10:52:05.440 回答