javascript附加代码的最佳位置[重复]答案

【问题标题】：Best place for javascript additional code [duplicate]javascript附加代码的最佳位置[重复]
【发布时间】：2013-03-05 00:39:21
【问题描述】：

我的问题是 - 是否可以将 javascript 附加代码（<script>...</script> 包含验证等简单内容的标签 - 不链接到任何外部源）放在 <body> 部分的顶部？

把它放在那里和把代码放在<head>部分有什么区别吗？

我想创建一个带有一个头部部分的布局文件。每个模板都有不同的 js 代码部分——创建 .js 文件的外部链接将禁用添加 PHP 标记的可能性，所以我必须找到另一种方法。

【问题讨论】：

"创建指向 .js 文件的外部链接将禁用添加 PHP 标记的可能性" - 如果您在服务器上托管 JavaScript 文件，并且之前将服务器配置为通过 PHP 运行 .js 文件，则情况并非如此为他们服务。

标签： php javascript html

【解决方案1】：

不仅可以将script 标签放在body 元素中，除非你有充分的理由将它放在head 中，首选将它放在@ 987654326@ 元素，理想情况下就在结束 </body> 标记之前。这样，您的主要内容（您的标记）会尽快呈现给用户，而不是等待脚本文件加载/JavaScript 引擎启动并执行脚本。

参考资料：

关于您的评论的旁注：

每个模板都会有不同的 js 代码部分——创建指向 .js 文件的外部链接会禁用添加 PHP 标记的可能性，所以我必须另谋出路。

理想情况下，尝试找到一种方法来只加载一个文件，而不是一堆文件。每个 HTTP 请求都有大量开销。您将在上面第一个链接中看到的建议之一是尽量减少 HTTP 请求的数量。

【讨论】：

我将所有的 jquery 放在页面的最底部。我喜欢将所有标记放在顶部，将所有脚本放在底部。让我更容易看到我想看到的东西。
哦，太好了，谢谢！
根据您的编辑 - 是的，但是，几乎每个文件都包含 jquery、验证插件、日期小部件和其他类似的东西 - 这一切都会产生相当多的 http 请求，而我没有知道是否有办法减少这种情况...
因为它主要是 jquery - 忘了提这个，虽然最终它是 javascript :P

【解决方案2】：

事实上，将它放在顶部会降低性能并且放置它是一个冒险的地方：

就在结束正文标记之前

http://developer.yahoo.com/performance/rules.html#js_bottom

将脚本放在底部 标签： javascript 脚本引起的问题是它们会阻止并行下载。 HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入部分页面内容，则不能将其移到页面下方。也可能存在范围问题。在许多情况下，有一些方法可以解决这些情况。经常出现的另一种建议是使用延迟脚本。 DEFER 属性表示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会延迟，但不会像期望的那样延迟。如果可以推迟脚本，也可以将其移至页面底部。这将使您的网页加载速度更快。

【讨论】：

但这并不真正适用于 OP 的情况，因为 OP 将 JavaScript 代码直接包含在 <script> 标签中，而不是引用要下载的 JavaScript 文件。诚然，在代码运行（我认为）时，浏览器仍会暂停渲染，但除非是一些严重的 JavaScript，否则不会影响感知性能。

【解决方案3】：

只要在您在页面上调用之前包含 javascript 代码，它在头部还是在正文的上半部分应该没有什么区别。如果您正在构建一个公共标头，最好将其分开。这样，您就不会调用未使用的代码。

【讨论】：