If you have JS code which is intended to run as part of loading/building the page, where in the HTML should this go? For instance modifying a <div> or adding some links. Should this be put in the <body>, interspersed with HTML? Or should it be between the <head> and <body> elements? What order do things happen in - the order they are in the page or does HTML all happen before (non-<head>) JS is run?
如果您有JS代码，它打算作为加载/构建页面的一部分运行，那么它应该放在HTML中的什么位置呢?例如修改
5 个解决方案
#1
8
The whole HTML file is executed in the order it is written, that means
整个HTML文件的执行顺序是按其编写的顺序进行的
<html>
<div id="ID"></div>
<script type="text/javascript">
document.getElementById('ID').innerHTML = "HELLO";
</script>
</html>
changes the contents of the div, wherease
更改div的内容
<html>
<script type="text/javascript">
document.getElementById('ID').innerHTML = "HELLO";
</script>
<div id="ID"></div>
</html>
does not, because the JS code is executed before the div has loaded.
不会，因为JS代码是在div加载之前执行的。
EDIT: If you want the JS to run after the page has loaded use window.onload or document.body.onload or
编辑:如果你想让JS运行后，页面已经载入使用窗口。onload或document.body。onload或
<body onload="...">
Alternatively if you're using a JS library such as jQuery, you can use
或者，如果您使用的是像jQuery这样的JS库，您也可以使用
$(document).ready(function() {
...
});
#2
33
If you have JS code which is intended to run as part of loading/building the page, where in the HTML should this go?
如果您有JS代码，它打算作为加载/构建页面的一部分运行，那么它应该放在HTML中的什么位置呢?
Just before the closing </body> tag is emerging as the best practice barring a specific requirement for it to be elsewhere (which there can sometimes be). It's the recommendation of the YUI folks, for instance, but it's not just them.
就在结束标记出现之前，最好的实践是将它放在其他地方(有时是这样)。比如，这是YUI的推荐，但不只是他们。
What order do things happen in - the order they are in the page or does HTML all happen before (non-) JS is run?
在运行(非-)JS之前，页面中出现的顺序是什么?
When a script tag is encountered, unless you use the defer or async attribute (and the browser supports them), all HTML parsing comes to a screeching halt and the script is downloaded and handed to the JavaScript interpreter. When the JavaScript interpreter finishes processing the script, the HTML parser can continue. It has to do this because the JavaScript can insert tokens into the HTML stream via document.write. This is also why you can load a script file and then load a second script file that relies on the first, and know that they'll get loaded in the right order. It's also why you can't access elements that are further down in the HTML stream from a script higher up in it unless you defer your code somehow (window.onload or the "DOM loaded" events many libraries support, such as jQuery's ready or Prototype's dom:loaded).
当遇到脚本标记时，除非您使用了deferred或async属性(浏览器支持它们)，否则所有的HTML解析都会出现一个尖叫停止，脚本会被下载并交给JavaScript解释器。当JavaScript解释器处理完脚本后，HTML解析器可以继续。它必须这样做，因为JavaScript可以通过document.write将标记插入到HTML流中。这也是为什么您可以加载一个脚本文件，然后加载依赖于第一个脚本的第二个脚本文件，并知道它们将以正确的顺序加载。这也是为什么你不能从更高的脚本访问HTML流中更低的元素，除非你以某种方式延迟你的代码(窗口)。onload或许多库支持的“DOM loaded”事件，例如jQuery的ready或Prototype的DOM:loaded)。
An upshot of this is that the typical practice of putting script tags in the head actually slows down the apparent load time of the page, unless those script tags need to be there for some reason. Hence the recommendation to put them just before the closing </body> tag.
这样做的一个结果是，将脚本标记放在头部的典型做法实际上会降低页面的明显加载时间，除非出于某种原因需要这些脚本标记。因此建议将它们放在关闭标记之前。
There's a "gotcha" you have to watch for, though: If you have parts of the page that you want to respond to with JavaScript if the user has it enabled, loading your script at the very end leaves a brief but real race condition lying around: The user can interact with the page while your script is being downloaded. There are a variety of ways of handling that. My favorite is to detect whether JavaScript is enabled with inline script (not a separate file) in the head element and, if so, to put in a document-level handler for things where possible (you can do this with click events, for instance) which basically queues up or disables the click during that very brief period of time. That way, if JavaScript is enabled, you'll avoid the race condition, but if it isn't, any unobtrusive fallback you have in place will work.
有一个“问题”,你必须注意,尽管:如果你有部分页面,你想和JavaScript应对如果用户启用了它,最后加载脚本周围留下了短暂而真实的竞争条件:用户可以与页面交互而正在下载您的脚本。有很多种处理方法。我最喜欢的是检测是否与内联脚本启用JavaScript(不是一个单独的文件)的头元素,如果是这样的话,将在文档级处理程序尽可能的东西(你可以点击事件,例如)基本上队列或禁用了点击在很短暂的时间。这样，如果启用了JavaScript，您就可以避免竞争条件，但是如果没有，那么您现有的任何不显眼的回退都可以工作。
#3
4
Put them as functions in its own .js file which you include by <script src> at end of HTML <head> or <body>. If any of them needs to be executed during document load, call it using window.onload or whatever load function the JS library/framework offers, if you are using any.
将它们作为函数放在它自己的.js文件中，在HTML 或末尾由
As to the exact location, putting them in end of <head> allows them to be downloaded before the HTML page is been shown in browser and putting them in end of <body> allows the page to be shown a tad sooner because downloading the scripts will block the page rendering, thus it's a better speed experience.
的确切位置,让他们在年底 <头> HTML页面之前让他们下载浏览器所示,把它们在年底 <身体> 允许页面显示有点早,因为下载的脚本将阻止页面渲染,因此这是一个更好的速度体验。
However, IMO, it's a bit more robust to have the scripts downloaded before the page is rendered whenever you have some page elements which cannot be used without JS. In case of an impatient user this would otherwise lead to unusable elements.
但是，在我看来，在呈现页面之前下载脚本会更加健壮，只要有一些页面元素没有JS就不能使用。如果用户不耐烦，这将导致不可用的元素。
#4
0
I'd put it in a separate .js file and wrap the code so it is executed after the DOM is loaded. If you use a framework like jQuery or Prototype this should be easy.
我将它放在一个单独的.js文件中并包装代码，以便在加载DOM之后执行。如果您使用jQuery或Prototype之类的框架，这应该很容易。
#5
0
For best performance place your JavaScript files at the BOTTOM of the HTML page you are serving.
为了获得最佳性能，请将JavaScript文件放在所服务的HTML页面的底部。
To ensure that everything is set when you try to use it, execute only after the DOM is ready (there are multiple variations of this, my advice: Use a JavaScript Library).
为了确保在尝试使用DOM时设置所有内容，只在DOM就绪后执行(我的建议是:使用JavaScript库)。
#1
8
The whole HTML file is executed in the order it is written, that means
整个HTML文件的执行顺序是按其编写的顺序进行的
<html>
<div id="ID"></div>
<script type="text/javascript">
document.getElementById('ID').innerHTML = "HELLO";
</script>
</html>
changes the contents of the div, wherease
更改div的内容
<html>
<script type="text/javascript">
document.getElementById('ID').innerHTML = "HELLO";
</script>
<div id="ID"></div>
</html>
does not, because the JS code is executed before the div has loaded.
不会，因为JS代码是在div加载之前执行的。
EDIT: If you want the JS to run after the page has loaded use window.onload or document.body.onload or
编辑:如果你想让JS运行后，页面已经载入使用窗口。onload或document.body。onload或
<body onload="...">
Alternatively if you're using a JS library such as jQuery, you can use
或者，如果您使用的是像jQuery这样的JS库，您也可以使用
$(document).ready(function() {
...
});
#2
33
If you have JS code which is intended to run as part of loading/building the page, where in the HTML should this go?
如果您有JS代码，它打算作为加载/构建页面的一部分运行，那么它应该放在HTML中的什么位置呢?
Just before the closing </body> tag is emerging as the best practice barring a specific requirement for it to be elsewhere (which there can sometimes be). It's the recommendation of the YUI folks, for instance, but it's not just them.
就在结束标记出现之前，最好的实践是将它放在其他地方(有时是这样)。比如，这是YUI的推荐，但不只是他们。
What order do things happen in - the order they are in the page or does HTML all happen before (non-) JS is run?
在运行(非-)JS之前，页面中出现的顺序是什么?
When a script tag is encountered, unless you use the defer or async attribute (and the browser supports them), all HTML parsing comes to a screeching halt and the script is downloaded and handed to the JavaScript interpreter. When the JavaScript interpreter finishes processing the script, the HTML parser can continue. It has to do this because the JavaScript can insert tokens into the HTML stream via document.write. This is also why you can load a script file and then load a second script file that relies on the first, and know that they'll get loaded in the right order. It's also why you can't access elements that are further down in the HTML stream from a script higher up in it unless you defer your code somehow (window.onload or the "DOM loaded" events many libraries support, such as jQuery's ready or Prototype's dom:loaded).
当遇到脚本标记时，除非您使用了deferred或async属性(浏览器支持它们)，否则所有的HTML解析都会出现一个尖叫停止，脚本会被下载并交给JavaScript解释器。当JavaScript解释器处理完脚本后，HTML解析器可以继续。它必须这样做，因为JavaScript可以通过document.write将标记插入到HTML流中。这也是为什么您可以加载一个脚本文件，然后加载依赖于第一个脚本的第二个脚本文件，并知道它们将以正确的顺序加载。这也是为什么你不能从更高的脚本访问HTML流中更低的元素，除非你以某种方式延迟你的代码(窗口)。onload或许多库支持的“DOM loaded”事件，例如jQuery的ready或Prototype的DOM:loaded)。
An upshot of this is that the typical practice of putting script tags in the head actually slows down the apparent load time of the page, unless those script tags need to be there for some reason. Hence the recommendation to put them just before the closing </body> tag.
这样做的一个结果是，将脚本标记放在头部的典型做法实际上会降低页面的明显加载时间，除非出于某种原因需要这些脚本标记。因此建议将它们放在关闭标记之前。
There's a "gotcha" you have to watch for, though: If you have parts of the page that you want to respond to with JavaScript if the user has it enabled, loading your script at the very end leaves a brief but real race condition lying around: The user can interact with the page while your script is being downloaded. There are a variety of ways of handling that. My favorite is to detect whether JavaScript is enabled with inline script (not a separate file) in the head element and, if so, to put in a document-level handler for things where possible (you can do this with click events, for instance) which basically queues up or disables the click during that very brief period of time. That way, if JavaScript is enabled, you'll avoid the race condition, but if it isn't, any unobtrusive fallback you have in place will work.
有一个“问题”,你必须注意,尽管:如果你有部分页面,你想和JavaScript应对如果用户启用了它,最后加载脚本周围留下了短暂而真实的竞争条件:用户可以与页面交互而正在下载您的脚本。有很多种处理方法。我最喜欢的是检测是否与内联脚本启用JavaScript(不是一个单独的文件)的头元素,如果是这样的话,将在文档级处理程序尽可能的东西(你可以点击事件,例如)基本上队列或禁用了点击在很短暂的时间。这样，如果启用了JavaScript，您就可以避免竞争条件，但是如果没有，那么您现有的任何不显眼的回退都可以工作。
#3
4
Put them as functions in its own .js file which you include by <script src> at end of HTML <head> or <body>. If any of them needs to be executed during document load, call it using window.onload or whatever load function the JS library/framework offers, if you are using any.
将它们作为函数放在它自己的.js文件中，在HTML 或末尾由
As to the exact location, putting them in end of <head> allows them to be downloaded before the HTML page is been shown in browser and putting them in end of <body> allows the page to be shown a tad sooner because downloading the scripts will block the page rendering, thus it's a better speed experience.
的确切位置,让他们在年底 <头> HTML页面之前让他们下载浏览器所示,把它们在年底 <身体> 允许页面显示有点早,因为下载的脚本将阻止页面渲染,因此这是一个更好的速度体验。
However, IMO, it's a bit more robust to have the scripts downloaded before the page is rendered whenever you have some page elements which cannot be used without JS. In case of an impatient user this would otherwise lead to unusable elements.
但是，在我看来，在呈现页面之前下载脚本会更加健壮，只要有一些页面元素没有JS就不能使用。如果用户不耐烦，这将导致不可用的元素。
#4
0
I'd put it in a separate .js file and wrap the code so it is executed after the DOM is loaded. If you use a framework like jQuery or Prototype this should be easy.
我将它放在一个单独的.js文件中并包装代码，以便在加载DOM之后执行。如果您使用jQuery或Prototype之类的框架，这应该很容易。
#5
0
For best performance place your JavaScript files at the BOTTOM of the HTML page you are serving.
为了获得最佳性能，请将JavaScript文件放在所服务的HTML页面的底部。
To ensure that everything is set when you try to use it, execute only after the DOM is ready (there are multiple variations of this, my advice: Use a JavaScript Library).
为了确保在尝试使用DOM时设置所有内容，只在DOM就绪后执行(我的建议是:使用JavaScript库)。