挂起页面加载：Javascript太多？

我终于解决了一些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>

$（文档）.ready（函数（）{
$（“#ubaPlayer”）.ubaPlayer({
编解码器：[{name:“MP3”，编解码器：'audio/mpeg；'}]
});
$（'a[class=video]'）。单击（函数（）{
if（$（“#ubaPlayer”）.ubaPlayer（“播放”）==true）{
$（“#ubaPlayer”）.ubaPlayer（“暂停”）；
}
返回false；
});
})
jQuery（文档）.ready（函数（）{
$（“.video”）。单击（函数（）{
$.fancybox({
“填充”：0，
“自动缩放”：false，
“transitionIn”：“无”，
“transitionOut”：“无”，
“title”：this.title，
“宽度”：640，
‘高度’：385，
'href'：this.href.replace（新的RegExp（“watch\\？v=，“i”），'v/'），
“类型”：“swf”，
“swf”：{
'wmode'：'transparent'，
“allowfullscreen”：“true”
}
});
返回false；
});
});

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

最小化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下面有一个

标记。我以前说过这句话，但我强烈建议将脚本移到

标记之前。页面加载会受到脚本加载和解析的影响，因此如果您可以推迟到以后，那么至少对感知到的页面加载会更好。

您能解释一下吗？我不熟悉脚本编写，但我会边写边学。当然。你需要解释什么？为什么不让一个函数同时做两件事呢！我明白你的意思。这是可以理解的。我还想问：在将这些外部脚本组合在一起时，是否有任何问题需要注意？我可能只是将其中的两个（我的音频播放器和fancybox）结合起来，但至少少了一个HTTP请求。如果你真的打开一个新文件，复制每个文件的内容，并按相同的顺序粘贴它们，你应该不会有任何问题。我建议保持jQuery代码的原样，不要与其他脚本组合。它是迄今为止最大的文件，并且位于单独的域中，因此您可以享受并行下载的好处。