Javascript 我应该在正文中还是在 html 的头部编写脚本？

Should I write script in the body or the head of the html?

提问by Khoi

I have seen both ways, both implementation work just the structures are a bit different. In your experience, which work better and why?

我见过两种方式，两种实现方式都可以工作，只是结构有点不同。根据您的经验，哪个效果更好，为什么？

采纳答案by Mark Schultheiss

I would answer this with multiple options actually, the some of which actually render in the body.

我实际上会用多个选项来回答这个问题，其中一些实际上在正文中呈现。

• Place library script such as the jQuery library in the head section.
• Place normal script in the head unless it becomes a performance/page load issue.
• Place script associated with includes, within and at the end of that include. One example of this is .ascx user controls in asp.net pages - place the script at the end of that markup.
• Place script that impacts the render of the page at the end of the body (before the body closure).
• do NOT place script in the markup such as <input onclick="myfunction()"/>- better to put it in event handlers in your script body instead.
• If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.

• 将库脚本如 jQuery 库放在 head 部分。
• 将普通脚本放在头部，除非它成为性能/页面加载问题。
• 将与包含关联的脚本放置在包含的内部和末尾。一个例子是asp.net 页面中的.ascx 用户控件——将脚本放在该标记的末尾。
• 将影响页面渲染的脚本放置在正文的末尾（在正文关闭之前）。
• 不要将脚本放在标记中，例如<input onclick="myfunction()"/>- 最好将它放在脚本正文中的事件处理程序中。
• 如果你不能决定，把它放在脑子里，直到你有理由不这样做，比如页面阻塞问题。

Footnote: "When you need it and not prior" applies to the last item when page blocking (perceptual loading speed). The user's perception istheir reality—if it is perceived to load faster, it does load faster (even though stuff might still be occurring in code).

脚注：“当你需要它而不是之前”适用于页面阻塞时的最后一项（感知加载速度）。用户的感知就是他们的现实——如果它被认为加载得更快，它确实加载得更快（即使代码中可能仍在发生一些事情）。

EDIT: references:

编辑：参考：

• asp.net discussion: http://west-wind.com/weblog/posts/154797.aspxand here: http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
• jQuery document ready discussion: http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia%29
• the other answers on this question present valid information as well.
• use www.google.com and www.bing.com to search for related information (there are a lot of references)

• asp.net 讨论：http: //west-wind.com/weblog/posts/154797.aspx和这里：http: //msdn.microsoft.com/en-us/library/3hc29e2a.aspx
• jQuery 文档就绪讨论：http: //encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia% 29
• 关于这个问题的其他答案也提供了有效信息。
• 使用 www.google.com 和 www.bing.com 搜索相关信息（有很多参考资料）

Side note: IF you place script blocks within markup, it may effect layout in certain browsers by taking up space (ie7 and opera 9.2 are known to have this issue) so place them in a hidden div (use a css class like: .hide { display: none; visibility: hidden; }on the div)

附注：如果您放置标记内脚本块，它可能在某些浏览器的占用空间影响布局（IE7和歌剧9.2，已知有这个问题），所以将它们装入隐藏DIV（使用一个CSS类，如：.hide { display: none; visibility: hidden; }上div)

Standards: Note that the standards allow placement of the script blocks virtually anywhere if that is in question: http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.htmland http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

标准：请注意，如果有问题，标准允许将脚本块放置在几乎任何地方： http: //www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html和http:// www.w3.org/TR/xhtml11/xhtml11_dtd.html

EDIT2: Note that whenever possible (always?) you should put the actual Javascript in external files and reference those - this does not change the pertinent sequence validity.

EDIT2：请注意，只要有可能（总是？），您应该将实际的 Javascript 放在外部文件中并引用这些文件 - 这不会改变相关序列的有效性。

回答by Ken Struys

The problem with writing scripts at the head of a page is blocking. The browser must stop processing the page until the script is download, parsed and executed. The reason for this is pretty clear, these scripts might insert more into the page changing the result of the rendering, they also may remove things that dont need to be rendered, etc.

在页面开头编写脚本的问题是阻塞。浏览器必须停止处理页面，直到脚本被下载、解析和执行。原因很明显，这些脚本可能会在页面中插入更多内容来更改渲染结果，它们也可能会删除不需要渲染的内容等。

Some of the more modern browsers violate this rule by not blocking on the downloading the scripts (ie8 was the first) but overall the download isn't the majority of the time spent blocking.

一些更现代的浏览器违反了这一规则，不阻止下载脚本（即 8 是第一个），但总的来说下载并不是阻止花费的大部分时间。

Check out Even Faster Websites, I just finished reading it and it goes over all of the fast ways to get scripts onto a page, Including putting scripts at the bottom of the page to allow rendering to complete (better UX).

查看甚至更快的网站，我刚刚读完它，它介绍了将脚本放到页面上的所有快速方法，包括将脚本放在页面底部以完成渲染（更好的 UX）。

回答by Vinz

W3Schools have a nice article on this subject.

W3Schools 有一篇关于这个主题的好文章。

Scripts in <head>

脚本 <head>

Scripts to be executed when they are called, or when an event is triggered, are placed in functions.

Put your functions in the head section, this way they are all in one place, and they do not interfere with page content.

调用脚本或触发事件时要执行的脚本放置在函数中。

将您的功能放在 head 部分，这样它们都在一个地方，并且不会干扰页面内容。

Scripts in <body>

脚本 <body>

If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.

如果您不希望将脚本放置在函数内，或者您的脚本应该编写页面内容，则应将其放置在正文部分中。

回答by Dejan Marjanovic

Head, or before closure of body tag. When DOM loads JS is then executed, that is exactly what jQuery document.ready does.

头，或在身体标签关闭之前。然后执行 DOM 加载 JS 时，这正是 jQuery document.ready 所做的。

回答by Aaron Digulla

I always put my scripts in the header. My reasons:

我总是把我的脚本放在标题中。我的理由：

1. I like to separate code and (static) text
2. I usually load my script from external sources
3. The same script is used from several pages, so it feels like an include file (which also goes in the header)

1. 我喜欢将代码和（静态）文本分开
2. 我通常从外部资源加载我的脚本
3. 多个页面使用了相同的脚本，因此感觉就像一个包含文件（也在标题中）