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

Question

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

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

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

所有这一切导致着名：

我已经用Google搜索并登陆了这个 ， 这个 ， 这个 。

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

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

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

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

o.html是对JSON对象html属性的引用，该属性是从此处派生的。

然后，下面的代码运行：

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内部。

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

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

1. 而不是在.room accordion上做一个.each ，应用重复操作来强制在每次迭代之间延迟这样的 ？
2. 优化和缩小ajax返回的HTML甚至更多 - 我已经做了很多优化，杀死了空白，没有显示HTML评论等。
3. 启用Gzip
4. 在图像上进行延迟加载，以便只显示可见的手风琴内容图像，其他图像为blank.gif直到您通过手风琴激活它们为止
5. 而不是返回HTML并转储它，只返回没有HTML的相关数据，而是使用模板引擎构建HTML？！

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

链接：

• 有问题的页面是这个 。
• 相关的JS就在这里 。
• 相关的代码/行号从new.js第829行开始（这就是我粘贴的代码段）
• 对此页面进行相关的ajax请求。

PS - 不支持IE6

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

编辑＃2 ： 实时代码是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() {...}每次迭代$('#roomz .room-accordion').each(function() {...}延迟100ms左右是我首先关注的，＃1也是如此。

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

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