blocks|key|3058442|text|如果你把它放在底部，它最后加载，因此加快了用户可以看到页面的速度。它必须在最终的</html>之前，否则它就不是DOM的一部分。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3058443|但是，如果代码是立即需要的，那么就把它放在头部。|3058444|最好将博客小部件之类的东西放在底部，这样如果它们没有加载，就不会影响页面的可用性。|3058445|entityMap^0|14|7|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

If you put it at the bottom, it loads last, hence speeding up the speed that the user can see the page. It does need to be before the final <code>&lt;/html&gt;</code> though otherwise it won't be part of the DOM.

If the code is needed instantly though, then put it in the head.

It's best to put things like blog widgets at the bottom so that if they don't load, it doesn't affect the usability of the page.

blocks|key|3903569|text|不，它不应该在</html>之后，因为这将是无效的。放置脚本的最佳位置就在</body>之前|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3903570|这基本上是因为大多数浏览器在评估您提供的脚本时会停止呈现页面。因此，可以将非阻塞代码放在页面中的任何位置(我主要考虑将函数附加到onLoad事件，因为事件绑定非常快，实际上是免费的)。这里最大的杀手锏是在页面的开始放入一些广告服务器脚本，这可以在广告完全下载之前阻止任何页面加载，使您的页面加载时间膨胀|3903571|entityMap^0|7|7|11|7|0|1S|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

No it should not be after the <code>&lt;/html&gt;</code> as that would be invalid. The best place to put scripts is right before the <code>&lt;/body&gt;</code>

This is basically because most browsers stop rendering the page while they eval the script that you provide. So its OK to put non-blocking code anywhere in the page (I'm mainly thinking of things that attach functions to the <code>onLoad</code> event, since event binding is so fast as to effectively be free). A big killer here is at the beginning of the page putting in some ad server script, which can prevent any of the page loading before the ads have totally downloaded, making your page load times balloon

blocks|key|784923|text|对于真正不起眼的脚本，有两种可能性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|784924|通过头部中的脚本标记包括外部脚本文件的脚本标记|784925|通过主体底部的脚本标记包括外部脚本文件(在</body></html>)|unordered-list-item|offset|length|style|CODE|784926|之前|784927|第二个可能会更快，因为雅虎最初的研究表明，一些浏览器在点击script标签时会尝试加载脚本文件，因此在完成之前不会加载页面的其余部分。然而，如果你的脚本有一个“准备好”的部分，它必须在DOM准备好的时候立即执行，你可能需要把它放在头部。另一个问题是布局-如果您的脚本要更改页面布局，您希望尽早加载它，这样您的页面就不会花费很长时间在用户面前重新绘制自己。|784928|如果外部脚本站点位于另一个域(如外部小部件)，那么将其放在底部可能是值得的，以避免延迟页面的加载。|784929|对于任何性能问题，做你自己的基准测试-当研究完成时，可能是正确的，可能会随着你自己的本地设置或浏览器中的变化而改变。|784930|entityMap^0|0|0|L|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@$G|X|H|Y|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|10|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|11|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|12|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|T|$]]

There are two possibilities for truly unobtrusive scripts:

<ul>
<li>including an external script file via a script tag in the head section</li>
<li>including an external script file via a script tag at the bottom of the body (before <code>&lt;/body&gt;&lt;/html&gt;</code>)</li>
</ul>

The second one can be faster as the original Yahoo research showed some browsers try to load script files when they hit the script tag and therefore don't load the rest of the page until they have finished. However, if your script has a 'ready' portion which must execute as soon as the DOM is ready you may need to have it in the head. Another issue is layout - if your script is going to change the page layout you want it loaded as early as possible so your page does not spend a long time redrawing itself in front of your users.

If the external script site is on another domain (like external widgets) it may be worth putting it at the bottom to avoid it delaying loading of the page. 

And for any performance issues do your own benchmarks - what may be true at one time when a study is done might change with your own local setup or changes in browsers.

blocks|key|3058590|text|如果您想要调整脚本的位置，YSlow是一个很好的工具，如果它将提高或损害性能，它将给您带来好处。将javascript放在特定的文档位置可以真正缩短页面加载时间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3058591|http://developer.yahoo.com/yslow/|offset|length|3058592|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

If you want to tinker with the position of your scripts, YSlow is a great tool for giving you a flavour if it's going to improve or hurt performance. Putting javascript in certain document positions can really kill page load times.

<a href="http://developer.yahoo.com/yslow/" rel="noreferrer">http://developer.yahoo.com/yslow/</a>

