JavaScript 与脚本文件放置位置混淆答案

【问题标题】：JavaScript confusing with script file placing placeJavaScript 与脚本文件放置位置混淆
【发布时间】：2016-08-18 15:49:27
【问题描述】：

技术上，将脚本放在 html 页面底部是 JavaScript Best Practice。但我很困惑为什么某些脚本应该在页面顶部调用，例如Angular。那么，当我使用类似 Angular 的库时，我是否违反了 JavaScript 最佳实践？

有什么解释吗？

【问题讨论】：

最佳实践是指南，而不是规则。
没关系。 Angular 会加载您的页面，因此无论如何您都必须等待 JS 加载完毕。将它们放在底部的原因是您不会增加页面加载等待时间。
@Tushar 感谢您的提示。
@Randy。谢谢我明白了

标签： javascript angularjs

【解决方案1】：

从技术上讲，如果您不太关心脚本文件的顺序加载，这只是最佳做法。您发现在调用它之前首先需要一个库。因此，人们在加载 HTML 之后将所有自定义脚本加载到底部，因此他们不需要处理特定的 DOM loaded 事件并对抗 render blocking scripts，当您简单地将它们全部放入时会发生这种情况在 head 标签中。

但是 JavaScript 库实际上是需要首先完全加载的依赖项。从技术上讲，也适用于小频段（或者现在将其与慢速智能手机进行比较）。而且你还应该知道http协议允许你一次下载2个请求。

考虑到这些信息，我说最佳实践是一个捆绑的脚本文件，它以async 模式从head-tag 加载，最好是缩小。可以通过 grunt/gulp 设置或某种方式实现。

<head>
    <title></title>
    <script src='path-to-bundled-script.js' async='async' />
</head>

async 属性确保页面加载不会等待此脚本完全加载。它仍然会等待多个 http 请求，因此需要捆绑顺序执行。

因此，当您进行开发并且没有为此捆绑包完成 grunt/gulp 设置时，您会遇到错误，指出库未加载或符号无法识别。

要解决这个问题，您可以使用属性defer。

<head>
    <title></title>
    <script src='path-to-library.js' defer='defer' />
    <script src='path-to-library2.js' defer='defer' />
    <script src='path-to-library3.js' defer='defer' />
    <script src='path-to-custom1.js' defer='defer' />
    <script src='path-to-custom2.js' defer='defer' />
</head>

使用 defer 属性，页面加载将等待脚本执行，而不是等待 HTML 完全加载。

使用此技术，您可以忘记关闭 body 标记作为最佳实践，您将获得可通过 google 的 pagespeed insight 测试的速度

【讨论】：

【解决方案2】：

这实际上取决于要加载的页面的内容（要提取的数据）。如果大部分是静态的，只有很少的 AngularJS 绑定，那么最好将它放在底部。但是对于完全动态的内容，您希望在页面顶部加载 AngularJS，例如在 RESTful Web 服务中。如果我们需要 Angular 中的一些数据（绑定），逻辑很简单，我们需要将其放在顶部。

【讨论】：