Question

我正在使用HeadJS在我网站的头部加载我的所有JavaScript代码。我是否应该执行以下操作，使用HeadJS加载我的所有JavaScript？

<script src="/-/js/head.js"></script>

<script>
    head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js")
        .js("/-/js/slideshow.js")
        .js("/-/js/modernizr.js")
        .js("/-/js/cookie.js")
        .js("/-/js/thumbs.js")
        .js("/-/js/infinitescroll.js")
        .js("/-/js/manual-trigger.js")
        .js("/-/js/easing.js")
        .js("/-/js/thumbs.js")
        .js("/-/js/popup.js")
        .js("/-/js/sharre.js")
        .js("/-/js/selectivizr.js")
        .js("/-/js/scripts.js");
</script>

此外，文件'scripts.js'是我自己的jQuery脚本，它使用头部的其他JavaScript脚本。这是运行此优化的最佳方法吗？

我用来包装此文件中的所有代码：

head.ready(function() { my code });

Answer 1

正确的做法是并行下载资源，以便没有任何资产阻止下载其他资产，例如阻止内容呈现的脚本。理想情况下，您应首先下载CSS，然后按重要性/依赖性的顺序并行下载脚本。例如，您需要在jQuery相关脚本之前下载jQuery代码，并且需要在“装饰”脚本之前下载您的功能。

同样，只要它们不阻止其他资产（即CSS和内容），它们开始下载时就无关紧要了。

在OP，从我的快速学习，你的方法似乎是正确的。根据我的阅读，headjs可以并行下载，但按顺序执行（您可以指定顺序）。您使用的方法将执行首先到达的脚本。你非常喜欢冒险！ ^ _ ^

不幸的是，我不知道每个脚本的功能重要性，但我建议重新排序，例如：

<script>
head.js("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js",
    "/-/js/modernizr.js",
    "/-/js/selectivizr.js",
    "/-/js/cookie.js",
    etc...
    );
</script>

这将并行下载脚本，但按此顺序执行。您需要使用,分隔每个脚本以使用“并行下载，按顺序执行”方法。

我认为：仍在调查 - 您还可以选择使用以下方式添加条件下载：

head.browser.ie(insert scripts);

Check out the awesomeness.

当我看到Internet Explorer的条件加载（没关注任何其他内容）时，我考虑过给开发人员我的第一个孩子。

Answer 2

您应该始终尝试put your scripts at the bottom just before the closing body tag。

所有JavaScript代码都应该与HeadJS一起放在头上吗？

2 个答案: