页面中脚本标签的位置如何影响其中定义的JavaScript函数?

我读过你应该在<head>标签中定义你的JavaScript函数,但是<script>的位置(不pipe是在<head><body>还是任何其他标签)对JavaScript函数有什么影响。

具体来说,它是如何影响函数的范围和可以从哪里调用的?

告诉人们只在头部添加<SCRIPT> 听起来像是一个合理的事情,但正如其他人所说,为什么不推荐这么做,甚至是不切实际的原因有很多 – 主要是速度和HTML页面dynamic生成的方式。

这是HTML 4规范所说的 :

SCRIPT元素在文档中放置一个脚本。 该元素可能出现在HTML文档的HEAD或BODY中任意多次。

和一些示例HTML。 这不是看起来很漂亮,在这里格式化:)

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A document with SCRIPT</TITLE> <META http-equiv="Content-Script-Type" content="text/tcl"> <SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc"> </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> ...some JavaScript... </SCRIPT> </BODY> </HTML> 

还有一些在HTML 5中值得期待的东西:

<SCRIPT>新asynchronous属性:

注意:脚本可以被执行的方式有[sic]

asynchronous属性为“true”:脚本将与页面的其余部分asynchronous执行,因此脚本将在页面继续parsing时执行。

async属性为“false”,但defer属性为“true”:脚本将在页面parsing完成时执行。

正常的游戏规则仍然存在; 在定义之前不要使用东西。 🙂

另外,请注意,“把所有东西放在最底部”的build议并不是书中唯一的规则 – 在某些情况下可能是不可行的,而在其他情况下,将脚本放在其他地方可能更有意义。

将脚本放在文档底部的主要原因是性能,与其他HTTP请求不同,脚本不会并行加载,这意味着它们会减慢页面的其他部分的加载速度。 将脚本放在底部的另一个原因是您不必使用任何“DOM就绪”function。 由于脚本标记低于所有元素,DOM将准备好进行操作!

编辑:阅读: http : //developer.yahoo.com/performance/rules.html#js_bottom

放置的一个方面是性能。 为什么有时候build议你把它们放在文档的底部,在YSlow的讨论中看到这篇精美的文章 。

至于范围问题,就我所知,Javascript的通常可见性规则(在函数内部或外部定义的variables,本地,全局闭包等)不受影响。

脚本标签的位置很重要。 如果你将一个函数与文档元素绑定,那么在我们实现函数之前,必须首先加载文档元素。 假设getTeachers()是getTeachers.js文件中的函数。 这会给你一个错误:

 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unit Teachers</title> <head> <script type="text/javascript" src="getTeachers.js"></script> <script type="text/javascript"> document.getElementById("buttonId").onclick=function(){getResults()}; </script> </head> <body> <form> <input type = "button" id="buttonId" value = "Press for Results" /><br /> </form> <span id="results" /></span> </body> </html> 

它会在首先加载头之前给出错误,并且找不到指定了id的元素。 下面的代码是更正:

 <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Unit Teachers</title> <head> <script type="text/javascript" src="getTeachers.js"></script> </head> <body> <form> <input type = "button" id="buttonId" value = "Press for Results" /><br /> </form> <script type="text/javascript"> document.getElementById("buttonId").onclick=function(){getResults()}; </script> <span id="results" /></span> </body> </html> 

它不。 大多数编程框架都将脚本分散在整个页面中。 我只有很less见到的问题,因为(只有从旧的浏览器)。

如果你通过XMLHttpRequest来拉动JavaScript,就像Diodeus说的那样,它可能不起作用。 在我的情况下,没有错误,浏览器只是忽略新的脚本。

我结束了使用这个,不是非常优雅,但为我工作到目前为止:

http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/

如何使用execJS:http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/

注意:注意&lt; 在这一行: for(var i=0;i<st.length; i++)

如果您在函数调用之前有一个内联脚本(外部函数),则可能会因为可能尚未提供而出现错误。 不要说这总是会发生,只是它可能取决于浏览器的types或版本。

如果你的脚本在页面上引用了一个ID并且该页面没有被渲染(例如,脚本在HTML之前,或者你的脚本是用onload执行的,而DOM已经准备好了),你也可以得到一个错误。

Javascript的范围规则与perl相似 – 你可以在当前或更高范围级别调用任何函数。 唯一的限制是函数必须在你调用的时候被定义。 来源的立场是不相关的 – 只有时间上的位置很重要。

如果可能,应避免将脚本放在<head> ,因为它会减慢页面显示速度(请参阅Alan发布的链接)。