标签上方.我知道这不是规则,但许多人更喜欢那样.如果您不相信,只需查看本页的源代码!并告诉我哪种风格更能获得最佳性能. 解决方案
默认情况下,Javascript 资产往往会阻止任何其他并行下载的发生.所以,你可以想象如果你的头部有很多
标签,调用多个外部脚本会阻止加载 HTML
,从而向用户打招呼一个空白的白屏,因为页面上的其他内容不会加载直到 JS 文件完全加载.
为了解决这个问题,许多开发人员选择将 JS 放在 HTML 页面的底部(在 </body>
标签之前).这似乎是合乎逻辑的,因为大多数时候在用户开始与站点交互之前不需要 JS.将 JS 文件放在底部也可以启用渐进式渲染.
或者,您可以选择异步加载 Javascript 文件.有很多现有的方法可以通过以下方式实现:
XHR 评估
var xhrObj = getXHRObject();xhrObj.onreadystatechange =功能() {如果 ( xhrObj.readyState != 4 ) 返回;评估(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")和因此,用户代理可以继续解析和渲染.
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:
XHR Eval
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.
这篇关于<脚本>HTML 中的标签位置会影响网页的性能吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文