网页加载失败：JavaScript过多？

Question

I've finally fixed some of my Javascript issues, and managed to use only one library now (it was crazy before).

There's a little bit of a hang in the page load, so I was going to see if you guys noticed anything I could make more efficient in my scripting. It's a little all over the place, so I might have some unnecessary functions. Suggestions?

Thanks in advance!

<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

In this code snippet alone you have four external scripts and two inline script blocks.

Minimizing the number of HTTP requests happens to be the golden rule of web performance. If possible, try combining the external scripts into one or two JS files.

The other curious thing is that your inline script blocks both bind functions to jQuery's .ready() . Why not have one function that does both things? See below for an example:

$(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;
    });
})

The other part that I notice is that you have a </head> tag below the JavaScript. I've said this before to the ire of others, but I would strongly recommend moving the scripts to just before the </body> tag instead. The page load is affected by script loading and parsing, so if you can defer that to later, that would be better to perceived page load at least.