blocks|key|316318|text|head中的任何javascript都将在页面加载之前进行评估，这意味着页面感觉需要更长的加载时间。如果所有的javascript都在末尾，那么让事件正常工作会稍微困难一些，但是jQuery已经很好地解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316319|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Any javascript in the head will be evaluated before the page is loaded, meaning the page feels like it takes longer to load. It is slightly harder to get events to work properly if all the javascript is at the end, but jQuery pretty much solves this problem for you.

blocks|key|3055730|text|来自雅虎的Best+Practices+for+Speeding+Up+Your+Web+Site|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3055731|3055732|脚本造成的问题是它们会阻止并行下载。HTTP/1.1规范建议浏览器为每个主机名并行下载不超过两个组件。如果您从多个主机名提供映像，则可以并行进行两个以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使是在不同的主机名上也是如此。|blockquote|3055733|3055734|在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用document.write插入页面内容的一部分，则不能在页面中将其下移。还可能存在作用域问题。在许多情况下，有解决这些情况的方法。|3055735|另一个经常出现的建议是使用延迟脚本。DEFER属性指示脚本不包含document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox不支持DEFER属性。在Internet+Explorer中，脚本可能会延迟，但不会像所需的那样延迟。如果脚本可以延迟，则也可以将其移动到页面底部。这将使您的网页加载速度更快。|3055736|3055737|因此，一般而言，最好将它们放在底部。然而，这并不总是可能的，而且通常也不会有太大的不同。|3055738|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/performance/rules.html#js_bottom^0|5|18|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|12|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|13|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|17|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

From Yahoo's <a href="http://developer.yahoo.com/performance/rules.html#js_bottom" rel="noreferrer">Best Practices for Speeding Up Your Web Site</a>:

<blockquote>
 The problem caused by scripts is that
 they block parallel downloads. The
 HTTP/1.1 specification suggests that
 browsers download no more than two
 components in parallel per hostname.
 If you serve your images from multiple
 hostnames, you can get more than two
 downloads to occur in parallel. While
 a script is downloading, however, the
 browser won't start any other
 downloads, even on different
 hostnames.
 
 In some situations it's not easy to
 move scripts to the bottom. If, for
 example, the script uses
 document.write to insert part of the
 page's content, it can't be moved
 lower in the page. There might also be
 scoping issues. In many cases, there
 are ways to workaround these
 situations.
 
 An alternative suggestion that often
 comes up is to use deferred scripts.
 The DEFER attribute indicates that the
 script does not contain
 document.write, and is a clue to
 browsers that they can continue
 rendering. Unfortunately, Firefox
 doesn't support the DEFER attribute.
 In Internet Explorer, the script may
 be deferred, but not as much as
 desired. If a script can be deferred,
 it can also be moved to the bottom of
 the page. That will make your web
 pages load faster.
</blockquote>

Therefore, in general, it is preferrable to put them at the bottom. However, it isn't always possible, and it often doesn't make that much of a difference anyway.

blocks|key|3055746|text|这真的取决于你的网站。如果要访问和调用主体中的JavaScript函数，则必须在标头中引用它，这样才能加载它。否则，如果您只打算在加载整个文档时调用JavaScript，那么明智的做法是将JavaScript放在body的末尾。通过将.JS文件放在最后，您可以加载整个页面，然后获取.JS文件。这样，用户将能够快速看到该页面，并且当他/她熟悉该页面时，.JS文件已经下载完毕。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3055747|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

It really depends on your website. If you are accessing and invoking the JavaScript functions inside the body then it must be referenced in the header so that is is loaded. Else if you are only going to call the JavaScript when the whole document is loaded then it is wise to put the JavaScript at the end of body. By putting .JS file at the end you load the whole page and then fetch the .JS file. This way the user will be able to quickly see the page and by the time he/she gets familiar with the page the .JS file has already been downloaded.

