페이지로드 지연 : Javascript가 너무 많습니까?

Question

마침내 자바 문제를 해결하고 라이브러리를 하나만 사용할 수있게되었습니다 (예전에는 미쳤습니다).

페이지로드가 잠깐 멈췄으므로 스크립팅에서 더 효율적으로 만들 수있는 것이 있는지 눈치 챘을 것입니다. 그 곳 곳곳에 약간의 불필요한 기능이있을 수 있습니다. 제안?

미리 감사드립니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="player/src/jquery.ubaplayer.js"></script> 
<script> 
$(document).ready(function() { 
    $("#ubaPlayer").ubaPlayer({ 
     codecs: [{name:"MP3", codec: 'audio/mpeg;'}]     
    }); 

    $('a[class=video]').click(function() { 
     if ($("#ubaPlayer").ubaPlayer("playing") === true) { 
      $("#ubaPlayer").ubaPlayer("pause"); 
     } 
     return false; 
    }); 
}) 
</script> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4">    </script> 
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 

$(".video").click(function() { 
    $.fancybox({ 
     'padding'  : 0, 
     'autoScale'  : false, 
     'transitionIn' : 'none', 
     'transitionOut' : 'none', 
     'title'   : this.title, 
     'width'   : 640, 
     'height'  : 385, 
     'href'   : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
     'type'   : 'swf', 
     'swf'   : { 
     'wmode'    : 'transparent', 
     'allowfullscreen' : 'true' 
     } 
    }); 

    return false; 
}); 
}); 
</script> 

</head> 

Answer 1

이 코드 단편에는 4 개의 외부 스크립트와 2 개의 인라인 스크립트 블록이 있습니다.

HTTP 요청 수를 최소화하면 웹 성능의 황금률이됩니다. 가능한 경우 외부 스크립트를 하나 또는 두 개의 JS 파일로 결합 해보십시오.

다른 흥미로운 점은 인라인 스크립트가 두 함수를 모두 jQuery의 .ready()에 바인딩한다는 것입니다. 왜 두 가지 기능을하는 하나의 기능을 가지고 있지 않습니까? 예를 들어 아래를 참조하십시오 :

$(document).ready(function() { 
    $("#ubaPlayer").ubaPlayer({ 
     codecs: [{name:"MP3", codec: 'audio/mpeg;'}]     
    }); 

    $('a[class=video]').click(function() { 
     if ($("#ubaPlayer").ubaPlayer("playing") === true) { 
      $("#ubaPlayer").ubaPlayer("pause"); 
     } 
     return false; 
    }); 

    $(".video").click(function() { 
     $.fancybox({ 
      'padding'  : 0, 
      'autoScale'  : false, 
      'transitionIn' : 'none', 
      'transitionOut' : 'none', 
      'title'   : this.title, 
      'width'   : 640, 
      'height'  : 385, 
      'href'   : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
      'type'   : 'swf', 
      'swf'   : { 
       'wmode'    : 'transparent', 
       'allowfullscreen' : 'true' 
      } 
     }); 

     return false; 
    }); 
}) 

난 당신이 자바 스크립트 아래 </head> 태그를 가지고있다 알 다른 부분을. 전에 다른 사람의 분노에 대해 말했지만, 대신 스크립트를 </body> 태그 바로 앞에 이동하는 것이 좋습니다. 페이지로드는 스크립트로드 및 구문 분석의 영향을받습니다. 따라서 나중에 지연 할 수 있으면 최소한 페이지로드를 감지하는 것이 좋습니다.