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

IT技术 javascript html performance optimization
2021-02-28 19:04:10

如果脚本标签位于 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>标签里了！！

加载时它如何影响网页的性能？真的吗？哪一个是最好的，无论是这三个还是你知道的其他一些？

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

6个回答

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

仅举几例...

注意：当前浏览器最多只能并行加载五个脚本。

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

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

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

这看起来很吸引人，但是您的图像产生了 404。您有替换图像的 URL 吗？
2021-04-20 19:04:10
如果两个 js 文件来自不同的路径或服务器，它们甚至可以同时加载怎么办？
2021-04-21 19:04:10
但它可以同时进行，从而减少总时间？
2021-05-01 19:04:10
@Rahul Joshi 当然。高流量网站通常倾向于投资内容交付网络，这是一个用于静态内容的无 cookie 域。所以，是的，两个 js 文件可以来自不同的服务器，尽管加载时间将取决于相关服务器。
2021-05-15 19:04:10
@Rahul Joshi 对不起，是的，他们可以。并没有真正减少整体时间，大部分内容只是更快地呈现给用户。实际上，它只是被认为加载得更快。
2021-05-18 19:04:10

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

实际上，将 jQuery 标记放在哪里不再重要了：

最后，谈谈持久的民间传说。您可能遇到过经常重复的建议“始终将 JavaScript 放在页面底部的结束标记之前”。这曾经是正确的，因为 Web 浏览器按顺序加载脚本并阻止加载和渲染，直到每个脚本完成。这不再是事实；现代浏览器进行“预加载扫描”并开始并行加载所有脚本，无论是在 head 元素中还是在页面底部列出。外部 JavaScript 通常是异步加载和编写的，因此在页面加载和 DOM 准备就绪之前不会执行。在 head 元素中加载脚本不再是一个坏习惯。

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

在不必担心<script>标记放置之前，您将有许多其他悬而未决的性能果实来选择代码以实现可维护性、易于开发和可读性。
2021-04-25 19:04:10
因为这是一个古老的讨论，所以你的回答现在更有意义。现在它也老了;)
2021-05-10 19:04:10

文档顶部的脚本元素更快可用（因此您可以绑定事件处理程序并在元素可用时立即运行 JS），但它们会阻止页面其余部分的解析。

底部的脚本元素不是（所以你不能）并且没有留下任何重要的页面，所以它是否被阻止并不重要。

哪个最好取决于相对重要性让 JS 运行 Vs 的优先级（必须根据具体情况确定）。具有 HTML 渲染。

请注意，底部的脚本元素必须出现在body 元素内。所以应该是：

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

并不是

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

是的，它确实会影响网页的性能。

JavaScript 的问题在于它会阻止页面其余部分的执行/加载。如果您的 JavaScript 中有一些需要很长时间的内容，那么它将阻止页面的其余部分加载：

请参阅这些示例：

您可以看到警报对页面其余部分呈现的影响。您放入页面顶部的任何 JavaScript 都将具有相同的效果。一般来说，最好放置任何对页面布局至关重要的东西（即菜单插件或其他东西）。任何需要用户交互（弹出处理程序）或根本不涉及用户（谷歌分析）的内容都应该放在页面底部。

您可以获得惰性加载器，将您的script标签注入到您的代码中。由于代码不在 HTML 上，您可以确保整个页面已正确呈现，并且您包含的 JS 不会阻止任何内容。

此代码示例显示了现代浏览器的工作原理，上面的答案描述了。
2021-04-27 19:04:10
在 Safari 8 中，这些示例中的每一个都完全相同，并且警报会阻止所有内容。
2021-05-03 19:04:10

是的，它确实会影响网页加载的性能。

问题是，普通<script>标签被阻塞，所以脚本标签之后的所有内容都必须等到脚本标签完成加载和解析，然后页面的其余部分才能加载。

现在有人可能会注意到，如果你async="true"在你的脚本标签中使用，它不会阻塞。但这仅被几个浏览器支持，因此这对一般情况没有帮助。

无论哪种方式，通常将您的脚本标签放在页面底部是个好主意，这样它们就不会阻碍页面的其他部分。

脚本的位置不会影响页面加载的速度 - 这取决于您的互联网连接。它实际上会影响感知性能 - 首先加载页面的可见元素（而不是必须等待脚本加载），因此页面加载速度似乎比平时快，而实际上花费的时间相同。
2021-05-12 19:04:10
@What：不幸的是，并非完全正确，因为它会阻止您的浏览器在加载脚本标记时加载其他文件，从而导致页面加载速度变慢。在加载页面时，将无法加载图像，而这些图像通常可以在整个页面加载期间并行加载。
2021-05-19 19:04:10
其它你可能感兴趣的问题
上一篇带有两个提交按钮和两个“目标”属性的 HTML 表单 下一篇环境检测：node.js 或浏览器