结合jQuery +自定义脚本与async或不

Combining jQuery + custom script with async or not?

本文关键字：async 或不 脚本 自定义 jQuery 结合      更新时间：2023-09-26

当我们想要加快一个网站的初始加载速度时，我们把所有的javascript放在一个组合文件中，现在相当大——大约90kb。所有的分析工具都在说"你应该切换到async来避免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在我们之前加载?

或者，作为一个非解决方案，我们只是不关心这个，专注于其他东西，即，是否真的值得去寻找最后的性能增益?

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

看看这个:http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

更好的方法是使用脚本加载器，例如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>

RequireJS更强大一点，因为它不按顺序执行脚本，而是按依赖项执行，但要求你将代码组织成模块(与Head.JS相反，你可以在不修改代码的情况下使用它)。

EDIT:实际上，考虑到Head.JS似乎不再被维护，也许最好使用$script.js。澄清一下——这些东西的作用是管理代码的异步加载，然后确保在加载所有位时以适当的顺序执行(如Head.JS所做的顺序，或以某种基于依赖图的方式)。

相关文章：