Question

我有一个预订引擎，在IE7中相当缓慢。它基于ajaxified和hash / window onchange。共有5个步骤。我遇到的主要问题是第2步在IE中非常慢。

当用户登陆步骤2时，会发出ajax请求以使用Web服务提取数据以显示酒店房间。酒店客房按主要房型和内部更具体类型划分。应用于酒店房间的JS功能包括：

手风琴
关于房间类型的手风琴（嵌套手风琴）
快速翻转图片
jscrollpane，图片翻转后左侧房间描述上的自定义滚动条
jscrollpane，右侧房间类型的自定义滚动条

所有这一切都导致了名人：

enter image description here

我已经Google搜索并登陆this，this和this。

显然，原因是在IE中的特定时间内有太多的脚本语句按顺序执行。

我基本上需要重构我的代码并对其进行优化，以便在函数调用之间存在延迟。

我在执行ajax请求后注入HTML的方式是：

 734                     $( o.html ).appendTo( el )

o.html是对JSON对象html属性的引用，该属性派生自here。

然后，下面的代码运行：

setTimeout(function () {


    $('#roomz .room-accordion').each(function () {

        $(this).accordion({
            header: 'h2.new-heading',
            autoheight: false,
            clearStyle: true,
            collapsible: true,
            change: function (event, ui) {
                window.ui = ui;

                // if it hasnt been quickflipped/subnest accordioned, do it
                if (!$(ui.newContent).data('enabled')) {
                    $('.room-rates', ui.newContent).each(function () {

                        $(this).accordion({
                            header: 'h4.rate-name',
                            autoheight: false,
                            active: 0,
                            clearStyle: true
                        });

                        //if (!$.browser.msie) 
                           $(this).jScrollPane();

                    })

                    $('.room-image', ui.newContent).quickFlip({
                        vvertical: true
                        //easing:'easeInBounce'
                        //easing:'easeInSine'
                    });

                    $('.back-copy-inner', ui.newContent).jScrollPane({
                        verticalDragMaxHeight: 131
                    });

                    $(ui.newContent).data('enabled', true);
                }
            }
        })

        var el = this;
        setTimeout(function () {
            $('.back-copy-inner:eq(0)', el).jScrollPane({
                verticalDragMaxHeight: 131
            });
        }, 500);

        $('.room-rates:eq(0)', this).each(function () {

            $(this).accordion({
                header: 'h4.rate-name',
                autoheight: false,
                active: 0,
                clearStyle: true
            });

            var el = this;
            setTimeout(function () {
                //if (!$.browser.msie) 
                $(el).jScrollPane();
            }, 50);

        });

        $('.room-image:eq(0)', this).quickFlip({
            vvertical: true
            //easing:'easeInBounce'
            //easing:'easeInSine'
        });

        $('.room:eq(0)', this).data('enabled', true);

    });



}, 20);

我的第一个代码版本基本上将quickflip和scrollpanes应用于每个房间，无论它是否隐藏在手风琴中。重构版本（实时/当前版本）将其应用于手风琴中活动的第一个房间，当通过手风琴点击另一个房间时，我将快速翻转和滚动窗格应用于它。

我在整个事件周围添加了一个setTimeout，因为这会在注入HTML之后发生。我内部也有setTimeout。

看起来它仍然太慢了。 任何人都可以提供任何重构/优化提示吗？

我再次重构它的想法包括：

而不是在.each上执行.room accordion，应用重复操作来强制推迟between each iteration like this？
优化和缩小ajax返回的HTML更多 - 我已经做了很多优化，杀死了空白，不显示HTML注释等。
启用Gzip
对图像进行延迟加载，以便只有可见的手风琴内容图像显示而其他图像为blank.gif，直到您通过手风琴激活它们
不是返回HTML并将其转储，而是仅使用NO HTML返回相关数据，而是使用模板引擎构建HTML？！

如果有人能就我的重构思路提出意见，哪些会产生最好的结果，那就太棒了。

链接：

相关网页为this。
相关的JS是here。
相关代码/行号从new.js的第829行开始（这就是我粘贴的代码段）
对this page进行了相关的ajax请求。

PS - 不支持IE6

编辑：我在.each的迭代之间放了一段时间，但仍然很慢。我认为自定义滚动条是主要原因。啊。

编辑＃2 ：live code是setTimeouts的意大利面条。我试图懒惰加载滚动窗格，但它仍然太慢的IE浏览器。

Answer 1

要使IE脚本太慢，消息消失，您需要使用更多setTimeout。问题是达到500万条javascript命令。 setTimeout重置此计数器。

更换手风琴电话

$(this).accordion({
    ...
});

使用

var that = this;
setTimeout(function() {
    $(that).accordion({ ... });
}, 0);

应该解决你的问题。它不会加速代码，它只会使脚本太慢而消失。

至于实际优化，有两个显而易见的事情。

而不是$('.room:eq(0)')

使用$(".room").eq(0)

修改

.each(function() { setTimeout(function() { ... }, 0); }

Answer 2

在你的情况下，我没有去尝试过这个问题，但根据我对这些事情的经验，这是我考虑你的重构的顺序。

由于该错误是由于JS连续执行10秒或更长时间，因此我将重点关注它，而不是优化HTML或GZip甚至图像加载。 IMO你的问题是所有的JS执行设置手风琴和可能稍微昂贵的选择器。我不认为这是因为你加载了31k的JSON。正是这一切的处理都在扼杀你。

将$('#roomz .room-accordion').each(function() {...}的每次迭代延迟100ms左右是我首先关注的问题，＃1也是如此。

您也可以考虑将选择器的所有“：eq（0）”部分更改为“：first”，除非有一些聪明的理由我不理解使用该精确选择器。

希望有所帮助，即使我没有你应该应用的确切代码调整。

我该怎么做才能优化我的IE7 / IE8的ajax应用程序，以避免“停止运行此脚本”？

2 个答案: