我该如何优化 IE7/IE8 的 ajax 应用程序以避免“停止运行此脚本”？

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

当用户到达第 2 步时，系统会发出 ajax 请求，通过 Web 服务提取数据，以便显示酒店房间。酒店房间按主要房型和里面更具体的房型来划分。应用于酒店房间的 JS 功能包括：

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

所有这一切导致了著名的：

我用谷歌搜索并找到了this https://stackoverflow.com/questions/5667456/stop-running-this-script-ie7, this https://stackoverflow.com/questions/1930691/stop-running-this-script-ie-for-large-ajax-requests, and this https://stackoverflow.com/questions/212550/a-script-on-this-page-is-causing-ie-to-run-slowly.

很明显，原因是 IE 中在特定时间内顺序执行的脚本语句过多。

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

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

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

o.html是对 JSON 对象的引用html财产源自于here https://mlb.montagehotels.com/new/ajax/?step=2.

然后，运行下面的代码：

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);

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

我在整个过程中添加了 setTimeout，因为这是在 HTML 注入之后发生的。我有setTimeout也在里面。

看来还是太慢了。谁能提供任何重构/优化技巧？

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

1. 而不是做一个.each on .room accordion，应用重复操作来强制延迟像这样的每次迭代之间 http://www.picnet.com.au/blogs/Guido/post/2010/03/04/How-to-prevent-Stop-running-this-script-message-in-browsers.aspx?
2. 进一步优化和缩小 ajax 返回的 HTML - 我已经做了很多优化，删除了空格，不显示 HTML 注释等。
3. 启用 Gzip
4. 对图像进行延迟加载，以便仅显示可见的手风琴内容图像，而其他图像则显示blank.gif直到您通过手风琴激活它们
5. 不是返回 HTML 并转储它，而是只返回没有 HTML 的相关数据，而是使用模板引擎构建 HTML？！

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

LINKS:

• 有问题的页面是this https://mlb.montagehotels.com/new/#step-2.
• 相关的JS是here https://mlb.montagehotels.com/new/js/new.js.
• 相关代码/行号从第 829 行开始new.js（这是我粘贴的片段）
• 发出的相关ajax请求是这一页 https://mlb.montagehotels.com/new/ajax/?step=2.

PS-不支持IE6

EDIT：我在迭代之间设置了延迟.each而且速度仍然超级慢。我认为自定义滚动条是主要原因。啊。

EDIT #2: The 实时代码 https://mlb.montagehotels.com/new/js/new.js是 setTimeouts 的意大利面条。我尝试延迟加载滚动窗格，但对于 IE 来说仍然太慢。

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

替换手风琴呼叫

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

With

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

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

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

代替$('.room:eq(0)')

Use $(".room").eq(0)

Edit

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