我该怎么做才能优化我的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是对html从此处派生的JSON对象属性的引用.

然后,下面的代码运行:

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. 而不是做一个.eachon .room accordion,应用一个重复操作来强制每次迭代之间的延迟？
2. 优化和缩小ajax返回的HTML甚至更多 - 我已经做了很多优化,杀死了空白,不显示HTML注释等.
3. 启用Gzip
4. 对图像进行延迟加载,以便只有可见的手风琴内容图像显示,而其他图像则blank.gif通过手风琴激活它们
5. 而不是返回HTML并转储它,只返回没有HTML的相关数据,而是使用模板引擎构建HTML？!

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

链接:

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

PS - 不支持IE6

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

编辑#2:实时代码是setTimeouts的意大利面.我试图懒惰加载滚动窗格,但它仍然太慢的IE浏览器.

Answer 1

我还没有亲自尝试过你的情况，但根据我对这些事情的经验，这是我考虑你的重构的顺序。

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

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

您还可以考虑将选择器的所有“:eq(0)”部分更改为“:first”，除非有一些巧妙的原因我不明白如何使用该确切的选择器。

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