Question

我终于修复了一些我的Javascript问题，并且现在只设法使用了一个库（以前它很疯狂）。

页面加载中有一点点挂起，所以我会看看你们是否注意到我可以在脚本编写方面提高效率。它遍布整个地方，所以我可能会有一些不必要的功能。建议？

提前致谢！

<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

仅在此代码段中，您有四个外部脚本和两个内联脚本块。

最大限度地减少HTTP请求的数量恰好是Web性能的黄金法则。如果可能，尝试将外部脚本组合成一个或两个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;
    });
})

我注意到的另一部分是JavaScript下方有一个</head>标记。我之前已经说过其他人的愤怒，但我强烈建议将脚本移到</body>标记之前。页面加载受脚本加载和解析的影响，因此如果您可以将其推迟到以后，那么至少感知页面加载会更好。

挂在页面加载：太多Javascript？

1 个答案: