I believe javascript can be anywhere (almost), but I almost always see it in between <head></head>. I am using jquery and wanted to know if it has to be in the head tags for some reason or if will break something if I move it. Thank you.
我相信javascript可以是任何地方(几乎)，但我几乎总是在之间看到它。我正在使用jquery，我想知道它是否出于某种原因必须出现在head标签中，或者如果我移动它是否会破坏某些东西。谢谢你！
EDIT: Why is it almost always in the head tags?
编辑:为什么它总是在标题标签里?
11 个解决方案
#1
37
JavaScript is executed wherever it is found in the document. If you place inline JavaScript in the body, it will be executed when the browser comes to it. If you're using $(document).ready(...) to execute things, then the positioning shouldn't matter. Otherwise, you may find corner cases where it matters. In general, it does not matter. Scripts end up in the head tag mostly out of tradition.
只要在文档中找到JavaScript，就会执行它。如果将内联JavaScript放在主体中，当浏览器遇到它时，它将被执行。如果您正在使用$(document).ready(…)来执行操作，那么位置就不重要了。否则，你可能会发现它很重要。一般来说，这并不重要。脚本最终会出现在head标签上，这大多是出于传统。
#2
43
No, it can be anywhere. In fact, it’s sometimes a good idea to put it at the bottom of the document. For an explanation why, see http://developer.yahoo.com/performance/rules.html#js_bottom.
不，它可以在任何地方。事实上，有时把它放在文档的底部是个好主意。为了解释原因，请参见http://developer.yahoo.com/performance/rules.html#js_bottom。
#3
16
Basically, browsers stop rendering page until .js files are completely downloaded and processed. Since they render page progressively as HTML arrives, the later .js files are referenced, the better user experience will be.
基本上，浏览器停止渲染页面，直到.js文件被完全下载和处理。由于它们在HTML到达时逐步呈现页面，所以后面的.js文件会被引用，因此用户体验会更好。
So the trick is to include only absolutely crucial scripts in the head, and load remaining ones towards the end of the page.
因此，诀窍在于只在头部包含绝对关键的脚本，并在页面末尾加载其余的脚本。
#4
9
Everything stops when the browser reads a script tag until it has processed it. Your page will therefore render quicker if you move the script tags down as far as possible - ideally just before the end body tag. Obviously the total load time will be the same.
当浏览器读取一个脚本标记时，一切都停止，直到它处理它为止。因此，如果您尽可能地将脚本标记移到尽可能远的地方，那么您的页面将呈现得更快——最好是在结束body标签之前。显然，总负载时间是相同的。
You will have to make sure you don't actually call any jQuery functions until jQuery is included of course.
您必须确保在包含jQuery之前不会调用任何jQuery函数。
#5
8
And this is why JavaScript is in such a mess and why old * posts are a devs worst nightmare. JS changes so quickly these days with a new framework coming out every week and each one is claimed as the bees knees by it's advocates.
这就是为什么JavaScript如此混乱，为什么旧的*帖子是devs最可怕的噩梦。JS最近变化很快，每周都会有一个新的框架出现，每一个都被它的拥护者称为“蜜蜂的膝盖”。
Gumbo is right to say a script tag can be referenced anywhere an inline element can but the choice to load an external JS file or include JS code within a tag is a decision made individually on each case. Yes the browser will stop to load JS when it parses and therefore you need to consider how this will affect page load speed and functionality. The current or as of a year ago, mid 2015 (bear in mind the popualar answer was in July 2009 and most devs won't ever read this as they look at answer no.1 and move on!!!) is that given mobile priority to page load speed requires a two request limit to the mobile/cell mast which under 3G gives you a 28k (2x 14kb(yes)) payload, you need to consider (as Google names it) 'paint to screen' of 28k and this should provide the user with enough page content/interactivity to ensure they're on the right page or on the right track, in that 28k. So a Jquery minified is currently 87.6lkb, just ain't gonna cut the mustard!
Gumbo说脚本标签可以在任何内联元素可以引用的地方引用是正确的，但是在标签中加载外部JS文件或包含JS代码的选择是针对每种情况单独做出的决定。是的，浏览器在解析时将停止加载JS，因此您需要考虑这将如何影响页面加载速度和功能。当前或一年前，即2015年年中(请记住，民粹主义的答案是在2009年7月，大多数开发人员在看到答案“否”时不会读到这一点。1、移动!!! !!! !!! !!! !!! !!! !!! !!! !!! !!! !!! !!! !“画到屏幕”为28k，这将为用户提供足够的页面内容/交互性，以确保他们在28k中处于正确的页面或正确的轨道上。所以Jquery迷你版目前是87.6lkb，只是不符合标准!
This is why most mobile page load currently sit for a couple of seconds before loading anything, and that's 4G! Don't do it. Page speed is king and users hit their back button before your JQuery file loads. Under 3G+ a 28k payload will load in <1sec so there is no reason why your page doesn't start loading in that time. Next time you hit a link on your phone, watch the little bar sit and wait while it goes through all the tags on the next page!
这就是为什么大多数移动页面加载在加载任何内容之前都要等待几秒钟，这就是4G!不要这样做。页面速度为王，用户在加载JQuery文件之前点击后退按钮。在3G+ 28k负载下，负载将在1秒内加载，因此没有理由不开始加载页面。下次当你在你的手机上点击一个链接时，看一下这个小酒吧，它会在你的下一页的所有标签中等待。
So structure your page not on where a 7 year old post on SO says to( it's not wrong just outdated), but where each piece of code is needed and make sure a user can use of he most important aspects of a page before you try to load 6 JS frameworks to implement clever parrallel scrolls and extensive data binding for your contact page.
所以结构页面不是一个7岁的帖子所以说(没有错只是过时的),但需要每一段代码,并确保用户可以使用他前一个页面的最重要的方面你试图加载6 JS框架实现聪明parrallel卷轴和广泛的数据绑定你的联系页面。
BTW Google asks you to push JS to the bottom because they supply Google analytics code and this needs to be the very last thing to load.
顺便说一句，谷歌要求您将JS推到底部，因为它们提供了谷歌分析代码，这需要是最不需要加载的东西。
Think before you code!
想在你代码!
#6
5
No. SCRIPT is not only categorized as head.misc element but also as special element and thus everywhere allowed where inline elements are allowed. So you can put a SCRIPT wherever inline elements are allowed:
不。脚本不仅被归类为head。misc元素，但也作为特殊元素，因此允许在允许内联元素的地方使用。所以你可以在任何允许内联元素的地方放置一个脚本:
<p>foo <script>document.write("bar")</script></p>
In fact, some recommend to put SCRIPT elements at the end of the BODY just before the closing tag so that the whole document is parsed before the JavaScript is loaded. That is to prevent JavaScript from blocking parallel downloads.
事实上，有些人建议在结束标记之前将脚本元素放在主体的末尾，以便在加载JavaScript之前解析整个文档。这是为了防止JavaScript阻止并行下载。
#7
2
Actually, for performance reasons, you almost always want to put your script tags at the bottom of your page. Why? You want your page structure and your CSS to load first so that the user sees the page right away. Then you want all your behavior driven code to load last. YSlow is a good firefox extension that will show you a grade for performance. One of the items it grades you on is whether you have javascript at the bottom rather than the top.
实际上，由于性能原因，您几乎总是希望将脚本标记放在页面的底部。为什么?您希望页面结构和CSS首先加载，以便用户立即看到页面。然后，您希望所有的行为驱动代码在最后加载。YSlow是一个很好的firefox扩展，它会显示性能的等级。它对您的评分之一是，您是否在底部而不是顶部使用javascript。
#8
2
Just be careful about the bad effects on latency that you can have, depending on the user's browser and where exactly you place your Javascript in the page -- see just about all that Steve Souders has to say, including the videos of his Stanford lectures, and the fruit of his labors left behind e.g. here (put scripts at the bottom of the page in as much as feasible, etc etc).
只是小心坏影响延迟,你可以根据用户的浏览器页面中,你把你的Javascript,看到几乎所有Steve Souders说,包括斯坦福大学的视频讲座,和劳作留下如这里所结的果子(把脚本放在页面的底部在可行的,等等)。
#9
1
-
Because you don't want JavaScript mixed with HTML - content with behaviour. Preferably you want it in a separate file.
因为你不希望JavaScript与HTML内容和行为混合。最好你想把它放在一个单独的文件中。
-
Having JS elsewhere has advantages and disadventages - it will be executed at different time, for instance, and you can write to the document from javascript located in the body.
在其他地方使用JS有好处也有坏处——例如，它将在不同的时间执行，您可以从位于主体中的javascript编写文档。
#10
0
It can go in the head or body tag. Just keep in mind that it will execute whenever is read and not necessarily when the document is finished loading. Take a look here.
它可以进入头部或身体标签。只要记住，它将在读取时执行，而不是在文档加载完成时执行。看看这里。
#11
0
In some cases, yes the script may not work if its in the wrong location. Some JavaScript needs to be executed after a specific HTML element, others need to be exactly where you want your script output to show, others should be in the head of the document. It really depends on how the code is written. If you are not sure, you should execute your code on window.load or DOMready: http://www.javascriptkit.com/dhtmltutors/domready.shtml
在某些情况下，如果脚本位于错误的位置，那么它可能无法工作。有些JavaScript需要在特定的HTML元素之后执行，有些则需要在您希望脚本输出显示的位置执行，有些则应该位于文档的头部。这取决于如何编写代码。如果不确定，应该在窗口上执行代码。负载或DOMready:http://www.javascriptkit.com/dhtmltutors/domready.shtml
#1
37
JavaScript is executed wherever it is found in the document. If you place inline JavaScript in the body, it will be executed when the browser comes to it. If you're using $(document).ready(...) to execute things, then the positioning shouldn't matter. Otherwise, you may find corner cases where it matters. In general, it does not matter. Scripts end up in the head tag mostly out of tradition.
只要在文档中找到JavaScript，就会执行它。如果将内联JavaScript放在主体中，当浏览器遇到它时，它将被执行。如果您正在使用$(document).ready(…)来执行操作，那么位置就不重要了。否则，你可能会发现它很重要。一般来说，这并不重要。脚本最终会出现在head标签上，这大多是出于传统。
#2
43
No, it can be anywhere. In fact, it’s sometimes a good idea to put it at the bottom of the document. For an explanation why, see http://developer.yahoo.com/performance/rules.html#js_bottom.
不，它可以在任何地方。事实上，有时把它放在文档的底部是个好主意。为了解释原因，请参见http://developer.yahoo.com/performance/rules.html#js_bottom。
#3
16
Basically, browsers stop rendering page until .js files are completely downloaded and processed. Since they render page progressively as HTML arrives, the later .js files are referenced, the better user experience will be.
基本上，浏览器停止渲染页面，直到.js文件被完全下载和处理。由于它们在HTML到达时逐步呈现页面，所以后面的.js文件会被引用，因此用户体验会更好。
So the trick is to include only absolutely crucial scripts in the head, and load remaining ones towards the end of the page.
因此，诀窍在于只在头部包含绝对关键的脚本，并在页面末尾加载其余的脚本。
#4
9
Everything stops when the browser reads a script tag until it has processed it. Your page will therefore render quicker if you move the script tags down as far as possible - ideally just before the end body tag. Obviously the total load time will be the same.
当浏览器读取一个脚本标记时，一切都停止，直到它处理它为止。因此，如果您尽可能地将脚本标记移到尽可能远的地方，那么您的页面将呈现得更快——最好是在结束body标签之前。显然，总负载时间是相同的。
You will have to make sure you don't actually call any jQuery functions until jQuery is included of course.
您必须确保在包含jQuery之前不会调用任何jQuery函数。
#5
8
And this is why JavaScript is in such a mess and why old * posts are a devs worst nightmare. JS changes so quickly these days with a new framework coming out every week and each one is claimed as the bees knees by it's advocates.
这就是为什么JavaScript如此混乱，为什么旧的*帖子是devs最可怕的噩梦。JS最近变化很快，每周都会有一个新的框架出现，每一个都被它的拥护者称为“蜜蜂的膝盖”。
Gumbo is right to say a script tag can be referenced anywhere an inline element can but the choice to load an external JS file or include JS code within a tag is a decision made individually on each case. Yes the browser will stop to load JS when it parses and therefore you need to consider how this will affect page load speed and functionality. The current or as of a year ago, mid 2015 (bear in mind the popualar answer was in July 2009 and most devs won't ever read this as they look at answer no.1 and move on!!!) is that given mobile priority to page load speed requires a two request limit to the mobile/cell mast which under 3G gives you a 28k (2x 14kb(yes)) payload, you need to consider (as Google names it) 'paint to screen' of 28k and this should provide the user with enough page content/interactivity to ensure they're on the right page or on the right track, in that 28k. So a Jquery minified is currently 87.6lkb, just ain't gonna cut the mustard!
Gumbo说脚本标签可以在任何内联元素可以引用的地方引用是正确的，但是在标签中加载外部JS文件或包含JS代码的选择是针对每种情况单独做出的决定。是的，浏览器在解析时将停止加载JS，因此您需要考虑这将如何影响页面加载速度和功能。当前或一年前，即2015年年中(请记住，民粹主义的答案是在2009年7月，大多数开发人员在看到答案“否”时不会读到这一点。1、移动!!! !!! !!! !!! !!! !!! !!! !!! !!! !!! !!! !!! !“画到屏幕”为28k，这将为用户提供足够的页面内容/交互性，以确保他们在28k中处于正确的页面或正确的轨道上。所以Jquery迷你版目前是87.6lkb，只是不符合标准!
This is why most mobile page load currently sit for a couple of seconds before loading anything, and that's 4G! Don't do it. Page speed is king and users hit their back button before your JQuery file loads. Under 3G+ a 28k payload will load in <1sec so there is no reason why your page doesn't start loading in that time. Next time you hit a link on your phone, watch the little bar sit and wait while it goes through all the tags on the next page!
这就是为什么大多数移动页面加载在加载任何内容之前都要等待几秒钟，这就是4G!不要这样做。页面速度为王，用户在加载JQuery文件之前点击后退按钮。在3G+ 28k负载下，负载将在1秒内加载，因此没有理由不开始加载页面。下次当你在你的手机上点击一个链接时，看一下这个小酒吧，它会在你的下一页的所有标签中等待。
So structure your page not on where a 7 year old post on SO says to( it's not wrong just outdated), but where each piece of code is needed and make sure a user can use of he most important aspects of a page before you try to load 6 JS frameworks to implement clever parrallel scrolls and extensive data binding for your contact page.
所以结构页面不是一个7岁的帖子所以说(没有错只是过时的),但需要每一段代码,并确保用户可以使用他前一个页面的最重要的方面你试图加载6 JS框架实现聪明parrallel卷轴和广泛的数据绑定你的联系页面。
BTW Google asks you to push JS to the bottom because they supply Google analytics code and this needs to be the very last thing to load.
顺便说一句，谷歌要求您将JS推到底部，因为它们提供了谷歌分析代码，这需要是最不需要加载的东西。
Think before you code!
想在你代码!
#6
5
No. SCRIPT is not only categorized as head.misc element but also as special element and thus everywhere allowed where inline elements are allowed. So you can put a SCRIPT wherever inline elements are allowed:
不。脚本不仅被归类为head。misc元素，但也作为特殊元素，因此允许在允许内联元素的地方使用。所以你可以在任何允许内联元素的地方放置一个脚本:
<p>foo <script>document.write("bar")</script></p>
In fact, some recommend to put SCRIPT elements at the end of the BODY just before the closing tag so that the whole document is parsed before the JavaScript is loaded. That is to prevent JavaScript from blocking parallel downloads.
事实上，有些人建议在结束标记之前将脚本元素放在主体的末尾，以便在加载JavaScript之前解析整个文档。这是为了防止JavaScript阻止并行下载。
#7
2
Actually, for performance reasons, you almost always want to put your script tags at the bottom of your page. Why? You want your page structure and your CSS to load first so that the user sees the page right away. Then you want all your behavior driven code to load last. YSlow is a good firefox extension that will show you a grade for performance. One of the items it grades you on is whether you have javascript at the bottom rather than the top.
实际上，由于性能原因，您几乎总是希望将脚本标记放在页面的底部。为什么?您希望页面结构和CSS首先加载，以便用户立即看到页面。然后，您希望所有的行为驱动代码在最后加载。YSlow是一个很好的firefox扩展，它会显示性能的等级。它对您的评分之一是，您是否在底部而不是顶部使用javascript。
#8
2
Just be careful about the bad effects on latency that you can have, depending on the user's browser and where exactly you place your Javascript in the page -- see just about all that Steve Souders has to say, including the videos of his Stanford lectures, and the fruit of his labors left behind e.g. here (put scripts at the bottom of the page in as much as feasible, etc etc).
只是小心坏影响延迟,你可以根据用户的浏览器页面中,你把你的Javascript,看到几乎所有Steve Souders说,包括斯坦福大学的视频讲座,和劳作留下如这里所结的果子(把脚本放在页面的底部在可行的,等等)。
#9
1
-
Because you don't want JavaScript mixed with HTML - content with behaviour. Preferably you want it in a separate file.
因为你不希望JavaScript与HTML内容和行为混合。最好你想把它放在一个单独的文件中。
-
Having JS elsewhere has advantages and disadventages - it will be executed at different time, for instance, and you can write to the document from javascript located in the body.
在其他地方使用JS有好处也有坏处——例如，它将在不同的时间执行，您可以从位于主体中的javascript编写文档。
#10
0
It can go in the head or body tag. Just keep in mind that it will execute whenever is read and not necessarily when the document is finished loading. Take a look here.
它可以进入头部或身体标签。只要记住，它将在读取时执行，而不是在文档加载完成时执行。看看这里。
#11
0
In some cases, yes the script may not work if its in the wrong location. Some JavaScript needs to be executed after a specific HTML element, others need to be exactly where you want your script output to show, others should be in the head of the document. It really depends on how the code is written. If you are not sure, you should execute your code on window.load or DOMready: http://www.javascriptkit.com/dhtmltutors/domready.shtml
在某些情况下，如果脚本位于错误的位置，那么它可能无法工作。有些JavaScript需要在特定的HTML元素之后执行，有些则需要在您希望脚本输出显示的位置执行，有些则应该位于文档的头部。这取决于如何编写代码。如果不确定，应该在窗口上执行代码。负载或DOMready:http://www.javascriptkit.com/dhtmltutors/domready.shtml