blocks|key|3269375|text|正如其他人所说，当你将javascript放在头部时，它会延迟页面的渲染，直到脚本加载之后，这意味着页面加载可能需要更长的时间-特别是如果你正在下载大的脚本文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3269376|如果将脚本标记移动到页面的末尾，将确保浏览器在脚本标记之前下载图像和样式表，并且很可能在脚本开始运行之前呈现页面。这也意味着，如果您依赖于脚本中的某些功能，则在页面对用户可见后一段时间内，这些功能才可用。|3269377|如果您正在添加样式或元素(等，使用某种形式的更丰富的编辑器切换文本字段)，这将作为闪烁显示给用户。|3269378|如果要向元素添加单击事件，则在元素本身可见后一段时间内，才能单击这些事件。|3269379|有时这些问题需要你把你的脚本放在头上，其他时候你可以把它们放在底部就行了。|3269380|我的意思是(完全反对YSlow和很多聪明人)你应该把你的脚本放在head标签里，大多数时候只依赖它们被缓存。|3269381|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

As other people have said, when you put javascript in the head it delays the rendering of the page until after the scripts have loaded, which means the page may take longer to load - especially if you are downloading large script files.

If you move your script tags to the end of the page, you will ensure that the browser downloads images and stylesheets before the script tags and the page will likely apear to be rendered before the scripts start to run. This also means that if you are depending on some functionality from your scripts, this will not be available until a bit after the page is visible to the user.

If you are adding styles or elements (etc. switching textfields with some form of richer editor) this will be visible to the user as flickering.

If you are adding click-events to elements, they will not be clickable until a bit after the elements themselves are visible.

Sometimes theses issues requires you to put your scripts in the head, other times you will be fine by sticking them in the bottom.

IMHO (completely against YSlow and lot's of clever people) you should keep your scripts in the head tag, and just rely on them to be cached most of the time.

blocks|key|3055782|text|通常，您应该将脚本引用放在页面的底部。脚本不仅需要下载，还必须在块释放和页面继续呈现过程之前进行评估和执行。应该把像现代这样的东西放在最上面，因为它做了一些功能检测，以及你可能想要的HTML5垫片。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3055783|您想要将脚本放在页面底部的另一个原因是单点故障或SPOFs。这就是脚本调用超时或由于某些其他原因阻止页面执行的地方。这可能会在第三方广告库等方面发生很多。|3055784|是的，你可能不得不更努力地思考如何构建你的应用程序，但我发现对我来说很快就会变得非常自然。在过去的4年里，我用底部的脚本构建了数百个web应用程序，我可以分辨出其中的区别。我可能是500ms，可能是5000ms，但这一切都很重要。|3055785|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

In general you should place script references at the bottom of your page. Scripts not only need to be downloaded, they must also be evaluated and executed before the block is released and the page proceeds with the rendering process. Things like Modernizr should be placed in the top because it does some feature detections as well as HTML5 shims that you will probably want.

Another reason you want to try to place scripts at the bottom of the page is Single Points of Failure or SPOFs. This is where a script call times out or for some other reason blocks the page execution. This can happen a lot with third party advertising libraries, etc. 

Yes you may have to think a little harder about how you architect your application, but I found it to become very natural very quickly for me. I have built hundreds of web apps over the past 4 years with the script at the bottom and I can tell the difference. I may be 500ms it might be 5000ms but it all matters.

Most of javascript and web development books/articles says that you must put CSS in the head tag and javascript at the bottom of the page.

But when I open html source of famous websites such as this one stackoverflow, I find they put some js files in the head tag.

What's Pros and Cons of both approaches and when to use which?

Found another question for the same issue:
<a href="https://stackoverflow.com/questions/1013112/where-should-i-declare-javascript-files-used-in-my-page-in-head-head-or-near">Where should I declare JavaScript files used in my page? In &lt;head&gt;&lt;/head&gt; or near &lt;/body&gt;?</a>

What's Pros and Cons: putting javascript in head and putting just before the body close

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

大多数javascript和web开发书籍/文章都说你必须把CSS放在页面的头标签里，把javascript放在页面的底部。但是当我打开像这个这样的著名网站的html源代码时，我发现他们在head标签里放了一些js文件。这两种方法的优缺点以及何时使用哪种方法？对于同样的问题，找到了另一个问题： 

问优点和缺点:将javascript放入头部，并在身体关闭之前放置
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问优点和缺点:将javascript放入头部，并在身体关闭之前放置EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问优点和缺点:将javascript放入头部，并在身体关闭之前放置
EN