HTML中的<script>标签位置是否会影响网页的性能?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (40)

如果脚本标签在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>标签中再次说明一切!

它在加载时如何影响网页的性能?哪一个是最好的?

提问于
用户回答回答于

默认情况下,Javascript资源倾向于阻止任何其他并行下载的发生。所以,你可以想象一下,如果<script>头上有很多标签,调用多个外部脚本将阻止HTML加载,因此用空白的白色屏幕迎接用户,因为在JS文件之前没有其他内容会加载完全加载。

为了解决这个问题,许多开发人员选择将JS放在HTML页面的底部(</body>标签之前)。这似乎是合乎逻辑的,因为在用户开始与网站进行交互之前,大多数情况下不需要JS。在底部放置JS文件也可以实现渐进式渲染。

或者,可以选择异步加载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();

在当前浏览器中最多只能并行加载五个脚本。

因为你可以使用这样IEdefer属性:

<script defer src="jsasset.js" type="text/javascript"></script>

设置时,此布尔属性向用户代理提供脚本不会生成任何文档内容的提示(例如,javascript中没有“document.write”),因此用户代理可以继续解析和呈现。

用户回答回答于

文档顶部的脚本元素很快就可用(这样就可以绑定事件处理程序并在元素变为可用时让JS运行),但是它们会阻止解析页面的其余部分。

底部的脚本元素不是,并且没有任何重要的页面,所以它被阻止并不重要。

哪一个最好取决于亲属重要性优先级(必须根据具体情况确定)让JS运行Vs. 有HTML呈现。

请注意,底部的script元素必须出现 body元素中。所以它应该是:

<script>...</script></body></html>

并不是

</body><script>...</script></html>

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励