blocks|key|3058671|text|这从来不是一成不变的-雅虎建议将脚本放在结束的</body>标记之前，这样会产生一种错觉，即页面在空的缓存中加载得更快(因为脚本不会阻止下载文档的其余部分)。但是，如果您有一些代码要在页面加载时运行，则只有在加载完整个页面后才会开始执行。如果您将脚本放在<head>标记中，它们将在之前开始执行-因此在预置的缓存中，页面的加载速度实际上会更快。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3058672|此外，将脚本放在页面底部的特权并不总是可用的。如果需要在依赖于之前加载的库或其他JavaScript代码的视图中包含内联脚本，则必须在<head>标记中加载这些依赖项。|3058673|总而言之，雅虎的建议很有趣，但并不总是适用的，应该根据具体情况加以考虑。|3058674|entityMap^0|N|7|3J|6|0|1V|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

It's never so cut and dry - Yahoo recommends putting the scripts just before the closing <code>&lt;/body&gt;</code> tag, which will create the illusion that the page loads faster on an empty cache (since the scripts won't block downloading the rest of the document). 
However, if you have some code you want to run on page load, it will only start executing after the entire page has loaded. If you put the scripts in the <code>&lt;head&gt;</code> tag, they would start executing before - so on a primed cache the page would actually appear to load faster.

Also, the privilege of putting scripts at the bottom of the page is not always available. If you need to include inline scripts in your views that depend on a library or some other JavaScript code being loaded before, you must load those dependencies in the <code>&lt;head&gt;</code> tag.

All in all Yahoo's recommendations are interesting but not always applicable and should be considered on a case-by-case basis.

blocks|key|5314117|text|正如其他人所说，将它放在闭合正文html标记之前。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5314118|前几天，我们接到许多客户的电话，抱怨他们的网站速度非常慢。我们在本地访问了他们，发现他们花了20-30秒来加载一个页面。我们以为是服务器表现不佳，就登录了--但web和sql服务器的活跃度都约为0%25。|5314119|几分钟后，我们意识到一个外部网站宕机了，我们正在链接到Javascript跟踪标签。这意味着浏览器正在点击站点头部的脚本标记，并等待下载脚本文件。|5314120|因此，至少对于第三方/外部脚本，我建议将它们作为页面上的最后一件事。然后，如果它们不可用，浏览器至少会加载页面，直到该点-用户将忘记它。|5314121|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

As others have said, place it before the closing body html tags.

The other day we had numerous calls from clients complaining their sites were extremely slow. We visited them locally and found they took 20-30 seconds to load a single page. Thinking it was the servers performing badly, we logged on - but both web and sql servers were ~0% activity.

After a few minutes, we realised an external site was down, which we were linking to for Javascript tracking tags. This meant browsers were hitting the script tag in the head section of the site and waiting to download the script file.

So, for 3rd party/external scripts at least, I'd recommend putting them as the last thing on the page. Then if they were unavailable, the browser would at least load the page up until that point - and the user would be oblivious to it.

blocks|key|785099|text|综上所述，基于以上建议：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|785100|用于外部脚本的|785101|(谷歌分析、第三方营销跟踪等)将它们放在</body>标记之前。|ordered-list-item|offset|length|style|CODE|785102|对于影响页面布局的脚本，请放在head中。|785103|对于依赖于'dom+ready‘(如jquery)的脚本，请考虑将它们放在</body>之前，除非您有将脚本放在head中的大小写原因。|785104|如果有具有依赖关系的内联脚本，请将所需脚本放在head中。|785105|785106|entityMap^0|0|0|K|7|0|0|11|7|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@$G|W|H|X|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|Z|8|@$G|10|H|11|I|J]]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|S|$]]

To summarize, based on the suggestions above:

<ol>
<li>For external scripts (Google analytics, 3rd party marketing trackers, etc.) place them before the <code>&lt;/body&gt;</code> tag.</li>
<li>For scripts that affect page layout, place in head.</li>
<li>For scripts that rely on 'dom ready' (like jquery), consider placing before <code>&lt;/body&gt;</code> unless you have an edge-case reason to place scripts in head.</li>
<li>If there are inline scripts with dependencies, place the required scripts in head.</li>
</ol>

I've recently read the Yahoo manifesto <a href="http://developer.yahoo.com/performance/rules.html#postload" rel="noreferrer">Best Practices for Speeding Up Your Web Site</a>. They recommend to put the JavaScript inclusion at the bottom of the HTML code when we can.

But where exactly and when?

Should we put it before closing <code>&lt;/html&gt;</code> or after ? And above all, when should we still put it in the <code>&lt;head&gt;</code> section?

Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我最近读了雅虎的宣言。他们建议尽可能将JavaScript包含放在HTML代码的底部。但是确切的地点和时间呢？我们应该把它放在关闭</html>之前还是之后？最重要的是，我们什么时候还应该把它放在<head>部分？

问不显眼的JavaScript：<script>在代码的顶部还是底部？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不显眼的JavaScript：<script>在代码的顶部还是底部？EN