javascript - 卡在页面加载 : Too much Javascript?

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

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

最小化 HTTP 请求的数量恰好是 Web 性能的黄金法则。如果可能，尝试将外部脚本组合成一两个 JS 文件。

另一个奇怪的事情是你的内联脚本阻止了两个绑定(bind)函数到 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> JavaScript 下方的标记。我之前说过这让其他人很生气，但我强烈建议将脚本移到 </body> 之前。而是标记。页面加载受脚本加载和解析的影响，因此如果您可以将其推迟到以后，那么至少可以更好地感知页面加载。