大多数javascript和网页开发书籍/文章都说你必须把CSS放在head标签和页面底部的javascript中。
但是当我打开像这个stackoverflow这样的知名网站的html源代码时，我发现他们在head标签中放了一些js文件。
两种方法的优缺点是什么？何时使用哪种方法？
针对同一问题找到了另一个问题： Where should I declare JavaScript files used in my page? In <head></head> or near </body>?
答案 0 :(得分：59)
来自雅虎的Best Practices for Speeding Up Your Web Site：
脚本引起的问题是 他们阻止并行下载。该 HTTP / 1.1规范表明 浏览器下载不超过两个 每个主机名并行的组件。 如果您从多个图像提供图像 主机名，你可以得到两个以上 下载并行发生。而 然而，脚本正在下载 浏览器不会启动任何其他 下载，甚至是不同的 主机名。
在某些情况下，这并不容易 将脚本移到底部。如果，为 例如，脚本使用 document.write插入部分内容 页面的内容，它无法移动 在页面下方。可能还有 范围问题。在许多情况下，那里 是解决这些问题的方法 的情况。
经常提出另一种建议 出现的是使用延迟脚本。 DEFER属性表示 脚本不包含 document.write，是一个线索 浏览器，他们可以继续 渲染。不幸的是，Firefox 不支持DEFER属性。 在Internet Explorer中，脚本可以 被推迟，但没有那么多 期望。如果脚本可以延期， 它也可以移到底部 这页纸。这将使你的网络 页面加载速度更快。
因此，一般来说，最好将它们置于底部。但是，它并不总是可行的，而且通常不会使 产生很大的差异。
答案 1 :(得分：29)
正如其他人所说，当你将javascript放在头部时，它会延迟页面的呈现，直到脚本加载完毕，这意味着页面可能需要更长时间才能加载 - 特别是如果你正在下载大型脚本文件。 / p>
如果将脚本标记移动到页面末尾，则将确保浏览器在脚本标记之前下载图像和样式表，并且在脚本开始运行之前可能会显示页面。这也意味着如果您依赖脚本中的某些功能，那么只有在用户看到该页面之后，这个功能才可用。
如果您要添加样式或元素（以及使用某种形式的更丰富的编辑器切换文本字段），则用户可以将其视为闪烁。
如果要向元素添加点击事件，则在元素本身可见之后，它们将无法点击。
有时这些问题需要你把你的脚本放在头脑中，有时你可以把它们放在底部。
恕我直言（完全反对YSlow和很多聪明的人）你应该将你的脚本保留在head标签中，并且只是在大多数时间依赖它们进行缓存。
答案 2 :(得分：8)
通常，您应该在页面底部放置脚本引用。脚本不仅需要下载，还必须在块发布之前评估和执行，并且页面继续进行渲染过程。像Modernizr这样的东西应该放在顶部，因为它会执行一些功能检测以及你可能想要的HTML5填充程序。
您想要尝试在页面底部放置脚本的另一个原因是单点故障或SPOF。这是脚本调用超时或出于某些其他原因阻止页面执行的地方。第三方广告图书馆等可能会发生很多事情。
是的，您可能需要更加努力地思考如何构建应用程序，但我发现它对我来说非常自然。在过去的4年中，我已经构建了数百个Web应用程序，底部的脚本可以区分出来。我可能是500毫秒它可能是5000毫秒，但这一切都很重要。
答案 3 :(得分：5)
这取决于您的网站。如果您正在访问并调用正文中的JavaScript函数，则必须在标题中引用它以便加载它。否则，如果您只是在加载整个文档时调用JavaScript，那么将JavaScript放在正文末尾是明智的。通过将.JS文件放在最后，您可以加载整个页面，然后获取.JS文件。这样，用户将能够快速查看页面，并且当他/她熟悉页面时，已经下载了.JS文件。
答案 4 :(得分：4)
在加载页面之前，将评估头部中的任何javascript，这意味着页面感觉加载需要更长时间。如果所有的javascript都在最后，让事件正常工作会稍微困难一些，但jQuery几乎可以解决这个问题。