<head> 或页面底部的RequireJS脚本标签？答案

【问题标题】：RequireJS script tag in <head> or at bottom of page?<head> 或页面底部的RequireJS脚本标签？
【发布时间】：2014-02-04 13:34:00
【问题描述】：

RequireJS 脚本标签应该位于<head> 还是 HTML 页面的底部？

<script data-main="resources/js/main" src="require.js"></script>

我已经看到有信誉的来源将 RequireJS 脚本标记放在任一位置，但似乎没有有信誉的来源明确说明理想位置在哪里。

将 标签放在头部的论据是 RequireJS 可以在页面继续加载时已经开始异步加载和执行依赖脚本（尽管这种增益可能微不足道）。

将标签放在页面底部的论据是在模块中不需要检查 DOM 是否准备就绪（但如果模块不包含此检查可能会导致问题）用于加载<head>标签中的脚本的第三方系统。

【问题讨论】：

嗨！我正在尝试使用 RequireJs。我观察到，无论您将 requirejs 脚本标记放在头部还是正文中，它总是将依赖脚本加载到头部。有什么办法可以强制Requirejs在底部加载所有依赖的javascripts？？

【解决方案1】：

一般的最佳做法是始终将脚本放在底部。

您可能已经看到人们将它包含在 HEAD 中，因为它并没有太大的区别。

我建议放在底部，因为您想在生产之前构建脚本，否则您最终会在头部加载所有脚本。

请注意，如果您正在运行“单页应用程序”，那么这并不重要，因为您的主体可能是空的 - 或几乎是空的。

【讨论】：

【解决方案2】：

将它放在页面底部，这样会更好地提高性能，如果您打算操作页面（如预期的那样），那么无论如何您都希望它首先加载页面。

除了少数例外，最佳实践始终是：

【讨论】：

【解决方案3】：

我正在开发一个项目，其中包含大量模板和大约 1MB 的页面加载 js，将 requireJS 放在页面顶部有它的好处。 Require 可以在其余的 html 下载时开始调度和解析 js。此外，我们注意到，这允许我们在所有 html 出现之前在页面中“要求”css。

我今天确实发现了一个警告，如果在页面的头部/脚本标签之前加载了require，脚本标签可能会执行两次。我正在尝试创建一个示例进行调试。

【讨论】：