多年前，我在<script> will block page rendering中了解了<head>，减少了网站的感知加载时间，相反，它们应该包含在<body>的末尾。< / p>
我想这不适用于doesn't work without JavaScript anyway的webapp。实际上，由于模板编译，甚至应该首先加载它们。但是，在Ember和Angular的所有教程中，我都看到最后包含的脚本。它还合理吗？
答案 0 :(得分：13)
关于角度，大部分时间，你把它们放在哪里几乎没什么区别。在大多数Web应用程序角度情况下，您将拥有一个非常小的起始页面。大多数实际功能将通过视图或ui-view注入（如果你使用的是角度ui）。
Angular还包含一个名为ng-cloak的指令，该指令将隐藏您的应用，直到模板编译和呈现为止。这是从最终用户隐藏模板语法直到它准备就绪的好方法。
关于放置脚本的主题，Angular的官方文档说：
将脚本标记放在页面底部。放置脚本标签 页面的末尾会增加应用程序加载时间，因为HTML加载是 没有被加载angular.js脚本阻止。 http://docs.angularjs.org/guide/bootstrap
实际上，除非您有很多其他立即执行的脚本（jQuery小部件，插件等），否则您将看不到小型应用程序的性能差异。如果你使用一组足够大的控制器进入应用程序，将它们放在底部也不会有什么坏处。不过，在那时，您应该考虑一种更为成熟的技术：减少http请求。
这是另外一种蠕虫，但是像Grunt这样的自动化任务运行器可以处理缩小和组合不同的控制器脚本。
答案 1 :(得分：4)
在<head>中加载脚本是有好处的。例如，$.ajax可以在DOM准备好之前开始提出请求。因此，如果您的网络应用依赖于外部数据（例如配置JSON），则在$.getJSON()中拥有应用的head部分会减少感知加载时间。
当然，就像你说的那样，head脚本是阻塞的。在很大程度上，你的脚本应该是个案。
答案 2 :(得分：4)
添加迈克的回答
脚本的包含应按以下方式进行：
这样做的原因：
当你的网络应用程序加载时，初始机制将开始建立连接，当你的页面数据被加载时，它们将具有适当的后台连接，以便你启动功能。
最后使用DOM操作和数据存储有助于通过提供对其请求起作用的数据访问来最小化CPU和内存使用，如果在DOM元素存在的早期调用该函数，这可能是不可能的。页面。
使用ng-cloak可确保在完成渲染之前阻止您查看DOM元素。因此，您可以进行操作，而无需担心页面加载过程中的任何尴尬。
答案 3 :(得分：3)
我会稍微扩展一下。正如我在注释脚本块中所说的，无论你将它们放在何处，除非你在它们上面放置async属性。你可以把它们放在开头或结尾，也可以。据我所知，将它们放在最后的原因是因为尽快启动了像加载图像这样的异步提取操作。将它们放在最后并没有什么坏处。只需确保您的库脚本放在您使用它们的脚本之前。
答案 4 :(得分：1)
“包括页面底部的所有j而不是头部”是一个古老的概念。它今天没有影响。
现代浏览器足够聪明，可以决定哪些内容可以并行下载。在现代浏览器的情况下，head内的脚本并不总是阻止页面呈现
过去的带宽非常低。但今天我们的MBPS带宽。我们的脚本的平均大小最大为100到200 KB。加载这个JS
结论：不要担心让脚本不在head标签中的概念：）
答案 5 :(得分：-1)
Google PageSpeed checker（http://developers.google.com/speed/pagespeed/insights/）希望将脚本放在最后。当您同时定位移动设备时，这也会更加昂贵。因此，即使页面需要js才能更好地将其加载到底部。首先加载静态页面，并让用户了解内容。之后，你用脚本让它活着。