我即将开始一个新的网络项目，我计划使用以下方案将一些 JavaScript 放入<head>和 之前 中</body>：
页面用户体验必不可少的脚本：在<head>. 由于我已经开始仔细阅读网页 - 在<head>页面加载之前加载脚本中的脚本，因此将用户体验必不可少的脚本放在那里是有意义的。
对设计和用户体验不重要的脚本（Google Analytics 脚本等）：在</body>.
这是一种明智的做法吗？
另一种方法是将所有脚本放在 中<head>，并将 defer 属性添加到非必要脚本中。但是，我读到旧版本的 Firefox 没有选择 defer 属性。
我认为很多开发人员在 之前运行 JavaScript，</body>以便在所有元素都被渲染之后运行。
但是，如果您正确组织代码，则页面上的位置无关紧要。
例如，在使用 jQuery 时，您可以通过执行以下操作来确保在页面及其元素完全呈现之前不会运行代码：
$(document).ready(function(){
//Code here
});
然后可以将脚本引用放入head标记中。
脚本标签应该在</body>. 这可以防止在脚本加载时呈现阻塞，并且对于站点感知速度要好得多。
使用此技术时不应使用任何突兀的 JavaScript。
您希望将脚本放在 之前的原因之一</body>是如果它们在没有用户交互的情况下操作 DOM，因此您需要加载 DOM 才能进行操作。另一种方法是添加一个事件侦听器并在页面加载时运行脚本，但这将需要额外的代码，如果您有很多脚本，尤其是您没有自己编写的脚本，这可能会变得复杂。将它们放在页面末尾也会加快页面加载速度，但在 DOM 操作脚本的情况下，您可能会从中得到一些不太漂亮的结果。
这一切都取决于您所说的“对用户体验至关重要”的含义。例如，我同意让Modernizr尽早出现，但并非所有内容都需要立即加载。如果您想避免一闪而过的无样式文本 (FOUT)，这是一个很好的理由。同样，如果您的脚本会在用户执行任何操作之前影响页面的外观，则应尽早加载这些脚本。
但不要忘记，速度是用户体验的一部分。当用户还看不到它所应用的内容时，让一些 jQuery 交互准备好运行没有任何好处。在结束时加载脚本之间的差异是几秒钟的事情。如果您让页面先加载，用户将使用这几秒钟来加载页面，从而允许您不显眼地加载脚本。
如果您将脚本移动到页面底部，您的页面加载速度会更快，这会对您的页面排名产生影响。
此外，如果您在引用的元素加载之前尝试运行脚本，某些版本的 Internet Explorer 将引发错误。
就像 Ed 说的那样，你的脚本应该存储在一个单独的文件中，并且尽可能少地存储在文件中。