Question

我即将开始一个新的Web项目，我打算使用以下方案在<head>和</body>之前放置一些JavaScripts：

对于页面用户体验至关重要的脚本：在<head>中。由于我已经开始仔细阅读网页 - <head>中的脚本在页面加载之前加载了，因此在那里放置对用户体验至关重要的脚本是有意义的。
对设计和用户体验不重要的脚本（Google Analytics脚本等）：在</body>之前。

这是一种明智的做法吗？

另一种方法是将所有脚本放在<head>中，并将延迟属性添加到非必要脚本中。但是，我读到旧版本的Firefox没有获取延迟属性。

Answer 1

我认为很多开发人员在</body>之前运行javascript，以便在渲染完所有元素后运行它。

但是，如果您正确组织代码，页面上的位置无关紧要。

例如，在使用jQuery时，您可以通过执行以下操作来确保在页面及其元素完全呈现之前不运行代码：

$(document).ready(function(){
   //Code here
});

然后可以将脚本引用放在head标记中。

更新 - 应在</body>之前引用脚本标记。这可以防止脚本加载时渲染阻塞，并且对于站点感知速度更好。

使用此技术时不应使用任何突兀的JavaScript。

Answer 2

Javascript应该放在文档的末尾，这样它就不会延迟页面元素的并行加载。这确实需要以特定方式编写js，但它确实提高了页面加载的速度。

另外，理想情况下，您可以在不同的（子）域下托管此类引用。对jquery的引用也应该指向谷歌CDN。

有关详细信息，请参阅http://developer.yahoo.com/performance/rules.html。

Answer 3

我会说那是非常明智的。正如你所说，只要你不从<head>移出必要的脚本（例如jQuery，Modernizr等），你就不会有问题。

将非必要脚本移动到页面底部应该有助于感知加载速度（最小化/连接脚本）。

Answer 4

您希望在</body>之前放置脚本的原因之一是，如果他们在没有用户交互的情况下操作DOM，那么您需要加载DOM才能进行操作。另一种方法是添加一个事件监听器并在页面加载时运行脚本，但这需要额外的代码，如果你有很多脚本，可能会变得复杂，特别是那些你自己没有写过的脚本。将它们放在页面的末尾也会加快页面加载，但是在DOM操作脚本的情况下，你可能会得到一些不那么漂亮的结果。

Answer 5

这一切都取决于你对“UX必不可少”的意思。我同意让modernizr早早出现，但不是所有东西都需要立即加载。如果你试图避免闪烁无格式文本（FOUT），这是一个很好的理由。同样，如果您的脚本在用户执行任何操作之前影响页面的外观，则应尽早加载。

不要忘记，速度是UX的一部分。当用户无法看到它适用的内容时，准备运行一些jquery交互没有任何好处。在开始结束时加载脚本之间的区别只有几秒钟。如果您首先加载页面，则用户将使用这些秒来获取页面，允许您不显眼地加载脚本。

如果您将脚本移动到页面底部，您的页面加载速度会更快，这会对您的Pagerank产生影响。

此外，如果您尝试在引用的元素加载之前运行脚本，某些版本的IE将会抛出错误。

就像Ed所说，你的脚本应该存储在一个单独的文件中，并尽可能少地保存在文件中。

Answer 6

将Javascript放在一个单独的文件中，并在HTML的头部放置一个链接。

JavaScript还是之前？

6 个答案: