사이트에 있는 모든 Javascript는 페이지에 투명한 PNG가 있을 때 Firefox 4에서 끔찍하게 느리게 실행된다.

사이트에 있는 모든 Javascript는 페이지에 투명한 PNG가 있을 때 Firefox 4에서 끔찍하게 느리게 실행된다.

ETA 업데이트: 사이트에서 모든 투명한 .png 파일을 삭제하면 5개 정도 정상적으로 실행됩니다.그건 이상해요.그리고 업 투표는 매우 도움이 됩니다.몇 대의 컴퓨터에서 테스트를 해봤는데 4/15에 이 문제가 있습니다.감사합니다!좋은 생각 있어요?

PC Firefox 및 기타 모든 브라우저에서는 정상적으로 실행되지만, Mac Firefox의 4/15 컴퓨터에서는 Javascript가 매우 느립니다. 특히 menbar.사이트 밖에서 둘 다 테스트해 봤는데 잘 작동했어요.이것은 꽤 오랫동안 계속되고 있는 문제이며, 어떻게 해결해야 할지 알 수 없습니다.업데이트 되었습니다. 왼쪽 상단에 있는 배너와 같은 투명한 PNG를 사이트에서 삭제하면 문제가 사라집니다.

내 사이트: http://thenozzle.net/

Javascript는 모두 다른 브라우저보다 조금 느립니다.가장 큰 것은 menbar와 video player입니다.지금으로서는 무시할 수 없어요.

word press가 추가된 것인지 궁금합니다. js는 다른 곳에서도 잘 작동하기 때문입니다.

좋은 생각 있어요?

ETA: JS 파일입니다.

http://thenozzle.net/wp-content/themes/twentyten/scripts.js

ETA: 이게 내 메누바 코드야

$(function() {
    $('#sdt_menu > li').bind('mouseenter',function(){
        var $elem = $(this);
        $elem.find('img')
             .stop(true)
             .animate({
                'width':'170px',
                'height':'170px',
                'left':'0px'
             },400,'easeOutBack')
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'140px'},500,'easeOutBack')
             .andSelf()
             .find('.sdt_active')
             .stop(true)
             .animate({'height':'170px'},300,function(){
            var $sub_menu = $elem.find('.sdt_box');
            if($sub_menu.length){
                var left = '170px';
                if($elem.parent().children().length == $elem.index()+1)
                    left = '-170px';
                $sub_menu.show().animate({'left':left},200);
            }
        });
    }).bind('mouseleave',function(){
        var $elem = $(this);
        var $sub_menu = $elem.find('.sdt_box');
        if($sub_menu.length)
            $sub_menu.hide().css('left','0px');

        $elem.find('.sdt_active')
             .stop(true)
             .animate({'height':'0px'},300)
             .andSelf().find('img')
             .stop(true)
             .animate({
                'width':'0px',
                'height':'0px',
                'left':'85px'},400)
             .andSelf()
             .find('.sdt_wrap')
             .stop(true)
             .animate({'top':'25px'},500);
    });
});

약간 손상된 PNG가 있을 수 있습니다.

다음을 시도해 보십시오: 포토샵에서 PNG를 다시 저장하십시오.PNG-24와 PNG-8을 모두 저장합니다.시험.

PNG가 제대로 저장되지 않은 것을 이전에 본 적이 있습니다.

나는 두 개의 맥북 프로로 사이트를 테스트했다. 하나는 코어 듀오 2이고 다른 하나는 코어 듀오이다.둘 다 잘 작동했고, 비디오가 재생되는 동안에도 메뉴는 매우 반응이 좋았다.

여기 "Suspect macs"(즉, 새로운 계정을 만들고 테스트)에 다른 답변에 나와 있는 다른 단계가 있다고 가정하면, 이러한 Mac이 다른 어떤 점이 다른지 살펴볼 필요가 있다고 생각합니다.OS X의 어떤 버전? 어떤 모델(Macbook vs Macbook pro vs Air 등)

Mac의 Firefox 4.0은 하드웨어 가속을 위해 OpenGL을 사용하고 Windows의 FF는 Direct2D를 사용해야 합니다.이 문제는 일부 Mac에서만 발생하므로 그래픽 카드 칩셋과 관련이 있을 수 있습니까? 문제가 있는 Mac의 사양을 비교하고 하드웨어 가속을 비활성화하여 문제가 해결되었는지 확인하십시오.

확장, 애드온 등을 설치하지 않고 실행할 수 있도록 새 Firefox 프로파일을 만들어 보십시오.일부 확장 기능(AdBlock, GreaseMonkey 등)이 페이지 내의 스크립트 중 일부와 경합하고 있을 가능성이 있습니다.

방금 Mac(MacBook Pro, 10.6.7)에서 FF4로 테스트했는데, 로딩이 빨랐기 때문에 설정에 문제가 있을 수 있습니다.

HTML 태그가 닫히지 않아 Javascript에서 이상한 동작을 일으킬 수 있기 때문에 먼저 HTML을 검증하겠습니다.HTML을 확인하고 Firebug를 사용하여 도움을 받으십시오.

그 후, 이 스페이서와 같은 다른 스페이서를 사용해 보겠습니다.

파이어폭스도 같은 문제가 있는지 모르겠지만, 작은 투명 png(1x1)를 타일링하면 ie7에서 메모리 누수가 발생한다는 것은 알고 있습니다.큰 이미지를 사용하여 수정합니다.

언급URL : https://stackoverflow.com/questions/6395586/all-javascript-on-site-performs-horribly-slow-in-firefox-4-when-transparent-png