Javascript 结合jQuery和x2B；是否使用异步自定义脚本？

当我们希望加快一个网站的初始加载速度时，我们将所有的javascript都放在一个组合文件中，现在相当大——大约90kb。 所有的分析工具都在说“你应该切换到异步，这样你的网页就不会被JavaScript块渲染”

这就是我们今天在结束身体标签之前看到的

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/js/script.js"></script>

我们的脚本依赖于jQuery。所以，我的问题是，最好是有一个接近200kb的脚本，即jQuery与我们的脚本连接起来，这样我们就知道jQuery在我们自己的脚本之前加载，并且异步加载，还是有其他方法来实现这一点，而不涉及太多的第三方解决方案，如headjs、reactjs等

输入密码，是吗

<script src="/js/combined.js" async></script>

比这更好

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/js/script.js" async></script>

如果我们保持jQuery同步，并使脚本异步，这会有帮助吗？或者说，在我们无法确定jQuery是否在我们之前加载的意义上，这是危险的吗

或者，作为一个非解决方案，我们是否只是不关心这一点，而是专注于其他事情，即，是否真的值得寻找最后的性能提升

---

任何见解都将不胜感激。

更好的方法是使用脚本加载程序，如RequireJS或Head.JS。例如，对于Head.JS：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>

<script type="text/javascript">
  head.js(
    "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js",
    "/js/script.js",

    function() {
      startMyCode();
    }
  );
</script>

head.js(
“//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”，
“/js/script.js”，
函数（）{
startMyCode（）；
}
);

RequireJS的功能更强大，因为它不是按顺序执行脚本，而是按依赖关系执行脚本，而是要求您将代码组织在模块中（而不是Head.JS，您可以在不修改代码的情况下使用它）

---

EDIT：实际上，考虑到

Head.JS

似乎不再被维护，也许最好还是继续。澄清一下——这些事情的作用是管理代码的异步加载，然后确保在加载所有位时以正确的顺序执行（可以是按顺序执行，如Head.JS，也可以是以某种依赖关系图的方式）。

更好的方法是使用脚本加载程序，如RequireJS或Head.JS。例如，对于Head.JS：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>

<script type="text/javascript">
  head.js(
    "//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js",
    "/js/script.js",

    function() {
      startMyCode();
    }
  );
</script>

head.js(
“//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”，
“/js/script.js”，
函数（）{
startMyCode（）；
}
);

RequireJS的功能更强大，因为它不是按顺序执行脚本，而是按依赖关系执行脚本，而是要求您将代码组织在模块中（而不是Head.JS，您可以在不修改代码的情况下使用它）

---

EDIT：实际上，考虑到

Head.JS

似乎不再被维护，也许最好还是继续。澄清一下——这些事情要做的是管理代码的异步加载，然后确保在加载所有位时以正确的顺序执行（可以像Head.JS那样按顺序执行，也可以以某种基于依赖关系图的方式执行）。

如果要确保在jQuery之后加载自己的脚本，可以添加defer属性

---

看看这个：

如果要确保在jQuery之后加载自己的脚本，可以添加defer属性

---

看看这个：

@adergard当你说“我们所有的javascript”时，你是指整个网站吗？例如不止一页？是的。出于多种原因，我们将应用程序的基本逻辑放在一个相当大（90kb）的js文件中。统计数据、日期时间选择器等的图表，我们有脚本之外的内容，这些内容加载在需要的页面上。他们不是问题所在。问题是-我们如何在不中断顺序的情况下实现异步。@Adergard在自定义js文件的顶部循环（window.jQuery！==undefined）是一个可怕的想法吗？@Adergard当你说“我们所有的javascript”时，你是指整个站点吗？例如不止一页？是的。出于多种原因，我们将应用程序的基本逻辑放在一个相当大（90kb）的js文件中。统计数据、日期时间选择器等的图表，我们有脚本之外的内容，这些内容加载在需要的页面上。他们不是问题所在。问题是-如何在不中断顺序的情况下实现异步。@Adergarrd在自定义js文件的顶部循环（window.jQuery！==undefined）是一个可怕的想法吗？也许我的问题还不太清楚，但我们的主要抱怨是移动脚本以异步加载。您的解决方案仍然同步加载。仍然要感谢。不，唯一的同步负载是

head.js

，它非常小。起初我没想到你不想使用第三方软件，但这确实是最好的选择。也许我的问题不太清楚，但我们的主要抱怨是移动脚本以异步加载。您的解决方案仍然同步加载。仍然要感谢。不，唯一的同步负载是

head.js

，它非常小。起初，我没想到你不想使用第三方软件，但这确实是最好的选择。延迟是异步的丑陋表亲，因为我了解它，所以。。。不，谢谢。据我所知，延迟是异步的丑陋表亲，所以。。。不用了，谢谢。