2

我正在使用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 });
4

2 回答 2

9

正确的做法是并行下载资源，这样没有一个资产会阻止其他资产的下载，例如阻止内容渲染的脚本。理想情况下，您应该先下载 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>

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

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

head.browser.ie(insert scripts);

看看真棒。

当我看到 Internet Explorer 的条件加载（别管其他）时，我考虑给开发人员我的第一个孩子。

于 2013-06-19T18:48:58.910 回答
0

您应该始终尝试将您的脚本放在结束 body 标记之前的底部。

于 2013-06-07T18:05:16.263 回答