Javascript – 头部，身体还是jQuery？
这个问题只是为了澄清一些事情。 这样的一些事情之前已经被问到过了，这就把他们都归结为一个问题 – JavaScript应该放在HTML文档中，还是更重要的是什么？ 所以我要问的是，
<head> <script type="text/javascript"> alert("Hello world!"); </script> </head> 根本不同（就function而言）
<body> <!-- Code goes here --> <script type="text/javascript"> alert("Hello world!"); </script> </body>
更重要的是，我想专注于以任何方式修改或使用DOM元素的JS。 所以我知道，如果你把类似document.getElementById("test").innerHTML = "Hello world!" 在你的body里<element id="test"></element> ，那么它不会工作，因为body是从上到下加载的，所以JS首先加载，然后继续尝试操作一个元素尚不存在。 所以它应该像上面那样在<head>或者</body>标签之前。 问题是，除了组织和sorting之外，select哪一个是重要的，如果是，以什么方式？
当然，还有第三种方法 – jQuery的方式：
$(document).ready(function(){ /*Code goes here*/ });
这样，放在代码中的哪个位置并不重要，因为只有在加载完成后才能执行。 这里的问题是，是否值得导入一个巨大的JS库， 只是为了使用一个方法的需要，可以用一个准确的摆放你的脚本？ 如果你想回答的话，我只想在这里澄清一下，继续吧！ 总结：不同types的脚本应该放在哪里 – 头部还是身体，和/或者它有什么关系？ jQuery是值得的只是为了准备好的事件？
最推荐的方法是把它放在</body>标签之前。 雅虎performance文章还build议，除了YSlow和Page Speed分别由雅虎和谷歌分别添加。
从上面链接的雅虎文章引用：
脚本造成的问题是阻止并行下载。 HTTP / 1.1规范build议浏览器每个主机名并行下载至less两个组件。 如果您从多个主机名提供图像，则可以同时进行两个以上的下载。 然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使在不同的主机名上。
当你把脚本放在<head>标签中时，浏览器就会使用它们，从而保持其他的东西，直到脚本被加载，用户会感觉到像加载缓慢的页面。 这就是为什么你应该把脚本放在底部。
至于：
$(document).ready(function(){/*Code goes here*/});
当DOM可用并准备好被操作时，它被触发。 如果你把你的代码放在最后，你不一定会需要这个，但通常这是需要的，因为只要DOM可用，你就想做一些事情。
尽pipe通常的做法是将script标签放在首位，但这通常不是一个好主意，因为它阻止了页面的渲染，直到这些脚本被下载和处理（禁止使用async或defer并且浏览器支持它们）。
通常的build议是将script标签放在body标签的最后，例如</body>之前。 这样，脚本上方的所有DOM元素都可以访问（请参阅下面的链接）。 需要注意的是，当你的页面至less被部分渲染，但你的脚本还没有被处理，并且如果用户开始与页面交互，他们可能会做一些事情来引发一个事件，你的脚本还没有时间来钩。 所以你需要意识到这一点。 这是渐进式增强的一个原因，这是页面可以在没有JavaScript的情况下工作的想法，但是可以更好地工作。 如果你正在做一个页面/应用程序，如果没有JavaScript，那么你可能会在body标签的顶部包含一些内联脚本（例如<script>minimal code here</script> ），在document.body上冒泡事件，并且当你的脚本被加载时将它们排队等待，或者只是要求用户等待。
使用像jQuery的ready特性是好的，但在库之外不是必须的（例如，如果您控制script标记的位置，通常不需要使用它;但是如果您正在编写jQuery插件，需要做一些负载[这是相对较less的，通常他们只是等待被称为]，你通常会这样做）。
更多阅读：
- YUI加快您的网站的最佳实践
- Google在什么时候DOM准备就绪
可以通过做这样的事情来同时下载javascripts：
(function () { var ele = document.createElement('script'); ele.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; ele.id = "JQuery"; ele.onload = function () { //code to be executed when the document has been loaded }; document.getElementsByTagName('head')[0].appendChild(ele); })();
在这个例子中，它从Google下载了精简的JQuery v1.7.2，这是下载JQuery的好方法，因为从Google下载它就像使用CDN一样，如果用户在使用同一个文件的页面上，它可能被caching，因此不需要下载
有一个非常好的Google技术讨论在这里http://www.youtube.com/watch?v=52gL93S3usU&feature=plcp
