< script> HTML中的标签位置会影响网页的性能？ [英] Does the <script> tag position in HTML affects performance of the webpage?
问题描述
如果脚本标签位于HTML页面的正文上方或下方，那么它对于网站的性能是否重要？
这： < body>
..blah ..blah ..
< script language =JavaScriptsrc =JS_File_100_KiloBytes>
函数f1（）{
..一些逻辑reqd。用于处理网页中的内容
}
< / script>
...这里也有一些文字...
< / body>
或者更好吗？：
< script language =JavaScriptsrc =JS_File_100_KiloBytes>
函数f1（）{
..一些逻辑reqd。用于处理网页中的内容
}
< / script>
< body>
..blah ..blah ..
..可以在onclick，onfocus等某些事件上面调用上述函数。
< / body>
还是这个？：
< body>
..blah ..blah ..
..可以在onclick，onfocus等某些事件上调用上面的函数。
< script language =JavaScriptsrc =JS_File_100_KiloBytes> ;
函数f1（）{
..一些逻辑reqd。用于处理网页中的内容
}
< / script>
< / body>
无需再在< html> tag !!
它在加载时如何影响网页的性能？它真的吗？
哪一个是最好的，无论是从这3个还是其他你知道的？
还有一件事，我在这里搜索了一下，从这里我去了这里：加快您的网站的最佳实践，并建议将脚本放在底部，但传统上很多人将它放在< head> 标签中， code>< body> 标记。我知道这不是一条规则，但许多人都喜欢这种方式。如果你不相信，只是查看此页面的源代码！并告诉我什么是最好的表现风格。
默认情况下，Javascript资源往往阻止任何其他并行下载发生。所以，你可以想象一下，如果头部有很多< script> 标签，调用多个外部脚本将阻止 HTML 从加载，因此用空白的白色屏幕迎接用户，因为在你的页面上没有其他内容会加载直到 JS文件完全加载。为了解决这个问题，许多开发人员选择将JS放在HTML页面的底部（在< / body> 标签）。这似乎是合乎逻辑的，因为在用户开始与网站交互之前，大多数情况下JS并不需要。将JS文件放在底部也可以进行渐进式渲染。
或者，您可以选择异步加载Javascript文件。有很多现有的方法可以完成：
XHR评估
$ b
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.jstype =text / javascript>< / script>
设置时，这个布尔属性
提供了一个提示用户代理
脚本不会生成
任何文档内容（例如，在javascript中没有
document.write）和
，因此用户代理可以继续
解析和呈现。
If the script tag is above or below the body in a HTML page, does it matter for the performance of a website?
And what if used in between like this:
<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>
Or is this better?:
<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>
Or this one?:
<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>
Need not tell everything is again in the <html> tag!!
How does it affect performance of webpage while loading? Does it really? Which one is the best, either out of these 3 or some other which you know?
And one more thing, I googled a bit on this, from which I went here: Best Practices for Speeding Up Your Web Site and it suggests put scripts at the bottom, but traditionally many people put it in <head> tag which is above the <body> tag. I know it's NOT a rule but many prefer it that way. If you don't believe it, just view source of this page! And tell me what's the better style for best performance.
Javascript assets, by default, tend to block any other parallel downloads from occurring. So, you can imagine if you have plenty of <script> tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the JS files have completely loaded.
In order to combat this issue, many developers have opted to placing JS at the bottom of the HTML page (before the </body> tag). This seems logical because, most of the time JS is not required until the user begins interacting with the site. Placing JS files at the bottom also enables progressive rendering.
Alternatively, you can choose to load Javascript files asynchronously. There are plenty of existing methods which this can be accomplished by:
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
Script DOM Element
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();
To name a few...
Note: Only a maximum of five scripts can be loaded in parallel in current browsers.
ForIE there is the defer attribute you can use like so:
<script defer src="jsasset.js" type="text/javascript"></script>
When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no "document.write" in javascript) and thus, the user agent can continue parsing and rendering.
这篇关于< script> HTML中的标签位置会影响网页的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
