HTML中的<script>标签位置是否会影响网页的性能？
如果脚本标签位于HTML页面的上方或下方，对于网站的性能是否有影响？
而如果在这样的使用之间呢：
<body> ..blah..blah.. <script language="JavaScript" src="JS_File_100_KiloBytes"> function f1() { .. some logic reqd. for manipulating contents in a webpage } </script> ... some text here too ... </body> 还是这样更好？
<script language="JavaScript" src="JS_File_100_KiloBytes"> function f1() { .. some logic reqd. for manipulating contents in a webpage } </script> <body> ..blah..blah.. ..call above functions on some events like onclick,onfocus,etc.. </body>
还是这个？
<body> ..blah..blah.. ..call above functions on some events like onclick,onfocus,etc.. <script language="JavaScript" src="JS_File_100_KiloBytes"> function f1() { .. some logic reqd. for manipulating contents in a webpage } </script> </body>
不需要再在<html>标签中告诉一切！
它在加载时如何影响网页的性能？ 它真的吗？ 哪一个是最好的，无论是从这三个或其他你知道的？
还有一件事，我在这里search了一下，从这里我去了这里： 加速你的网站的最佳实践 ，它build议把脚本放在底部 ，但传统上很多人把它放在<head> <body>标签。 我知道这不是一个规则，但许多人喜欢这样。 如果你不相信，只是查看本页的源代码 ！ 并告诉我什么是最好的performance更好的风格。
默认情况下，Javascript资源往往会阻止任何其他并行下载的发生。 所以，你可以想象一下，如果头部有大量的<script>标签，调用多个外部脚本将阻止HTML加载，因此用空白的白色屏幕迎接用户，因为页面上的其他内容将不会加载JS文件已经完全加载。
为了解决这个问题，许多开发者select将JS放在HTML页面的底部（在</body>标签之前）。 这似乎是合乎逻辑的，因为在用户开始与网站交互之前，大多数情况下JS并不是必需的。 在底部放置JS文件也可以实现渐进式渲染。
或者，您可以selectasynchronous加载Javascript文件。 有很多现有的方法可以通过以下来完成：
XHR评估
var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');
脚本DOM元素
var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se);
Meebo Iframed JS
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; doc.open().write('<body onload="insertJS()">'); doc.close();
举几个例子
注意 ：在当前浏览器中最多只能并行加载五个脚本。
对于IE来说，你可以使用如下的defer属性：
<script defer src="jsasset.js" type="text/javascript"></script>
设置时，这个布尔属性向用户代理提供一个提示，脚本不会生成任何文档内容（例如，在javascript中没有“document.write”），因此用户代理可以继续parsing和呈现。
文档顶部的脚本元素很快就可以使用（所以你可以绑定事件处理程序，并在元素变得可用时让JS运行），但是它们会阻止parsing页面的其余部分。
底部的脚本元素不是（所以你不能），并没有任何重要的页面，所以没有关系，如果是封锁。
哪一个最好取决于亲戚 重要性 优先级（必须根据具体情况确定）让JS运行Vs. 有HTML呈现。
请注意，底部的脚本元素必须出现在 body元素内部 。 所以它应该是：
<script>...</script></body></html>
并不是
</body><script>...</script></html>
所以我知道这是一个老的讨论，但我一直在阅读有关这个话题，并阅读StackOverflow的其他答案…
实际上，放置jQuery标签的位置并不重要：
最后，一个关于持续民俗的话。 您可能遇到了经常重复的build议，即“总是在结束标记之前将JavaScript放在页面底部”。 这曾经是真实的，因为Web浏览器按顺序加载脚本，并阻止加载和呈现，直到每个脚本完成。 这不再是事实; 现代浏览器做“预加载扫描”并开始并行加载所有脚本，无论是列在head元素还是页面底部。 外部JavaScript通常是asynchronous加载的，因此在加载页面和DOM准备就绪之前，它不会执行。 在head元素中加载脚本不再是一个坏习惯。
http://railsapps.github.io/rails-javascript-include-external.html
是的，这确实会影响网页的性能。
JavaScript的问题是阻止了页面的其他部分的执行/加载。 如果你在JavaScript中需要很长的时间，那么它会阻止加载其他页面：
看到这些例子：
- 顶部的脚本，阻止整个页面： http : //jsfiddle.net/jonathon/wcQqn/
- 脚本在中间，块底部： http : //jsfiddle.net/jonathon/wcQqn/1
- 底部的脚本，阻止任何东西： http : //jsfiddle.net/jonathon/wcQqn/3/
您可以看到警报对渲染页面其余部分的影响。 您放入页面顶部的任何JavaScript都将具有相同的效果。 一般来说，最好把重要的东西放在页面的布局上（例如菜单插件或其他东西）。 任何需要用户交互（popup处理程序）或根本不涉及用户（Google Analytics）的任何内容都应该到达页面的底部。
你可以得到懒惰的加载器，将script标签注入到代码中。 由于代码不在HTML上，因此可以确保整个页面已正确显示，并且包含的JS不会阻止任何内容。
是的，这确实会影响网页加载的性能。
问题是，普通的<script>标签被阻塞，所以脚本标签之后的所有东西都必须等到脚本标签完成加载和parsing之后才能加载页面的其余部分。
现在有人可能会注意到，如果在脚本标记中使用async="true" ，它将不会被阻止。 但是，这只是由几个浏览器支持，所以不会帮助一般情况下。
无论哪种方式，一般来说，将脚本标记放置在页面的底部是一个好主意，这样它们就不会占据页面的其他部分。
首先脚本标签不在body / head元素内部会创build无效的HTML，甚至可能会在某些浏览器中导致一些exception。
头元素内的脚本标签将在任何HTML呈现之前被加载和解释，这将阻止HTML / CSS呈现。
body标签底部的脚本标签不会阻塞HTML / CSS，因为您只能在DomReady上玩DOM，所以这是放置JavaScript的最佳位置。 作为一个方面说明，你甚至不需要使用domReady事件包装器。
或者，你也可以使用像LABJS和RequireJS这样的库来从head标签中启动你的JavaScript（最小的HTML / CSS阻塞）。 任何通过这些库加载的任何脚本都将以并行方式运行到HTML / CSS渲染。
<head> <script data-main="INITSCRIPT.js" src="require.js"></script> </head>
INITSCRIPT.js
require( [ "jQuery" , "somePlugin" ] , function(){ $(document).ready(function(){ $("#someId").somePlugin(); }); } );
在上面的例子中，只有require.js的加载和解释会阻止HTML / CSS的渲染，这通常是微不足道的。 之后jQuery和somePlugin将被加载到paralel，所以HTML / CSS很好地呈现。
脚本本身的性能肯定是一样的。
因为浏览器在遇到并加载<script>标签的内容时将“暂停”（或“冻结”）同时下载和呈现页面，所以放置位置很重要。 所以最好让浏览器渲染页面并应用CSS样式， 然后包含你的.js 。 它会看起来更顺畅的用户。
另外，在closures<body>标记之前，包含底部的脚本可能意味着正确。
除了性能方面，只要将<script>标签包含在<head>标签内，就需要小心。
我们来看下面的例子：
<head> <script>document.getElementById("demo").innerHTML="hello";</script> </head> <body> <p id="demo">The content of the document......</p> </body>
在这里，请注意脚本在加载DOM（或<p>标记）之前被加载，导致脚本失败（因为getElementById无法find名称为“demo”的元素）。
在这种情况下，你只能在body标签中使用脚本。
考虑到其他答案，最好在</body>标签之前始终使用脚本，因为您永远不知道您将在外部加载的脚本是否对您的DOM有这样的依赖关系。
参考： 详细的问题描述
