如何優化jquery腳本以提高性能？

Question

我有這個JQuery腳本，它正在查看一些DIV，並獲取圖像大小並根據圖像設置div大小。

我有一個JQuery腳本來獲取所有DIV並循環到每個圖像，並獲取大小並根據正確的大小設置DIV大小。 問題是該腳本運行異常，僅在刷新（F5）頁面時才起作用。 現在，如果我更改為首先獲取所有圖像並循環獲取大小，則可以正常工作。 第二個選項的唯一問題是我不知道哪些圖像屬於哪些DIV，因此我不得不添加一個額外的循環以從正確的DIV獲取所有圖像。

這是我的代碼：

$('.groupContainer').imagesLoaded(function($images){
        $(this).each(function(){
            var rowWidth = 16;
            $(this).imagesLoaded(function($images){
                $images.filter(':not(".overlayBoxImage")').each(function(){
                    if($(this).context.id != 'groupTitle'){
                        $(this).parent().parent().parent().css('width', $(this).width());
                    }
                    rowWidth += $(this).width();
                });
                if(rowWidth > maxWidth){
                    maxWidth = rowWidth;
                    $('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
                    $('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
                    $('#headerContainer').css({width: maxWidth});
                    $('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
                    $('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
                }
            });
        });
    });

我需要一些幫助，以查看是否可以優化LOOP。 因為當前我要循環獲取圖像（不對其進行任何操作），然后再次循環以獲取所有DIV，然后再次循環以獲取所有圖像並進行計算。

這是我以前使用過的腳本，但是由於我先加載DIV並循環播放圖像，因此無法正常工作。

$('.groupContainer').each(function(){
        var rowWidth = 16;
        $(this).imagesLoaded(function($images){
            $images.filter(':not(".overlayBoxImage")').each(function(){
                if($(this).context.id != 'groupTitle'){
                    $(this).parent().parent().parent().css('width', $(this).width());
                }
                rowWidth += $(this).width();
            });

            if(rowWidth > maxWidth){
                maxWidth = rowWidth;
                $('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
                $('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
                $('#headerContainer').css({width: maxWidth});
                $('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
                $('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
            }
        });
    });

Answer 1

這部分不會增加性能，但看起來會更短和更好:)

        if(rowWidth > maxWidth){
            maxWidth = rowWidth;
            $('.vnBreadcrumbsCont').css({width: maxWidth, 'max-width':maxWidth});
            $('.guideDescCont').css({width: maxWidth, 'max-width':maxWidth});
            $('#headerContainer').css({width: maxWidth});
            $('.groupContainer').css({width: maxWidth,'max-width': maxWidth});
            $('#guideContainer').css({width: maxWidth, 'max-width': maxWidth});
        }

與

        if(rowWidth > maxWidth){
            maxWidth = rowWidth;
            var selector = '.vnBreadcrumbsCont, .guideDescCont, .groupContainer, #guideContainer'
            $(selector).css({width: maxWidth, 'max-width':maxWidth});
            $('#headerContainer').css({width: maxWidth});
        }