javascript - 我该怎么做才能针对 IE7/IE8 优化我的 ajax 应用程序以避免出现 "Stop running this script"？

Question

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

当用户进入第 2 步时，系统会发出 ajax 请求以使用 Web 服务提取数据以显示酒店房间。酒店客房分为主要房型和内部更具体的房型。应用于酒店房间的 JS 功能包括:

• 房间里的 Accordion
• 房间类型的 Accordion (嵌套 Accordion )
• 快速翻转图片
• jscrollpane，图片翻转后左侧房间描述自定义滚动条
• jscrollpane，右侧房型自定义滚动条

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

我用谷歌搜索并找到了 this 、 this 和 this 。

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

我基本上需要重构我的代码并优化它，以便在函数调用之间有延迟。

我在执行 ajax 请求后注入(inject) HTML 的方式是:

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

o.html 是对从 here 派生的 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);

我的第一个代码版本基本上将快速翻转和滚动 Pane 应用于每个房间，无论它是否隐藏在 Accordion 中。重构版本(实时/当前版本)将其应用于 Accordion 中第一个事件的房间，当通过 Accordion 单击另一个房间时，我将快速翻转和滚动 Pane 应用于它。

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

看来还是太慢了。 任何人都可以提供任何重构/优化技巧吗？

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

1. 不是在 .room accordion 上执行 .each，而是应用重复操作来强制延迟 between each iteration like this ?
2. 进一步优化和缩小 ajax 返回的 HTML - 我已经做了很多优化，删除了空格，不显示 HTML 注释等。
3. 启用 Gzip
4. 对图像进行延迟加载，以便只有可见的 Accordion 内容图像显示，其他都是 blank.gif，直到您通过 Accordion 激活它们
5. 不是返回 HTML 并转储它，而是只返回没有 HTML 的相关数据，而是使用模板引擎构建 HTML？!

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

链接:

• 相关页面是 this 。
• 相关的 JS 是 here 。
• 相关代码/行号从 new.js 的第 829 行开始(这是我粘贴的代码片段)
• 向 this page 发出相关的 ajax 请求。

PS - 不支持 IE6

编辑:我在 .each 的迭代之间设置了延迟，它仍然非常慢。我认为自定义滚动条是主要原因。呃。

编辑 #2:live code 是 setTimeouts 的意大利面。我尝试延迟加载滚动 Pane ，但它对于 IE 来说仍然太慢了。

Answer 1

要使IE script is too slow message dissapeary你需要使用更多的setTimeout。问题是达到了 500 万个 javascript 命令。 setTimeout 重置此计数器。

替换 Accordion 调用

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

与

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

应该可以解决您的问题。它不会加速代码，它只会让脚本太慢消失。

至于实际优化，有两点很明显。

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

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

编辑

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