<script>标签在HTML中的位置会影响网页的性能吗？
在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>标记中！！
加载时对网页性能有何影响？真的吗？这三个中哪一个是最好的，还是你知道的其他一些？
还有一件事，我在谷歌上搜索了一下，从这里我找到了：Best Practices for Speeding Up Your Web Site，它暗示着put scripts at the bottom，但传统上很多人把它放在<head>标签中，它位于<body>标签之上。我知道这不是一条规则，但很多人更喜欢这样。如果你不相信，只需查看本页的源码！告诉我最好的表现是什么风格。
回答 4
Stack Overflow用户
发布于 2010-12-09 18:01:08
是的，它确实会影响网页加载的性能。
问题是，普通的<script>标记是阻塞的，所以脚本标记之后的所有内容都必须等到脚本标记加载和解析完成后，页面的其余部分才能加载。
现在可能有人会注意到，如果您在脚本标记中使用async="true"，它将不会阻塞。但目前只有几个浏览器支持这一点，所以这对一般情况没有帮助。
无论哪种方式，一般来说，将脚本标记放在页面的底部是一个好主意，这样它们就不会占用页面的其他部分。
Stack Overflow用户
发布于 2010-12-09 18:11:52
首先，不在body/head元素内的脚本标记会创建无效的HTML，甚至可能在某些浏览器中导致一些异常。
head元素内的脚本标记将在呈现任何HTML之前加载和解释，这会阻止HTML/CSS呈现。
body标签底部的脚本标签不会阻塞HTML/CSS，而且由于您只能在DomReady上使用DOM，因此这是放置JavaScript的最佳位置。顺便说一句，您甚至不需要使用domReady事件包装器。
或者，你也可以使用像LABJS和RequireJS这样的库来从头部标签开始你的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将被并行加载，因此HTML/CSS呈现得很好。
Stack Overflow用户
发布于 2010-12-09 18:00:30
脚本本身的性能肯定是一样的。
但是，位置很重要，正如您链接的文章中所解释的，因为当浏览器遇到并加载<script>标记的内容时，它将“暂停”(或“冻结”)同时下载和呈现页面。因此，最好让浏览器呈现页面并应用CSS样式，然后包含您的.js。它在用户看来会更流畅。
此外，在底部包含脚本可能意味着就在关闭<body>标记之前。
https://stackoverflow.com/questions/4396849
复制相似问题