在JS代码中加载脚本的优缺点是什么？

Question

在JavaScript中，有一种方法可以在代码中动态加载其他脚本。对我来说，作为一个主要是Java背景的开发人员，这似乎更自然，似乎是关注点的分离（代码及其依赖关系在JS代码中，而HTML仅用于标记）。

但似乎没有广泛使用在代码中动态加载脚本。在我看来，在HTML中声明依赖关系的唯一好处是可以加速JavaScript加载。有什么好处吗？在JS代码中加载脚本的其他优缺点是什么？

Answer 1

在脚本中加载资源会延迟加载资源，直到执行脚本为止（duh）。将javascript文件引用放在body标记的末尾是一种很好的做法，以防止它阻止其他下载，如标记本身和图像。所以加载它们会产生同样的效果。

CSS文件放在head标记中，因为浏览器需要尽可能快的信息来开始布局您的网站。布局不需要Javascript文件，因为它们经常依赖于DOM操作，因此需要等到DOM完全加载。因此，javascript文件到body的最后。有一些例外，但一般来说你可以这样做。

通常不需要链接到任何依赖项（或者它应该是不需要的），因为将所有javascript文件缩小和连接到一个大文件并在HTML中引用它也被认为是一种很好的做法。这减少了加载网站所需的HTTP连接数（每个“外部”资源都会生成新的HTTP连接）

Answer 2

动态加载脚本经常在有用的地方使用，因此存在$.getScript()。

与Java相比，动态加载JS依赖项的一个大问题是每一个都会发出另一个HTTP请求。最小化请求数量是前端优化的主要问题之一。这就是为什么大多数时候所有Javascripts都捆绑在一个文件中。

需要非常大且很少使用Javascript依赖项才能使动态加载生效。

[编辑]但是，如果你正在寻找一个明确的Javascript依赖系统，那么有很多。例如，Ruby on Rails的人使用Sprockets - 您可以require一个来自另一个脚本的脚本，并且所有依赖项将被收集到一个文件中进行部署（非常类似于JAR文件）。