Javascript 如何优化jquery脚本以提高性能？

我有一个JQuery脚本，它查看一些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});
            }
        });
    });

我有一个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});
                }
            });
        });
    });

我想要一些帮助，看看我是否可以优化循环。因为当前我循环获取图像（不做任何处理），然后再次循环获取所有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});
            }
        });
    });

---

这部分不会增加性能，但看起来会更短更好：）

vs

当你看到

parent（）.parent（）.parent（）

时，想想

最近的（）

。

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