页面中脚本标签的位置如何影响其中定义的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/
注意：注意< 在这一行： for(var i=0;i<st.length; i++)
如果您在函数调用之前有一个内联脚本（外部函数），则可能会因为可能尚未提供而出现错误。 不要说这总是会发生，只是它可能取决于浏览器的types或版本。
如果你的脚本在页面上引用了一个ID并且该页面没有被渲染（例如，脚本在HTML之前，或者你的脚本是用onload执行的，而DOM已经准备好了），你也可以得到一个错误。
Javascript的范围规则与perl相似 – 你可以在当前或更高范围级别调用任何函数。 唯一的限制是函数必须在你调用的时候被定义。 来源的立场是不相关的 – 只有时间上的位置很重要。
如果可能，应避免将脚本放在<head> ，因为它会减慢页面显示速度（请参阅Alan发布的链接）。
