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

Question

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

Pra*_*tik 64 html javascript optimization performance

如果脚本标记位于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>

Run Code Online (Sandbox Code Playgroud)

或者这更好吗？:

<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>

Run Code Online (Sandbox Code Playgroud)

还是这一个？:

  <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>

Run Code Online (Sandbox Code Playgroud)

不用再告诉<html>标签了!

加载时如何影响网页的性能？真的吗？哪一个是最好的,要么是这三个还是其他一个你知道的？

还有一件事,我在谷歌上搜索了一下,我从这里开始:加速你的网站的最佳实践,它建议把脚本放在底部,但传统上很多人把它放在<head>标签上面的<body>标签上.我知道这不是一个规则,但许多人更喜欢这样.如果您不相信,只需查看此页面的来源!并告诉我什么是最佳性能的更好的风格.

Answer 1

Rus*_*ias 67

默认情况下,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('');

Run Code Online (Sandbox Code Playgroud)

脚本DOM元素

var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);

Run Code Online (Sandbox Code Playgroud)

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();

Run Code Online (Sandbox Code Playgroud)

仅举几例......

注意:在当前浏览器中,最多只能同时加载五个脚本.

对于IE还有就是defer你可以使用像这样的属性:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

ree*_*rix 24

所以我知道这是一个古老的讨论,但我一直在阅读有关这个主题并阅读StackOverflow上的其他答案......

你放jQuery标签的位置实际上并不重要:

最后,关于持久民俗的一句话.您可能遇到过频繁重复的建议,"始终将JavaScript放在页面底部,就在结束标记之前".这曾经是真的,因为Web浏览器按顺序加载脚本并阻止加载和呈现,直到每个脚本完成.这不再是真的; 现代浏览器执行"预加载扫描"并开始并行加载所有脚本,无论是在头元素中还是在页面底部列出.外部JavaScript经常以异步方式加载并写入,因此在页面加载并且DOM准备就绪之前它不会执行.在head元素中加载脚本不再是一种不好的做法.

http://railsapps.github.io/rails-javascript-include-external.html