堆栈内存溢出
  繁体   English   中英

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

[英]Does the <script> tag position in HTML affects performance of the webpage?

 原文  2010-12-09 09:52:36  2   8    javascript/ html/ performance/ optimization

问题描述

如果脚本标记位于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>标签。 我知道这不是一个规则，但许多人更喜欢这样。 如果您不相信，只需查看此页面的来源 ！ 并告诉我什么是最佳性能的更好的风格。

8 个解决方案

解决方案1
 67 已采纳  2010-12-09 10:01:14

默认情况下，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”），因此，用户代理可以继续解析和呈现。

解决方案2
 24  2014-01-31 14:49:42

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

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

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

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

解决方案3
 16  2010-12-09 09:58:53

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

底部的脚本元素不是（所以你不能）并且没有任何重要的页面，所以如果它被阻止也没关系。

哪个最好取决于亲属 重要性 JS运行Vs的优先级（必须根据具体情况确定）。 拥有HTML呈现。

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

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

并不是 

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

解决方案4
 11  2010-12-09 10:09:35

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

JavaScript的问题在于阻止了页面其余部分的执行/加载。 如果你的JavaScript中需要很长时间，那么它将阻止页面的其余部分加载：

看这些例子：

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

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

解决方案5
 5  2010-12-09 10:01:08

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

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

现在有人可能会注意到，如果在脚本标记中使用async="true" ，它将不会阻止。 但是这只是由几个浏览器支持，所以这对一般情况没有帮助。

无论哪种方式，通常最好将脚本标记放在页面底部，这样它们就不会占据页面的其他部分。

解决方案6
 4  2010-12-09 10:11:51

首先，不在body / head元素内部的脚本标记会创建无效的HTML，甚至可能会在某些浏览器中导致一些异常。

head元素内的脚本标记将在呈现任何HTML之前加载和解释，这会阻止HTML / CSS呈现。

body标签底部的脚本标签不会阻止HTML / CSS，因为你只能在DomReady上使用DOM，这是放置JavaScript的最佳位置。 作为旁注，您甚至不需要使用domReady事件包装器。

或者，您也可以使用LABJS和RequireJS等库来从head标签启动JavaScript（最小的HTML / CSS阻止）。 通过这些库中的任何一个加载的任何脚本都将以HTML / CSS渲染的并行方式运行。 

<head>
   <script data-main="INITSCRIPT.js" src="require.js"></script>
</head>

INITSCRIPT.js 

require( [ "jQuery" , "somePlugin" ] , function(){
   $(document).ready(function(){
      $("#someId").somePlugin();   
   });
} );

在上面的示例中，只有require.js的加载和解释才会阻止HTML / CSS呈现，这通常是无关紧要的。 之后jQuery和somePlugin将在paralel中加载，因此HTML / CSS渲染得很好。

解决方案7
 1  2010-12-09 10:00:30

脚本本身的性能肯定是一样的。

但是，正如您链接的文章中所解释的那样，放置很重要，因为浏览器在遇到并加载<script>标记的内容时将“暂停”（或“冻结”）同时下载和呈现页面。 所以最好让浏览器呈现页面并应用CSS样式， 然后包含你的.js 。 它会让用户看起来更顺畅。

此外，在底部包含脚本可能意味着在关闭<body>标记之前。

解决方案8
 -1  2015-05-02 19:22:56

除了性能方面，每当在<head>标记内包含<script>标记时，您还需要小心。

让我们考虑以下示例： 

<head>
 <script>document.getElementById("demo").innerHTML="hello";</script>
</head>
<body>
 <p id="demo">The content of the document......</p>
</body>

在这里，请注意在加载DOM（或<p>标记）之前加载脚本，这会导致脚本失败（因为getElementById无法找到名为'demo'的元素）。

在这种情况下，您只需要在body标签中使用该脚本。

考虑到其他答案，最好让脚本始终位于</body>标记之前，因为您永远不知道外部加载的脚本是否对DOM有任何此类依赖性。

参考： 详细的问题描述

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 脚本标记在html中的位置 setTimeout（）是否会影响性能 此javascript语句会影响性能吗？ HTML Doctype标签会影响javascript吗？ javascript getAttribute是否会影响性能或触发布局？ 捆绑包大小如何影响性能？ 文档类型（甚至HTML标记的编写方式）是否会影响IE9中的JavaScript引擎？ 为什么 { 位置会影响此 Javascript 代码？ 获取跨域脚本标签的HTML5性能对象 在网页中加载卸载 iframe 会影响其历史记录吗？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM