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标签放在首位,但这通常不是一个好主意,因为它阻止了页面的渲染,直到这些脚本被下载和处理(禁止使用asyncdefer并且浏览器支持它们)。

通常的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