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

我读到,您应该在2989984408406590590464标记中定义JavaScript函数,但是2989984408408406590465的位置(无论在<head><body>或任何其他标记中)的位置如何影响JavaScript函数。

具体来说,它如何影响函数的范围以及在何处可以调用它?

Mark Rogers asked 2020-07-31T00:17:48Z
9个解决方案
26 votes

告诉人们仅在头部添加<SCRIPT>听起来是一件合理的事情,但是正如其他人所说的,不建议这样做甚至不切实际的原因有很多-主要是速度和动态生成HTML页面的方式。

这就是HTML 4规范所说的:

SCRIPT元素放置一个脚本 在文档中。 这个元素可能 在HEAD中出现任意次数 或HTML文档的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>中的新异步属性:

注意:脚本可以通过多种方式 执行:

async属性为“ true”: 脚本将异步执行 与页面的其余部分,因此 页面执行脚本 继续解析。

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

Simon_Weaver answered 2020-07-31T00:18:33Z
19 votes

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

另外,请注意,“把一切都放在最底层”的建议并不是本书中唯一的规则-在某些情况下可能不可行,在其他情况下将脚本放到其他地方可能更有意义。

将脚本放在文档底部的主要原因是为了提高性能,与其他HTTP请求不同,脚本不会并行加载,这意味着它们会减慢页面其余部分的加载速度。 将脚本放在底部的另一个原因是,您不必使用任何“ DOM ready”功能。 由于script标签位于所有元素的下方,因此DOM已准备好进行操作!

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

James answered 2020-07-31T00:19:07Z
9 votes

放置的方面之一是性能。 请参阅YSlow讨论中的这篇精美文章,以了解为什么有时建议您将它们放在文档的底部。

至于范围问题,据我所知,Javascript的常规可见性规则(在函数内部或外部,局部,全局,闭包等内部或外部定义的变量)不会受到影响。

Alan answered 2020-07-31T00:19:32Z
4 votes

脚本标签的位置很重要。如果将功能与文档元素绑定,则在实现功能之前必须首先加载文档元素。 假设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>
Dhwaneel answered 2020-07-31T00:19:56Z
2 votes

没有。 大多数编程框架都会在整个页面中分散脚本。 因此,我很少见到问题(并且仅在较旧的浏览器中)。

TheSmurf answered 2020-07-31T00:20:16Z
2 votes

如果您的脚本引用了页面上的ID并且页面尚未呈现(即脚本在HTML之前,或者您的脚本是通过onload执行的,而DOM已准备就绪),您也会收到错误消息。

Diodeus - James MacFarlane answered 2020-07-31T00:20:37Z
2 votes

如果您像Diodeus所说的那样通过XMLHttpRequest拉入Javascript,它可能就行不通了。 就我而言,没有错误,浏览器只是忽略了新脚本。

我最终使用了这个,虽然不是很优雅,但是到目前为止对我有用:

[HTTP://则他-Puppis.com/2006/03/07/JavaScript-script-execution-in-innerHTML-他和-revenge/]

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

注意:请注意以下行中的&lt;for(var i=0;i<st.length; i++)

PJ Brunet answered 2020-07-31T00:21:14Z
1 votes

如果在调用函数之前有一个内联脚本(外部函数),则可能会出错,因为它们可能尚不可用。 并不是说它总是会发生,只是取决于浏览器的类型或版本。

Otávio Décio answered 2020-07-31T00:21:34Z
1 votes

Javascript的范围规则与perl相似-您可以在当前范围或更高范围的范围内调用任何函数。 唯一的限制是必须在调用函数时定义该函数。 源中的位置无关紧要-只有时间位置才重要。

您应该尽可能避免在<head>中放置脚本,因为这会减慢页面显示速度(请参阅Alan发布的链接)。

answered 2020-07-31T00:21:59Z
translate from https://stackoverflow.com:/questions/496646/how-does-the-location-of-a-script-tag-in-a-page-affect-a-javascript-function-tha