Question

我现在被困了，我真的希望有人能告诉我我真正看不到的问题。

问题是菜单栏在Safari，FF，Chrome中效果很好。但是，当我将IE8放在另一个菜单区域时，它打开IE8的速度非常慢。或者更好的是整个菜单都很慢！

html id＆amp;上课

  <div class="oe_wrapper">
     <ul id="oe_menu" class="oe_menu">

这是我的javascript代码：

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.children('div').css('z-index', '9999').stop(true, true).slideDown(300, function () {
            $oe_menu_items.not('.slided').children('div').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').children('div').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);

        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');

        $oe_menu_items.children('div').hide();
    })
});

这是我的菜单代码：

<div class="oe_wrapper">


    <ul id="oe_menu" class="oe_menu">

        <li><a href="#">Lipsum</a>
            <div>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
            </div>
        </li>


        <li><a href="#">PRODUCTEN</a>
            <div style="left:-191px;">
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Persen</a></li>
                </ul>


                </ul>
            </div>
        </li>
        <li><a href="#">Lipsum</a>
            <div style="left:-383px;">
                <ul class="oe_full">
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>

                </ul>
            </div>
        </li>


        <li><a href="#">Lipsum</a>
            <div style="left:-575px;">
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Lipsum</li>
                    <li><a href="#">Lipsum</a></li>
                                    <li><a href="#">Lipsum</a></li>
                </ul>
            </div>
        </li>



        <li><a href="#">CONTACT</a>
            <div style="left:-767px;">
                    <ul>
                    <li class="oe_heading">Lipsum/li>
                                    <li><a href="#">Lipsum</a></li>
                    <li><a href="#">Lipsum</a></li>
                </ul>

            </div>
        </li>
    </ul>   
</div>

Answer 1

性能消耗可能是在dom-traversal-on-event上。 Ie8在穿越dom时出了名的慢。

解决这个问题的一种方法是预先遍历并缓存结果，如下所示：

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.each(function(){
        var $this = $(this);
        $this.data('div-children', $this.children('div'));                  
    });

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        $this.data('div-children').css('z-index', '9999').stop(true, true).slideDown(300, function () {
            $oe_menu_items.not('.slided').data('div-children').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').data('div-children').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);

        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');

        $oe_menu_items.children('div').hide();
    })
});

Answer 2

尝试使用live或delegate。

我的代码在IE8中非常慢。但在Safari，firefox，chrome中效果很好

2 个答案: